Turning a Figma design into a working website is still one of the slowest parts of web development. Measuring spacing one gap at a time, copying colour values line by line, and going through it all again the moment the design changes.
We ran an experiment to see whether connecting an AI agent directly to the Figma file would change that. This article documents the full path: creating a design in Figma Make, connecting Figma MCP to Claude Code, building a Next.js site, verifying it in GitHub Actions, and deploying to Vercel — then changing the design and measuring how much code had to change with it.
What you will be able to do after reading
- Install and connect Figma MCP to Claude Code, and know which plan and seat type actually work.
- Verify that the AI has read the design correctly before letting it write any code.
- Build a Next.js site from a Figma file with automated checks and a production deployment.
- Update the code when the design changes, touching only what actually moved.
- Understand the limitations found in real use, which are not covered in the official documentation.
A few things the experiment turned up
- The result looked identical to the design by eye, yet a closer review found seven spacing values that were wrong
- After changing the design, only three source files needed editing, with no component rewritten
- node-ids are not stable. Regenerating the design once meant correcting references across fourteen files
- Quota depends on both plan and seat type. A View or Collab seat gets six calls per month even on a paid plan
Every step was carried out first-hand. All screenshots come from the machine used for the experiment, as do the measurements reported in the article.
The article is available in both Thai and English.
Read the full article:
Devlycan - Technology & Programming Insights
Devlycan - Technology, programming, AI, lifestyle, and future trends—simple insights for the new digital generation.
devlycan.com
Top comments (0)