u/Emergency-Stretch938

Hi everyone,

I’m working on a pipeline to automate Figma to Flutter code generation. My goal is to hit 90-95% accuracy (specifically layout precision, theme consistency, and widget structure), but I’m currently plateauing at around 70-80%.

I’ve explored and tested several repos and MCPs (Model Context Protocol), including:

• arinspunk/claude-talk-to-figma-mcp
• vkhanhqui/figma-mcp-go
• The "Figma Implement Design" skills from OpenAI and Xiaoland.

I even built a custom skill combining the logic from Xiaoland and OpenAI, but the output still requires significant manual cleanup—especially with complex Auto Layouts and nested components.

The issues I'm seeing:

1. Context Loss: The LLM sometimes misses the relationship between deep-nested frames.
2. Responsiveness: It struggles to translate Figma constraints into the correct Flexible/Expanded or LayoutBuilder logic.
3. Styling: Hardcoded values instead of referencing a ThemeData or design tokens.

My Questions:

• Has anyone successfully integrated Figma Code Connect or Design Tokens into their Flutter workflow to boost accuracy?
• Are there specific "system prompts" or pre-processing steps (like flattening the Figma JSON) that helped you get closer to 95%?
• Is there a better way to map Figma's Auto Layout properties directly to Flutter's Flex properties without the LLM hallucinating the spacing?

I'd love to hear about any best practices or libraries you're using to bridge this gap. Thanks!