Step 01
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.
Try this with your AI assistant
Download the skill for this workflow. Version 1.0.1.
Source episode · 28:13How I AI: Terry Lin's Vibe Coding Workflow for Building an Apple Watch Fitness App
with 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
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
3 steps
Step 02
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.
Step 03
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.
Runbook notes
How to recover when the loop fails and where human judgment helps.
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.
Related workflows
intermediateDataMeta Muse
How to Use AI for Hobby Improvement and Data Analysis for Golf & Chess
Connect data from your hobbies (like golf scores or chess games) to an AI agent to get automated analysis, visual dashboards, and actionable coaching insights. Turn raw data into a story that helps you improve.
Open
beginnerPersonalMeta Muse
How to Create a Personalized Shopping Catalog from Your Instagram Saves Using AI
Turn your unstructured Instagram 'Saved' collection into a fun, personalized shopping catalog. This workflow uses an AI agent to organize your saves and present them in a nostalgic, engaging format like the SkyMall magazine.
Open
advancedContentMeta Muse
How to Revive an Old Blog or Digital Archive as a Personal AI Podcast
Resurrect your old digital content, like a forgotten blog from Blogger or Tumblr, by using an AI agent to find, consolidate, and transform it into a daily personal podcast. Reconnect with your past self in a new, listenable format.
Open
Start shipping better products.
Join 250,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start · 14-day Pro trial · SOC 2 Type II
