A designer's field guide
From idea to testable prototype
Use Claude Code and AntiGravity to build real, testable prototypes — without writing code from scratch.
Learn by playing
Desktop: arrow keys to move, space to interact. On a phone, use the on-screen buttons (◀ ▲ ▶ and A); during NPC dialogue the buttons hide so you can read — tap the text box to continue.
Built for prototype-starter
Clone the workspace, then follow this guide step by step.
I put this together based on what my friend needs. It's a starting point - just follow the phases and you'll have something live and testable.
00Pre-flight checklist
- Open the Terminal
Your command centre. Cmd + J (Mac) or Ctrl + ` (Windows), or View → Terminal in your IDE.
- Don't Panic on Red
Copy the error, paste it to the AI, and say "I got this error, help me fix it." You've got this.
- Run Setup First
Follow the install steps in SETUP.md before jumping into the lifecycle below.
01The tools
Two tools, one codebase. Use whichever feels more natural — you can switch freely between them at any time.
Terminal or Extension
Claude Code
Run claude in your terminal for a fast, keyboard-driven experience — or install the Claude Code Extension for a chat-like interface.
- • Reads Figma files directly via MCP
- • Builds features end-to-end autonomously
- • Runs audits, refactors, and polish commands
- • Conversational agents like
/designer
IDE Chat Agent
AntiGravity
Lives in the primary AI Chat panel in your IDE. Uses .agents/workflows/ to execute multi-step instructions from a single prompt.
- • Strong visual processing — image to code
- • Pre-built slash-command workflows
- • Scaffold entire features from Figma mockups
- • Works on the same codebase as Claude Code
Reading Figma Directly via MCP
Claude Code can read design data, layout structures, and typography directly from your live Figma files — no more screenshot exports.
claude mcp add figma npx -y \ @modelcontextprotocol/server-figma \ <YOUR_FIGMA_TOKEN>
- Get a Figma Personal Access Token
- Run the install command in terminal
- Paste Figma URLs directly into Claude
02The lifecycle
💡 Phase 1
Ideation — Pressure-Test the Idea
Before pushing pixels, use Claude Code to pressure-test your ideas. Run /pm to discuss feature scope, prioritisation, and user journeys. Run /user-researcher to validate assumptions and outline a testing plan.
docs/prds/idea.md, then use /setup-project-contextto load it into the AI's long-term memory.🎨 Phase 2
Visual Design — Figma
Take the insights from Phase 1 and build your mockups in Figma. Don't worry about CSS or React yet — just focus on the layout, spacing, and user experience. This is your creative sandbox.
⚙️ Phase 3
Code Prototyping
With the Figma MCP running, point Claude directly at your file and skip the export dance entirely:
@designer and turn this Figma frame into a full React page: figma.com/file/...— use our DESIGN_SYSTEM.md."Claude reads the exact auto-layouts, colour tokens, and typography from Figma and scaffolds your full page instantly. Then run npm run dev and preview at localhost:3000.
public/folder and let Claude know they're there.🔥 Phase 4
Making it Real — Firebase Data
Want to capture user input? Create a Firebase project, enable Firestore and Authentication, grab your config keys, and paste them into a .env.local file (duplicated from .env.example).
/engineerskill. Hook up my Variant A form so it saves submissions directly to Firestore."✨ Phase 5
Experimentation & Refinement
Spin up a Variant B and compare approaches. Once settled, refine using built-in polish workflows:
/audit then /polish on my Variant A page. Fix spacing, accessibility, then /animatekey interactions."/slash-command impeccable_refinementon Variant A."🔐 Phase 5.5
Security & Best Practices
Before pushing to live users, harden your prototype. Claude will review your forms for proper validation, secure database queries, and optimise your React code for Vercel.
/harden and apply /vercel-react-best-practicesto my new pages and components."📦 Phase 5.9
Saving Your Work — Push to GitHub
Vercel needs your code stored on GitHub. If git commands aren't your thing, just ask:
🚀 Phase 6
Testing on Users — Vercel Deployment
Create a free account on Vercel.com, connect your GitHub repo, and import the repository. Add your Firebase environment variables in the Vercel Environment Variables settings, then click Deploy.
Vercel will give you a live URL like my-prototype.vercel.app that auto-updates every time you push code to GitHub.
🔄 Phase 7
The Feedback Loop — Iterating
Deploying isn't the finish line — it's where the real learning starts. Gather user feedback, quotes, and pain points, then let Claude synthesise the messy data:
/user-researcher. Here are notes from 3 user tests on Variant A. Synthesise the top friction points and suggest solutions."With those insights, jump back into Figma to rethink layout, or straight into code to implement the fixes. The loop continues.
03Quick reference
UI Review
/critique components/Button.tsx
Get instant UX and design critique on any component.
Mobile Fix
/adapt components/Navbar.tsx
Make any component responsive and mobile-friendly.
Animation
/animate components/Modal.tsx
Add subtle, purposeful motion to any component.
Design Question
/designer What's the best pattern for a multi-step form?
Ask design system and UX pattern questions directly.
Audit
/audit
Run a full accessibility and spacing audit on your pages.
Polish
/polish
Apply final UX refinements and clean up any rough edges.
Want to collaborate or chat about design?
I'm always happy to connect — whether it's about a project, a role, or just swapping ideas.