/wireframe

Rapidly generate interactive wireframes and prototypes from a description. Speed matters more than polish — get something on screen fast, then iterate.

When to use this

• You want to see your idea as a working prototype quickly
• You need to test a user flow before investing in design
• You want placeholder screens to iterate on with stakeholders

How to use it

/wireframe a todo app with projects and tags

Claude generates multiple screens with navigation between them, working form inputs, and basic state management. Placeholder content is used throughout — lorem ipsum and gray blocks for images.

More examples:

• /wireframe login and signup flow — specific screens
• /wireframe iterate on the dashboard — refine existing wireframes
• /wireframe — if a PRD exists, Claude reads it and prototypes from that

What it creates

Pages in src/app/ and wireframe-specific components in src/components/wireframe/. The wireframes use a distinct visual style:

• Dashed borders for placeholder containers
• Gray backgrounds for image placeholders
• Real text hierarchy but placeholder copy
• shadcn/ui components for interactive elements
• Grayscale only — no color until you add it

What to do next

Once your wireframes feel right, run /design to convert them to high-fidelity UI. Or run /ship to deploy the wireframes for early feedback.