Build Your First Flow with Claude Code
Turn a design into a working UI prototype using Claude Code. No frontend experience required. Just a Figma file, a description, and a terminal.
The situation
You have a finished Figma screen and you want to see it work in a browser. Not a static prototype. Actual interactive code. But you have never opened a terminal and do not know where to start.
You'll build a working React component from a plain English description of your design, with validation and loading states, without editing a single line of code yourself.
What you walk away with
A working React component scaffolded from a plain English description of your Figma design
Validation, interaction states, and loading behaviour added through prompts, not code edits
A prototype you can hand to a developer as a working starting point, not a static file
Describe your design in plain text
Before touching any code, describe the screen you want to build. Be specific: layout, components, interactions, states. The more precise your description, the less back-and-forth you need. Write this description in a file called DESIGN.md in your project root.
# DESIGN.md example
## Screen: bKash Send Money
Layout: single-column, mobile (375px). White background.
Header
- Back arrow (left), "Send Money" title (center), no right action
Form
- Amount field: large number input, BDT label on right, placeholder "0"
- Phone field: tel input, label "bKash Number", placeholder "01XXXXXXXXX"
- Inline error: appears below each field if invalid, red #D32F2F
CTA
- "Send Money" button, full width, primary pink #E2136E
- Disabled until both fields pass validation
- Loading state: spinner replaces label during API call
States: default, field-error, loading, successScaffold one component at a time
Do not ask Claude to build the whole screen in one go. Start with the form fields, then add validation, then the button state, then the loading state. Small requests produce clean, reviewable output. Large requests produce code you cannot reason about.
Build a mobile checkout step indicator. Three steps: Cart, Payment, Confirm.
Show active step highlighted, completed steps with a checkmark,
upcoming steps dimmed. No framework preferences yet.Add validation, loading states, and iterate
Now layer in behaviour. Ask Claude to add validation first, test it in the browser, then ask for the loading state. Each iteration should be small enough that you can manually verify it worked before moving on. You do not need to understand the code. Read it for structure: does it match what you described? Ask Claude to explain any part you want to verify.
The spacing on the active step indicator is too tight on mobile.
Increase the padding and make the checkmark icon 4px larger.Common mistakes
Four failure modes when building your first flow.
- Asking Claude to build the whole screen at once. Large requests produce large, unreadable output. Break the build into: shell first, then validation, then interaction states. Each step should produce something you can open in a browser and verify.
- Not writing DESIGN.md before starting. Without a written description, Claude has to infer your intent from the prompts in real time. Every ambiguity in your prompts costs a correction round. Write the description first; it takes 10 minutes and saves 30.
- Editing the code directly instead of prompting changes. If you open the generated file and edit it by hand, you break the feedback loop. Claude does not know what you changed, so the next prompt may undo your edit. Describe the change in plain English and let Claude make it.
- Treating the prototype as production code. The code Claude generates from a design description is a working prototype, not production-ready. Before shipping, ask Claude to add TypeScript types, replace placeholder API calls with real ones, and handle edge cases the prototype skips.
What's next?
Get started with Claude DesignNew guides, when they ship
One email, roughly weekly. CLAUDE.md templates, workflows I actually use, and the cut-for-length stuff that does not make the public guides. One-click unsubscribe.
Or follow on Substack