Ditching Manual Mapping: AST & MCP for High-Fidelity Figma-to-Code
WithBands · reddit · 2026-08-10
The author shares their team's Figma-to-frontend code pipeline, moving away from Figma Code Connect's manual mapping in favor of AST (Abstract Syntax Tree) auto-extraction for component library features.
Workflow Design
- Component Parsing: A custom MCP server exposes a library of 480 components, extracting structural facts like typography and radius directly from the source AST, achieving zero manual annotation.
- In-Loop Verification: A Claude Skill runs verification loops during code generation rather than post-hoc QA. It checks attributes like color and font, combined with browser screenshot diffing, to ensure code matches the mock.
Results & Questions
In a small A/B test (20 runs), this approach outperformed using Figma MCP alone for system consistency. The author asks the community if AST auto-extraction can fully replace manual mapping and how to optimize screenshot diffs for font-rendering noise.
More from coding & agent
- AC2 Platform Enables Post-Training LLMs in Production, Avoiding Train-Test Mismatch — AccBalanced · 2026-08-10
- Won 5th Place in GPU Mode with Coding Agents, No CUDA Background — tokenbender · 2026-08-10
- Vibe Coding Trap: AI Can Patch Bugs Without Actually Fixing Them — Tired40s · 2026-08-10
- ReASearch: Single LLM Agent Outperforms Specialized Optimizers Across ML Workflows — _reachsumit · 2026-08-10
- Sakana AI Summarizes 'AI Scientist' Progress in End-to-End Research Automation — SakanaAILabs · 2026-08-10
- Codex Refuses to Fix Its Own Bugs, Developer Warns Software at Risk — switchplonge · 2026-08-10