Open this on your computer
AI Flows are interactive, multi-panel experiences built for a larger screen.
Claude Code for Designers: From Figma to Production Code
A complete guide for designers to use Claude Code without writing code from scratch. Covers one-time setup with Cursor and Figma, then three independent use cases: converting your design system to code, prototyping from screenshots, and transforming Figma designs to live HTML/CSS. Based on Adrien | AI Designer's process for building production-ready apps in hours instead of months.
Environment setup
Install an IDE
claude.ai
Subscribe to Claude
Extension
Install Claude Code extension in Cursor
API Token
Create a Figma personal access token
Figma Sync
Connect Figma to Claude Code
Cursor (recommended) | VS Code | Google IDX
Pro: experimenting | Max: production (multiple agents, unlimited credits)
Three independent workflows — run setup once, then use whichever applies to your project
Dev Mode
Open Dev Mode and select first element
Copy as Prompt
Copy the example prompt for the selected element
Paste Figma prompt → generate HTML/CSS
Preview in browser and compare to Figma
Typography → Colors → Shadows → Buttons — doing all at once breaks the code
Find design inspiration and screenshot it
New Project
Open a new empty folder
Screenshot → HTML
Generate HTML/CSS prototype from screenshot
Live Server
Preview prototype in browser
HTML to Design Plugin
Push prototype to Figma as editable layers
Great for design exploration and client demos — not a full production app
Copy link
Right-click one section → Copy link to selection
Convert Figma section to HTML/CSS
Review section in browser
One Figma link per prompt — sending the full page gives worse results
Recipe
19 nodes · 4 phasesClaude Code for Designers: From Figma to Production Code
A complete guide for designers to use Claude Code without writing code from scratch. Covers one-time setup with Cursor and Figma, then three independent use cases: converting your design system to code, prototyping from screenshots, and transforming Figma designs to live HTML/CSS. Based on Adrien | AI Designer's process for building production-ready apps in hours instead of months.