Step01
Sketch UI on Index Cards
Draw one state per index card at roughly phone proportions. Number the cards, label inputs and tap targets, show transitions, and include the empty, loading, error, and completion states needed for the task.
BeginnerDesign
How to Rapidly Prototype Mobile UIs with Index Cards and GPT-4 Vision
Use index cards to explore a mobile flow anywhere, then give the photographed sequence enough product and platform context for an image model to refine it before rebuilding the result with real Figma components.
Source episode · 28:13
How I AI: Terry Lin's Vibe Coding Workflow for Building an Apple Watch Fitness Appwith Claire Vo
Terry sketches mobile screens on index cards, photographs them for GPT-4 to refine, then moves the result through UX Pilot into Figma and applies Apple UI components.
Before you start
What you need
- One mobile user task and its entry and completion states
- Index cards, a dark pen, and a phone camera
- A numbered screen sequence with tap targets and transitions
- Platform UI guidance, brand tokens, content, and accessibility constraints
- GPT-4 image analysis plus a tool that can produce editable Figma output
What you’ll make
An editable Figma prototype that preserves the tested paper flow, uses recognizable platform components, and includes the key empty, error, loading, and completion states.
Tools used
- FigmaVisitFigma
Collaborative design tool
Step by step
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
3 steps
Step02
Upscale the Sketch with GPT-4 Vision
Photograph the cards clearly and give GPT-4 the user task, numbered sequence, platform, brand direction, content, and constraints. Ask it to describe ambiguities before producing a refined visual direction.
Example prompt
These numbered index cards show a mobile flow for [user task]. First identify ambiguous controls, missing transitions, and states. Then propose a refined [iOS or Android] layout using [brand and platform guidance], realistic synthetic content, accessible type and controls, and the same task sequence. Do not add features outside the cards.
Use even light, keep every card square to the camera, and upload enough resolution for handwritten labels and arrows to remain legible.
Step03
Convert Image to Figma Components
Use the refined direction as reference in UX Pilot or Figma. Replace generated pixels with real platform components, auto layout, tokens, variants, and editable text, then connect the prototype and test it at the target device size.
What good looks like
- A reviewer can follow the numbered paper flow without verbal explanation.
- The generated direction preserves the user task instead of decorating a vague sketch.
- The Figma file uses editable components, text, constraints, and interaction links rather than a flattened image.
- Tap targets, type, contrast, safe areas, and narrow-screen behavior meet the project requirements.
Build your next product with ChatPRD
Turn an idea into a PRD, user stories, and a plan.
After the steps
Runbook notes
How to recover when the loop fails and where human judgment helps.
Recover
If it goes sideways
- The model guesses at unlabeled controls or missing transitions
- Number screens, label tap targets and data, draw arrows, and provide the task plus expected state change.
- A low-fidelity sketch produces generic or messy high-fidelity output
- Add platform references, component names, brand tokens, real content, and a layout description before regenerating.
- The conversion yields a screenshot rather than editable Figma components
- Rebuild with the target UI kit, auto layout, text layers, variants, and prototype links, using the image only as reference.
- The visual polish hides small controls, poor contrast, or broken safe areas
- Apply accessibility and platform checks in Figma, then test the flow at the target device size.
Keep building
Related workflows
advancedPersonalClaude
Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance
Design a weekly meta-workflow that analyzes your interactions with your AI assistant to make it smarter. This system learns your writing style from edits, suggests new automations for repetitive tasks, and helps you filter valuable AI techniques from hype.
Open
intermediateProductClaudeGranola
Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon
Create a daily AI workflow that summarizes yesterday's meetings, identifies urgent tasks, and proactively learns internal company terms it doesn't understand. This keeps your AI assistant's knowledge current and highly relevant to your work.
Open
intermediateProductClaudeNotion+1
Automate Your Weekly Planning with an AI-Powered PM Assistant
Build a recurring AI task that automatically gathers updates from your calendar, Slack, and notes to suggest weekly priorities and prepare you for upcoming meetings. Start every Monday with a clear, comprehensive plan without the manual effort.
Open
Start shipping
better products.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start
No credit card
SOC 2 certified
Enterprise ready