skills.rest
truongnat
truongnatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ux-wireframe

Generates ASCII wireframes, HTML prototypes, and Figma handoff briefs for screen design.

Updated Jul 28, 2026
Search Tags:#html#figma#handoff#ux design#prototype#ascii#wireframe
One-click install
npx skills add https://github.com/truongnat/Restly --skill ux-wireframe-truongnat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-wireframe
Source: https://github.com/truongnat/Restly/tree/main/.agents/skills/ux-wireframe
Command: npx skills add https://github.com/truongnat/Restly --skill ux-wireframe-truongnat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Business analysts and designers need low-fidelity screen sketches early in a project, but jumping straight to high-fidelity design tools is slow and premature. This Skill produces quick wireframes and structured Figma handoff briefs so teams can align on screen layout before committing to detailed design work. ## Core Features & Use Cases - Four output modes: ASCII wireframes (/wireframe-ascii), HTML wireframes (/wireframe-html), interactive HTML prototypes (/prototype-html), and Figma handoff briefs (/figma). - Structured templates: Generates WIREFRAME.md or FIGMA_BRIEF.md from templates with screen inventories, trace references to user stories, and open-question tracking. - Designer handoff: The Figma mode produces a copy-paste checklist of frames, components, tokens, and content for the design team, without claiming frames were drawn in Figma. - Use Case: A BA needs to communicate a login flow to stakeholders. They run the skill in ASCII mode to sketch the screens in WIREFRAME.md, then switch to Figma mode to prepare a handoff brief listing every frame and component the designer must create. ## Quick Start Ask the agent to create an ASCII wireframe for the login and dashboard screens using the ux-wireframe skill in ascii mode.

Frequently Asked Questions about ux-wireframe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an ASCII wireframe for a screen flow?▼

Run the skill in ascii mode (alias /wireframe-ascii) with your screens and flow defined. It generates a WIREFRAME.md file containing text-based layout sketches, a screen inventory table, and trace references to user stories.

How to generate an HTML prototype from wireframes?▼

Use prototype mode (alias /prototype-html) with the screens and content fields specified. The skill writes grayscale HTML files under the session's prototypes/ directory plus a WIREFRAME.md summary linking each screen to its HTML path.

Can this skill draw frames directly in Figma?▼

No, live drawing inside Figma is out of scope because it requires user plugins and tokens. The figma mode produces a FIGMA_BRIEF.md handoff document listing frames, components, tokens, and a designer checklist instead.

What inputs are required to generate a wireframe?▼

You must provide the mode (ascii, html, prototype, or figma), the screens or flow to sketch, content fields, and design-system notes. A Figma file URL is optional and only used in figma mode for the handoff brief.

What are the limitations of low-fidelity wireframes?▼

These wireframes are intentionally low-fidelity and must not be presented as final UI. They use grayscale styling, contain no production design tokens, and unknown information architecture should be confirmed with stakeholders before sketching.

Related Skills

Explore More Design & Creative Skills→
nroze22nroze22
1

prd-to-wireframe

Generate interactive HTML/React wireframe prototypes from Product Requirements Documents.

Community
Advanced
jikig-aijikig-ai
12

ux-design-lead

Generates wireframes, high-fidelity screens, and design specs as Markdown or Pencil MCP files.

Official
Advanced
inbharataiinbharatai
22

wireframe-builder

Generate low-fidelity wireframes and user-flow diagrams with interaction annotations.

Community
Basic
DeiblerDeibler
8

iteration-prototype-fidelity

Selects the appropriate prototype fidelity for each iteration and research question.

Community
Intermediate