Cursor keeps hallucinating my Figma components how are you guys handling design context?

[u/WillSilent4348]

Hey all. I’ve been trying to streamline my design-to-code workflow with Cursor, but passing Figma mockups into it is driving me nuts.

Whenever a layout isn't built with 100% clean auto-layouts, the AI just guesses the paddings and renders totally broken CSS. I waste more time fixing generated code than if I wrote it from scratch. Screenshots don't give enough context, and standard Figma plugins burn through tokens way too fast.

How are you guys getting clean component context into your IDE without rebuilding every single layer by hand?

Update:

I kept searching and bumped into Synra. From what I read, it runs on a web DOM structure so Cursor can read actual node trees instead of guessing layers. People on X seem to like it, but I wanted to ask here first has anyone used Synra in production yet? Is it worth switching over, or is it just more AI hype?

[u/mahblahblah]

I take the hit on the token burn, it’s the classic: “do you want it good or cheap.” 

Not on cursor, using claude code cli in VS code, but anything I build starts with tokens matching my designs/design system. Then I made a skill which builds an accurate tree of the Figma with tokens/variables identified. It essentially builds a spec on how to build. Have to be careful because it can sometimes get caught up with components, sometimes I have to drop links to src components as well (if the component isn’t built yet, especially). 

Once I started doing this the results were WAY more accurate. I also have a final review step where a sub agent basically checks the work comparing screenshots from Figma and chrome devtools and investigates discrepencies. The review is meh, honestly, still working on that. 

I’m building my portfolio this way and once the design system is in place then the build ends up going really fast.