Ask HN: Any tips for agentic coding or vibe coding based on a Figma Design?

1 nadis 2 8/8/2025, 7:50:38 PM
I have a detailed Figma design for a website I'd like to build in next.js or remix, and as an experiment wanted to try using agentic and vibe coding tools only to build the site. However, I'm hitting a ton of issues with translating the design to code. Right now I'm using Claude Code (in VSCode) with the Figma MCP and even tried a Figma extension to convert the design to JSON, but am still having a ton of issues. The site is improving, but it's no match for the designs.

Any tips or suggestions from folks who've tried similar approaches?

Comments (2)

Jimmc414 · 5h ago
What sort of issues are you running into?

I would suggest a decomposition approach building specification or requirements documents for components one at a time with multiple passes using whatever output you have from figma as context.

Opus, o3(o5) and gemini pro are good at this. I instructed the model to build a comprehensive specification.md for the components (eg UI, data transform, data export) one at a time and instructed the model to ask me questions where anything is unclear or ambiguous. Once you have the component spec documents, you can go straight into implementation if you feel good about it or have a model create requirements.md (specify must, must not verbiage) -> architecture.md (specify complete architecture document but without any code) -> implementation.md (specify a complete stand alone implementation document for the programmer to use that contains all code and instructions) using the specification documents as context then give it to any frontier model to implement. Add as many screenshots as you have to represent UI components.

This has worked well for me when the documentation I have is insufficent.

nadis · 5h ago
Primarily running into the AI making broader or unexpected changes than intended, and not getting the details to closely match the designs to my satisfaction. In this case, I actually don't have a spec but have a specific Figma design that I want to recreate in code (using Claude Code, ideally, to help build but have been experimenting here).

For instance, yesterday I was trying to change UI, sizing, and spacing but ended up with some improvements and some definite regressions (huge logo asset that was meant to be small and in-line in a top nav).

Really appreciate the advice and specifics on models to try with this, and I probably should be trying to break things down further than I've been and iterate in smaller loops. Thank you again, great feedback!