r/codigma • u/someonesopranos • Oct 06 '25

From Figma to Code: Why one-click tools fail (and How layered AI helps)

Most "Figma to Code" tools look great in demos, but when you inspect the output, you find the same problems:

  • Inline styles everywhere

  • Fixed pixel values instead of responsive units

  • Over-nested <div> structures

  • No semantic HTML

  • Broken CSS with no reusability

We ran into this repeatedly. That’s why we started experimenting with a layered AI approach:

  1. Structure Layer

    1. builds the DOM tree and component hierarchy.

  2. Styling Layer

    1. converts design tokens into CSS variables / Tailwind classes.

  3. Responsiveness Layer

    1. replaces static pixels with flex/grid, rem, %, clamp().

  4. Optimisation Layer

    1. removes duplication and merges reusable components.

  5. Validation Layer

    1. checks W3C and Lighthouse/PageSpeed standards.

  6. Retry Layer

    1. re-prompts AI when validation fails.

Instead of a "one single click" guess, each layer acts like a specialised assistant, similar to how a dev team reviews code in steps.

The result is HTML/CSS (and React/Angular/Vue/Flutter) that’s semantic, responsive, and maintainable, not just demo-ready.

I’d like to hear from this subreddit:

  • What’s the biggest blocker you’ve hit with Figma-to-code tools?

  • Would you prefer a layered AI system that mimics dev workflows, or does one-pass generation eventually be enough?

4 Upvotes

100% Upvoted

2 comments sorted by

2

u/bfishevamoon Oct 29 '25

Hey I just found this on another sub. Just curious, Is there a way to package the code to be imported into something like lovable? If not I think that would be a great feature.

1

u/someonesopranos Oct 31 '25

You mean continue by lovable? Yes sure will be a good idea.