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
beginnerPersonalClaude
Create an Automated Workout Tracker with a Simple Claude Voice Note
Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.
Open
advancedOperationsClaude
How to Rebuild Your Gmail Inbox Inside Claude to Manage Email
Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.
Open
intermediateSalesClaude
Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'
Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.
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