A prototype in Claude Design isn't a mockup with Figma-style hotspots, it's actual HTML that responds to clicks, renders hover states, and flows between pages. This lesson is the end-to-end: from prompt to exportable clickable prototype.
The prototype-specific prompt
Prototypes have state, flow, and interaction. Your prompt should include the normal four parts (goal, layout, content, audience) plus two extras: flow and interaction.
Goal
'A settings page prototype for a SaaS product.'
Layout
Sidebar nav on the left, content area on the right.
Content
Sections for Profile, Notifications, Billing, Team. Three items per section.
Audience
SMB customers, not power users.
Flow
Clicking a sidebar item swaps the content area. Billing changes route to a confirmation step before saving.
Interaction
Hover states on all buttons, toggles animate smoothly, save button shows a loading spinner for 1 second before a success toast.
Validating the prototype
- Click through every flow you specified, does each one actually work?
- Test with real content, not the default. Paste your actual copy and see if layouts still hold.
- Try the prototype on a mobile viewport. Claude usually gets desktop right but mobile needs inline comments.
- Share a view-only link with a PM or researcher before export.
Sharing before export
Claude Design supports organization-scoped view-only, comment, and edit links. Share the view-only link for approval conversations; avoid exporting until feedback is in. Export last.
Export as standalone HTML (see Lesson 12) and host on Vercel or Netlify. Testers get a real URL that behaves like production. This is the biggest single unlock for anyone doing research without engineering bandwidth.
You shipped an interactive prototype
- Wrote a prompt with flow and interaction
- Validated all flows
- Shared a link before exporting
Next: same engine, very different output, pitch decks.