claude-design-wireframe

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:

1. What information matters first
2. What the user sees in sequence
3. Where interaction changes the layout
4. 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

1. Reduce the page to 3-7 structural zones
2. Label hierarchy with clear headings, support text, and action areas
3. Explore 2-4 layout directions before settling
4. Prefer type, spacing, rules, and alignment over decorative UI
5. Keep cards sparse; use bands, columns, editorial blocks, timelines, and anchored text groups first
6. Mark interaction states only where they change meaning
7. 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