Claude gave us a tidy expense inbox. It had a table, statuses, buttons, and all the other signs of a functioning SaaS product. Then my teammate Katerina looked at one expense that was missing a cost center. The reason it needed attention was easy to miss.
That seemed like a good place to start. We wanted to see what would happen if we built a screen with Claude, refined its design system in Figma, and asked Claude to continue the React prototype using the new design. Could it keep the same product decisions across an inbox, an expense detail view, and a dashboard?
Katerina recorded the full experiment on YouTube. She used a spend management demo for the experiment, with a finance manager and a connected expense review flow.
The first screen looked plausible. The queue still needed work.
Kate started by telling Claude who would use the product: a finance manager reviewing employee expenses. She described the inbox, the information needed to make a decision, and the actions a manager could take. Claude built the first UI in React with reusable pieces.
It was a useful starting point. But the merchant, the review reason, the urgency, and the available action competed for attention. If you're scanning a queue, you want to know why this expense is here before you spend time opening it. “Missing cost center” should be hard to miss. The button can wait its turn.
We kept one expense in mind throughout the rest of the experiment: Alex Morgan submitted a $2,480 Atlas Cloud charge, and the cost center is missing. The manager opens it, checks the receipt and recent spending, then asks Alex for that information. The expense moves from Needs review to Waiting for employee, and the request appears in its activity.
The short task note I would hand an AI coding tool includes:
User: finance manager
Task: review Alex Morgan's $2,480 Atlas Cloud expense
Problem: cost center is missing
Show: receipt, recent spending, reason for review
Action: request the cost center from Alex
After the action: Waiting for employee
Also show: the request in activity and the updated item in the queue
Now there is something to check besides whether the screen looks nice.
We used Figma to define what Claude should repeat
Kate moved the initial UI into Figma and worked through its foundations, components, and larger screen patterns. Then changed the default indigo/purple direction to blue, adjusted the header and branding, and organized the components so we could use them across the product.
The color change is the most obvious part of the video. The more useful part is deciding what a row, a status, and a review action mean in this product. If Waiting for employee appears in both the queue and the expense detail, we want the label and treatment to agree. If a dashboard card points to Needs attention, it should lead somewhere useful. Claude needs those patterns when it builds the next page.
In Figma, we used variables for repeated values and components for repeated UI. Figma's variables guide explains how values can be applied across a design; aliases let one variable reference another. A token named for its role, such as status/waiting, tells a future implementer more than a blue swatch does. Variants help when a component has predictable states.
We also gave Claude patterns for choosing between tables and cards. A review queue needs dense rows you can scan. An expense detail needs room for the receipt, context, and action. Those are different jobs, even when both screens share the same buttons and statuses.
We didn't resolve every UX question in Figma. We wanted to see what Claude would do once it had a stronger design reference.
Then we sent Claude back to the React prototype
After the Figma pass, we connected the design through MCP and told Claude to use the refined system for the next implementation pass. Otherwise, it could happily keep following its first UI. AI tools can be loyal to an old decision long after you've changed your mind.
Figma's MCP server can provide an agent with design context, including components and variables. Code Connect can map Figma components to their code counterparts. Those references help Claude understand what to build. We still inspected the React screen and clicked through the flow.
For this expense, a blue Request information button would be a very small victory if clicking it left the expense in Needs review. The prototype needed to show the request, change the status, and update the activity. The queue then needed to reflect the new state.
There's a straightforward React point here too. Give the expense one status value such as needs_review or waiting_for_employee; don't maintain several independent booleans that can disagree. The React docs on state structure explain why mutually exclusive states help avoid impossible combinations. A real finance product would need persistence and permission rules around this action. The demo tests the screen flow.
The dashboard gave me another useful surprise
Once the expense flow was in place, we asked Claude for a dashboard for the same finance manager. It brought in a Needs attention area, spending against the monthly budget, categories and merchants, notifications, and recent activity. Those pieces made sense for the product we had described.
One choice still bothered me: recent activity had its own white card and looked too prominent. It was getting prime dashboard real estate for telling me what had already happened. We removed that card treatment and put the activity on a quieter gray background. The items needing the manager's decision could take the lead.
That is the part of an AI-generated dashboard we keep checking. The model can assemble all the requested sections. Someone still has to decide what the person should notice first. In this case, a pending expense deserves more attention than a routine activity log.
UITOP's quick check for the next generated page
We would run through the same expense again before asking for five more screens:
- Can I spot the missing cost center from the queue?
- Does the detail view give me enough context to decide what to do?
- When I request information, do I see the new status and an activity entry?
- Does the queue show the updated expense when I return?
- Does Needs attention on the dashboard take me to the right work?
- Did the implementation use the current Figma components and values?
If one of those fails, you have a specific problem to give Claude. “Make the UX better” is a much harder prompt to review.
Questions I've seen developers ask about Figma and AI coding tools
Does my Figma file need auto layout and components before Claude can use it?
Claude can work from a visual reference. A well-structured file gives it more to work with: layout, named components, variants, and variables bound to the elements you care about. Start with one relevant frame and check what appears in code. You still have to describe behavior such as what happens after Request information. A static frame doesn't contain that whole story.
How do I get Claude to use our existing components?
Show it the relevant Figma design and point it to the components in your codebase. Say which existing variants and tokens the screen should use. If you have Code Connect mappings, they can provide a more explicit link. Then inspect what Claude wrote: did it import the existing component, or make a slightly different button that will become everyone's problem next month?
Do I need one huge design.md file?
I prefer a short product context, a place to find the design-system rules, and a task brief for the current flow. Claude should be able to find the role, the current components, and what changes after a click. There's no magic file count. In the video, the finance scenario and the refined Figma system did more work than a long list of generic design adjectives.
Will MCP keep Figma and React in sync for me?
It gives the agent access to Figma context. You still need to ask for the code change and review the rendered screen. I explicitly told Claude that the refined Figma work was the current design reference before it continued the React prototype. MCP doesn't know whether Alex's expense changed status just because the component looks right.
How do you test a coded prototype before putting it in front of users?
Click through a real task. In this demo, I can request Alex's missing cost center and check the status, queue, and activity. That catches broken connections between screens. It doesn't tell me whether finance managers understand the flow; for that, I'd ask people who do the job to try it and watch what happens. The video shows the first kind of check.
How do you keep Claude consistent as it generates more screens?
Give it the current components and a bounded task. Review the new page against existing screens, including states and behavior. A waiting expense should use the same status language in the inbox and detail view. Check the implementation for one-off colors or duplicate components too. Figma's MCP tools can supply design context; the screen still needs your review.
You can watch the full Claude, Figma, and React walkthrough here, including the initial inbox, the design-system pass, the expense request, and the dashboard change. At UITOP, this is the kind of B2B SaaS work we spend time on: what a screen needs to show, what changes when someone takes an action, and whether the next screen still makes sense.
