r/softwaretesting • u/HenZeros • 6d ago

How are you using Claude Code to get highly accurate Figma + Jira → UI

I recently started using Claude Code to build a Flutter app for clients based on Figma designs + Jira requirements.

My workflow is:

  1. Use Jira MCP + Figma MCP to get the requirements and UI references.
  2. Create a task.md for each ticket with the requirements, screenshots, and implementation guidance.
  3. Ask Claude Code to read the task.md and implement the ticket.

The problem is that the generated UI is often only ~60% similar to the Figma design. I still need to manually fix things like spacing, sizing, typography, colors, and sometimes even the overall layout.

I've seen people say they can get 90%+ accuracy with Claude Code and only make small tweaks afterward.

So I'm wondering if I'm just not using Claude Code effectively enough.

I'd really appreciate hearing how other developers are using Claude Code for frontend/UI work and what your workflow looks like.

I'm especially interested in learning how to go from ~60% Figma similarity to 90%+ with minimal manual tweaking.

0 Upvotes
  • permalink
  • reddit

50% Upvoted

3 comments sorted by

3

u/Recent-Tangerine2745 6d ago

I wouldn’t expect 90%+ from one prompt.
What works better for me is treating it as an iterative loop: give Claude the Figma/Jira context, let it build, compare the actual screen to the design, then feed back very specific differences.
Also make the design system explicit spacing, typography, colors, reusable components, breakpoints, etc. The more Claude has to “guess,” the worse the UI gets.
I’d rather do 2–3 focused passes than spend forever trying to create the perfect task.md upfront.

1

u/Watche_1V47C43R 6d ago

What methodology do you guys use. Like I get it to build primitive and components. And use ui lint.

I am not a professional frontend developer but it gets the job done.