Claude AI UI/UX: Complete Workflow from Brief to Figma

A guided tour of the sample project folder — your toolkit: the client brief, assets (logo, mood board, SF Pro fonts), the three W3C token files, the three Figma plugins and the 20-step process flow. Know which folder serves which stage before the real work starts. Download the complete Pika starter kit (brief, assets, tokens, plugins, master spec) from this lecture's resources and follow along on your own machine.

Live in Claude Cowork with the real Pika brief (a pickleball court booking app): let Claude split the brief into what we know, what's missing and what's vague, confirm the assumptions table (AS1–AS7), answer the client-only questions and lock device, frame size and orientation. Rule number one: you read a brief to find the gaps, not to nod along.

Claude digs into Pika's business model, operation flow and shared terminology, scans competitors like Playtomic and CourtReserve, proposes a North Star metric — court hours booked and completed per week — and builds four personas (Min, Lan, Tom, Koa). Everything lands as concrete design implications for the home screen, availability grid, membership and rewards.

Research becomes product structure: the MVP feature list, a 5-tab sitemap (Home · Book · Bookings · Rewards · Profile) exported as a clean tree PDF, the main user flows, 60-minute slots, the 12-hour cancellation policy and the court-credit wallet. The phase closes by handing Claude the mood board to set the visual direction for the UI.

Lock the visual direction before generating anything: navy #0E203A and lime #CAF427 pulled from the logo, a bright sporty style built from tennis, fitness and workout app references, SF Pro for iOS — and a three-way asset strategy separating static, runtime and functional assets AI should never fake (real QR codes, real maps).

Consolidate everything you've built — brief, assumptions, business model, personas, sitemap, flows, content direction and mood board — into one master-spec.md, plus a ready-to-run prompt for Claude Design. One clear source of truth before a single screen is generated.

Open Claude Design, attach just two files — the master spec and the prompt — confirm the details it asks about (like the logo), then submit and watch it generate the first complete hi-fi UI for the whole Pika app.

The review loop: comment on each screen, then switch to the sharper method — screenshot the exact area that's wrong and feed it back to Claude until it's fixed. Finish by exporting the entire polished UI as a single HTML file, ready for the design-system phase.

Start a fresh Cowork task with a context summary so nothing is lost, then have Claude read the exported HTML and sync colors, typography, spacing, radius and shadows into the three W3C token files and three plugins (Import Tokens · Foundation Styles · Check) — following the rules already defined in those files, no random changes.

In Figma: import the three token files into variables (primitive → semantic → component — never skip levels), generate text and effect styles with the Foundation plugin, bring the HTML UI in with html.to.design, split every screen into its own frame by flow, then run Check → Scan Selection → Fix All to match the UI to tokens — cutting roughly 70-80% of the manual work.

Paste your Figma frame link into Cowork and let Claude, through Figma MCP, analyze the UI and extract a component list, build the library with states and variants (test three groups first), merge the button set into one component, swap instances into the screens, and fix broken spacing by adding the missing token.

The finish line: Claude wires the entire clickable prototype in Figma via MCP, then reviews it in Present mode — buttons, tabs, bottom sheets, back actions, dead-end screens — fixes what's broken and reports back. You click through every flow like a real user and package the file for developer handoff. From a rough brief to a working prototype: done. The finished Pika Figma file is attached in this lecture's resources — open it next to your own build and compare every detail.