wireframe

Generate grayscale low-fidelity wireframe variants for layout and flow exploration.

Updated Aug 13, 2026
One-click install
npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill wireframe-mjlike123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe
Source: https://github.com/Mjlike123/ui-prototype-workbench/tree/main/.agents/skills/monkren-design/skills/02-create/wireframe
Command: npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill wireframe-mjlike123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Jumping straight into high-fidelity design wastes effort when the layout direction is still undecided. This Skill produces multiple low-cost grayscale wireframe variants so you can compare layout, flow, and content-priority options before committing to hi-fi work. ## Core Features & Use Cases - Multi-Variant Exploration: Produces at least 3 variants differing along a chosen axis such as layout, density, step count, CTA placement, or navigation pattern, delivered as a self-contained HTML/SVG file. - Wireframe Visual Language: Enforces pure grayscale, system sans-serif fonts, labeled content boxes, striped image placeholders, and numbered annotations so output reads as a wireframe, not a broken hi-fi mockup. - Decision Capture: Records the chosen variant, rejected directions, and newly surfaced constraints as a brief for subsequent hi-fi prototyping. - Use Case: Ask for a signup flow wireframe and receive side-by-side variants comparing a single-page form, a multi-step wizard, and progressive disclosure, each annotated with trade-offs. ## Quick Start Ask the assistant to sketch three wireframe variants of your signup flow comparing single-page, multi-step, and progressive disclosure layouts.

Frequently Asked Questions about wireframe

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

FAQPage Schema
How do I create low-fidelity wireframes before hi-fi design?▼

Define the exploration target, user goal, constraints, and a variation axis such as layout or step count, then generate at least three grayscale variants in one self-contained HTML/SVG file. Annotate each variant with trade-offs and record the chosen direction as a brief for hi-fi work.

How many wireframe variants should I explore per round?▼

Produce a minimum of 3 variants per round, with an upper limit of 5 to 6. Arrange them from most conventional to most novel so users can compare safe options against riskier ones side by side.

What visual style should a wireframe use?▼

Use pure grayscale with black, white, and two to three grays, system sans-serif fonts, labeled content boxes, striped image placeholders, and ipsum or skeleton copy. Avoid brand colors, real images, and final typography so feedback stays on structure.

When should I use wireframes instead of high-fidelity prototypes?▼

Use wireframes when the problem is open-ended and you need to compare multiple directions cheaply, such as exploring layouts, flows, or navigation models. Switch to hi-fi prototyping only after a direction is selected, since wireframes are disposable exploration artifacts.

What are the limitations of wireframe exploration?▼

Wireframes cannot validate visual design, branding, typography, or detailed interaction polish because they deliberately strip those layers away. They are one-time exploration tools, so investing hi-fi effort into them defeats their purpose.