wireframe

Generate interactive grayscale wireframes, idea boards, and click-through prototypes as self-contained HTML files.

Updated Aug 26, 2026
One-click install
npx skills add https://github.com/danieliudi/trackforge-os --skill wireframe-danieliudi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wireframe
Source: https://github.com/danieliudi/trackforge-os/tree/main/.cursor/skills/wireframe
Command: npx skills add https://github.com/danieliudi/trackforge-os --skill wireframe-danieliudi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It lets teams decide what goes on a screen and where it sits before visual design makes those decisions expensive, producing structural artifacts that invite critique of layout rather than fonts and colors. ## Core Features & Use Cases - Lo-fi idea boards: Generate boards of thumbnail vignettes showing many structurally different mechanisms for the same problem, each with a numbered narrating caption. - Mid-fi full-page wireframes: Produce complete interactive grayscale screens built from a token-based design system with real labels, native controls, and working states. - Click-through prototypes: Wire real trigger elements to navigate between screens following flow logic, with grid, slideshow, and prototype view modes plus light/dark themes. - Use Case: Ask to wireframe a checkout flow and receive a single self-contained HTML file with every screen, annotation markers with a notes rail, and a prototype mode you can click through in a design review. ## Quick Start Ask the assistant to wireframe the dashboard screen as an HTML artifact with a click-through prototype.

Frequently Asked Questions about wireframe

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

FAQPage Schema
How do I create a wireframe before visual design?

Describe the screen or flow you want structured and choose an output format: HTML, Figma, pencil, or a markdown spec. The skill generates grayscale wireframes with real labels and native interactive controls, keeping feedback focused on layout rather than styling.

What is the difference between lo-fi thumbnails and full-page wireframes?

Thumbnails are idea vignettes showing one focused UI fragment per mechanism, used for divergent exploration of structural options. Full-page wireframes are complete interactive screens used to verify that everything the screen needs is present and correctly weighted.

Can wireframes be exported to Figma or pencil?

Yes, the skill supports Figma and pencil via MCP in addition to self-contained HTML. Figma and pencil canvases are single-theme, so you choose light or dark up front, while HTML artifacts ship both themes with an in-page toggle.

How do click-through prototypes work in the HTML output?

Prototype view makes the real trigger elements clickable, navigating between screens following flow logic rather than document order. Back steps through visited screens, Restart returns to the flow entry, and unwired controls leave the tab order.

When should I not use wireframing?

Skip wireframing when the question is about visual design such as color, typography, or brand expression, which is explicitly out of scope. Also avoid presenting a higher-fidelity rung than the decision requires, such as a prototype before the team agrees on screen structure.