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

Look at what the client gave us for Pika, a pickleball court chain that needs a mobile app for booking courts: the brief, the logo, the moodboard screens, the Inter font and the Lucide icons. Then copy the original kit into a new project folder and put each client item in the right place, so the workflow is ready to run.

Open Claude in Cowork, add the project folder and type Read Folder. Claude checks all the inputs, saves its notes, renames both plugins for the project and asks two questions about the logo and the font. Answer them to finish reading the brief.

Claude sorts the brief into what is clear, what is missing and what is unclear, picks safe defaults for the unclear parts and proposes the screen frame. You will answer the must-answer questions, resolve two answers that conflict (VND or dollar), review the summary of decisions and approve the step.

Run the market research and see what Claude finds: how the app helps fill courts and keep players coming back, who does what, the five competitors (none with a real rewards system), the common patterns, the gaps you can use and the main metric. Anything not verified is marked as an assumption, and you can add your own documents to update the research.

Claude sorts the users into main, secondary and out of scope, builds three personas with different needs, says clearly what the app is not for, and turns all of it into what it means for the design. Answer the two questions and approve to close the step.

Turn the research into product structure: 44 features (39 for launch), five main tabs (Home, Book, Bookings, Rewards and Profile) and 40 screens. Then define 18 user flows that also cover the problem cases, check that every screen is used in a flow, answer the questions and approve the step.

Claude pulls colors from the logo to find the main and secondary colors, and shows three color options, each in Light and Dark. You pick one (Option A in the demo) and lock the color codes for the product.

Claude reads the screens in your moodboard folder, describes the style in words and suggests search keywords for the key screens. You find reference UIs (Pinterest in the demo), save them in the folder for each keyword group and tell Claude you are done. Claude then locks the layout of each key screen, the icons (Lucide, outline, 2 px) and the font (Inter).

Claude builds five sample screens from the system's own tokens so you can test the style. Review them in Light and Dark, send screenshots and reference images to adjust the style you want, fine-tune until it feels right, then approve. At this step you judge the feeling of the style, not whether the content is right.

Sync the three token files with the colors and style you chose, then update the two Figma plugins so they read the new tokens: 6 effect styles including an inner shadow, 22 text styles and a full Foundation board. Claude checks everything, then you review the tokens and plugins at the design system gate.

Have Claude write the official prompts for the interface. This run gives you three outputs: the prompt and the message for Claude Design, the master spec (the main file with everything the app needs) and the image prompts, a list of 25 images to make first because Claude Design cannot create images while it builds.

Create the 25 product images with Codex: point Codex to the image prompts file and run it. You will see what to do when a session stops with an error (stop it, create a new task, select the folder again or try a higher mode), then tell the workflow the images are done and generate the missing dark logo.

Open Claude Design, attach the master spec, the prompt and the other files, and build the UI for the whole app. Ask it to arrange the screens by flow, add the missing states such as loading and error, fix problems with screenshots or comments, check dark mode, and export the finished UI as HTML back into the workflow.

Check the exported HTML UI against the tokens and plugins. The HTML UI is the reference, so Claude adds anything missing to the tokens. Review the results (all 40 screens, all checks passing), decide what to do about a few missing small states, update the tokens and plugins to match the final UI and approve. The UI is now locked.

Bring the HTML UI into Figma: name the file Pika, use the html.to.design plugin to import the UI and tidy it up. At this point you only have the UI, with no styles or system yet.

Put the tokens and styles into Figma with the two plugins from the system. Load the three token files in order, check the Variables (Light and Dark), then generate the effect styles, the text styles and a Foundation page. Light and Dark modes need a paid Figma plan; on the Free plan you switch the tokens to a one-mode version.

Connect Claude to Figma with the Figma MCP so Claude can work inside your Figma file. Log in to Claude in your browser with the same account as Claude Desktop, install and connect the Claude Chrome extension, connect Figma, then send Claude the link of your Figma file and check that it reads the file correctly. You will also see the auto-approve option and why it is not recommended for workflows you are not sure about.

Before building components, bring the icons used in the HTML UI into Figma and turn them into components. Send Claude the Figma link and tell it clearly what to do and on which page. The result is one Icons page full of components.

Start the component step with an inventory. Claude checks that everything is ready, finds 32 components across the 40 screens and plans to build them in 8 turns, small parts first. Each component is built once, so one change updates all the screens. Answer three questions, each with a default.

Build the first components, turns 1 and 2 of 8: buttons, chips and the booking parts. Working turn by turn makes it easier to control. Check the result in Figma and ask Claude to fix anything that is not right.

Turns 3 and 4 of 8: input, progress and feedback components. Create them, check them and ask Claude to fix what breaks, or do the small important parts by hand if you prefer.

Turns 5 and 6 of 8: list and card components. Same loop as before: let Claude create the components, wait, then take screenshots of the parts that need fixing.

The last two turns, 7 and 8 of 8: hero, navigation and overlay components, which finish all the components for the product. A realistic note on quality: this is a demo, so on a real project you should check every component one by one. This workflow covers more than 80% of the components in the UI.

Swap the new components into the screens. Tell Claude about the backup page you made for comparison, handle conflicts between a token and the UI (keep the approved UI as the standard), fix places that were not swapped by sending a screenshot, and see the whole interface bound to tokens.

Approve the previous step and let Claude add the clickable prototype to the interface. Test it, including dark mode, and fix colors that look off by sending Claude a screenshot. Then try the prototype and wrap up the whole workflow, from a client's brief to a finished design in Figma.