| name | claude-design-wireframe |
| description | Wireframe workflow for low-fidelity structure, hierarchy, and information layout exploration. |
Claude Design Wireframe
Use this skill when the fastest correct next step is to explore structure before polish.
Goal
Produce low-fidelity screens or storyboards that answer:
- What information matters first
- What the user sees in sequence
- Where interaction changes the layout
- Which sections deserve high-fidelity follow-up
Inputs
- product or page goal
- target audience
- primary conversion or action
- required sections or content blocks
- constraints on tone, density, or device
Workflow
- Reduce the page to 3-7 structural zones
- Label hierarchy with clear headings, support text, and action areas
- Explore 2-4 layout directions before settling
- Prefer type, spacing, rules, and alignment over decorative UI
- Keep cards sparse; use bands, columns, editorial blocks, timelines, and anchored text groups first
- Mark interaction states only where they change meaning
- End with a recommendation for the strongest direction and the reason it wins
Deliverables
- a wireframe direction summary
- section-by-section layout outline
- interaction notes
- a short list of upgrade targets for high-fidelity design
Verification
- the page goal is obvious in the first viewport
- content hierarchy reads correctly without color or imagery
- sections support a clean scan path
- the composition works with minimal card usage
- high-fidelity implementation can proceed without structural ambiguity