From Figma to live website · The complete guide to connecting Figma to Claude Code.

Imagine the old workflow: a designer builds screens in Figma, sends them to a developer, the developer writes code, you go back and forth with feedback, the developer fixes things, more feedback, a pixel here, a color there. Weeks of ping-pong and tens of thousands of shekels for a single website. The world has moved on. By 2026, Claude can read directly from a Figma file. Design changes from a static image into an instruction that AI executes. You remain designers. You do not need to understand code. You are not dependent on a developer. Claude is your third party · working 24/7 without making you feel uncomfortable. This guide is a summary of session 19 of the AI Master club with Avivit Blumstein. We will see how to connect Figma to Claude Code via MCP, which custom agents make the process professional, what ironclad design rules in Figma cause Claude to output accurate code, and how to deploy the result to Vercel with your own domain.

What you will have by the end of the guide

• A live MCP connection between Claude Code and your Figma account · Claude reads files directly, does not guess
• An API Token configured securely · Not exposed in chat, stored in .env
• Custom agents · Copywriter, Critic, Developer, Launcher · A complete design office without salaries
• Ironclad rules for Figma design that cause Claude to translate 1:1 · Auto Layout, Variables, correct frames
• A two-way sync process · Changes in Figma update in code, and vice versa, via the Design Sync agent
• A live website in the air · Localhost → GitHub → Vercel → Your own domain

Why this matters · The gap between designer and developer is closing

Step 1 · 3 basic installations before starting

Paid Figma account

Professional and above · Free does not allow MCP

Figma's free account does not allow MCP connection. You need at least a Professional subscription. If you just want to try it out · you can start with a trial period. If you are already working with Figma · check in the settings that you have the right account type.

Tip for agents: If your company account is Professional · ask the admin to add you. There is no need to purchase a separate personal subscription.

Node.js

The engine running everything under the hood

Node.js is the JavaScript runtime environment. Think of it as a translator · it takes the code Claude writes, runs it directly on your computer (not the browser), and allows running a site on localhost before going live. Installation takes two minutes, is free, and needs to be done once.

Tip for agents: Choose the LTS version (on the left) · more stable. After installation · open a terminal and type `node -v`. If you see a version number · it works.

Claude Code Desktop

The convenient and powerful approach · not a browser

Do not work in Claude in the browser. You need the Claude Code desktop app. Only this version can access folders on your computer, connect to MCP, and run code locally. The web version is good for automations with Gmail or Drive · but not for development.

Tip for agents: After installation · log into a Claude Pro account (20 dollars/month) or Max (100 dollars/month). The workshop and existing guides work on Pro.

💡 Claude Code vs. Claude Cowork vs. Claude Design · All are based on the same engine (Opus / Sonnet). Cowork is a stripped-down and nice version. Claude Design is a pretty online interface but expensive (separate tokens, can run up to 300 dollars). Claude Code does all the capabilities of all three · and has full access to the desktop and Figma via MCP. Once you get used to working with it · you do not go back.

Step 2 · Wait, what is Figma?

🧰 Don't know how to use Figma? No stress. At the end of the guide there is a QR code to Avivit's designer community · 'Lev Portfolio'. But even without knowing how to design · you can enter the Figma Community, download a ready-made template (Portfolio, Dashboard, Landing Page), and connect it directly to Claude.

Step 3 · Creating an API Token in Figma (5 minutes)

How to generate the token · Step by step

• Go to Figma (browser or desktop), click on your avatar · Settings
• Security tab · Scroll down to Personal Access Tokens
• Generate new token · Give a meaningful name (for example 'Claude MCP')
• Expiration · Choose 90 days (the maximum available). Claude will alert you when renewal is needed
• Scopes (permissions) · Approve these: File content (Read), File metadata, Library content (Read), Library assets (Read), Variables (Read), Design system (Read)
• Do not approve these: File comments (Write), Webhooks · Better not to give Claude write permissions to documents shared with others
• Click Generate token · You get a long string of letters and numbers. Copy it to a safe place · You will not see it again

Want to master Claude Code from scratch?

This guide gave you the basics. In the full Claude Code workshop we build together step by step: installation, CLAUDE.md, skills, agents, and a live website. 4 recorded sessions, lifetime access.

⚠️ Information security warning · This token is a blank check. Do not throw it into Claude's chat! Do not save it in a regular file! Do not send it in an email! The correct way: Put it only in the Terminal (once) or in a .env file that Claude creates for you. If the token leaked · Go immediately to Settings → Security → Revoke.

Step 4 · Connecting MCP · The bridge between Claude and Figma

The MCP command to enter in the terminal (example · you will get your version from Figma)

claude mcp add figma-developer-mcp -- npx -y figma-developer-mcp --figma-api-key=YOUR_TOKEN_HERE --stdio

How to run the command without exposing the token

• In Claude Desktop · Open the internal terminal (Cmd+J on Mac, Ctrl+J on Windows)
• Copy the command from Figma. In YOUR_TOKEN_HERE · Replace with the token you created in step 3
• Paste in the terminal. Press Enter
• Wait for the line to appear: 'Installed', 'Registered', 'Connected'
• If something fails · Take a screenshot of the message and send it in chat to Claude. He will know how to fix it
• Check that it works · Ask Claude: 'Explain the status of the MCP to me'. If he knows how to list all the tools of figma-developer-mcp · it works

🔒 The difference between Connector and MCP · Claude has ready-made connectors for Figma (via Customize). They give basic access. The official MCP from Figma gives much wider access: full reading of the file structure, variables, and components. If you are serious · MCP. If you are just looking · a Connector is enough.

Step 5 · First conversion · From Figma file to live website

End-to-end process

• Figma · Open the file you want to convert. Switch to Dev Mode. Click Share → Copy Link
• Claude · Create a new project folder (for example 'portfolio'), open a new session
• Paste the Figma link and explain in Hebrew: 'I want to turn this beautiful thing into a live website. Work with the Figma Implement Design agent'
• Claude reads the file, scans the layers, builds the code tree · React/HTML/CSS
• Opens Localhost · Gives you a URL (usually http://localhost:3000) and opens a preview on the side
• You see the live website. Responsive on mobile, with hover states, with all the nuances. Within 20–30 minutes

🎯 Without an agent · Claude will build a website, but it will be generic. Professional agents (next step in the guide) are the difference between 'a website that looks like AI built it' and 'a website that looks like a professional designer designed it'.

Step 6 · The 4 agents that make the process professional

Copywriter

Writes in your voice · not AI's voice

An agent that knows your tone · how you write headlines, what words you avoid, what a typical CTA looks like on your site. Dynamic · improves every session. You can create a different version for each project · a version for Personal Brand and a version for a company.

Agent tip: This agent updates after every session. If you finished a project where you liked the microcopy, tell Claude to save this tone in the Copywriter Agent.

The full Claude Code workshop brings everything together in one place: installation, skills, agents, and website building. 4 recorded sessions with lifetime access.

Critic

Automatic design review before going live

After the site is ready, this agent reviews it and checks: visual hierarchy, responsiveness, accessibility, design system alignment, and WCAG contrast. Instead of you checking manually, Claude tells you exactly what to fix and where.

Developer (Figma Implement Design)

Converts design to code, the brain of the process

The main agent. Receives a Figma link, scans the file, and builds the code component by component, with precise CSS matching the design 1:1. Supports responsive automation if the file was built with proper Auto Layout.

Agent tip: Avivit will give this agent as a gift to the community. It will be sent via the club meeting summary.

Launcher

Deploys code from Localhost to live

Finished working on Local? This agent pushes the code to GitHub, automatically connects to Vercel, deploys live, and returns a public URL. All without you touching DevOps. Instead of 5 manual actions, a single sentence.

🤖 Bonus · Design Sync. A fifth agent that Avivit mentions. After the site is live, and you change something in Figma (a client asked to update a color), this agent syncs the change into the code. Bi-directional. Figma does not die after the initial conversion, it continues to live alongside the code.

Step 7 · 5 iron rules for Figma design

The rules, no compromises

• **Auto Layout everywhere** · Instead of positioning elements manually, use Auto Layout. This is how Claude knows to create automatic responsiveness. On mobile, elements will jump one below the other without breaking the design
• **Logical layer names** · No 'Frame 1', no 'Group 2'. A button is called 'Button-Primary', a hero area is called 'Section-Hero'. Claude gets confused by generic names and generates confusing code names
• **Variables for colors, fonts, spacing** · Instead of writing #FF6B00 everywhere, create a variable 'color/primary' and use it. Claude translates this to CSS Variables, making the site globally editable in one line
• **Frame, not Group** · Always use Frames (press F). Group is an old structure and is not read well by Claude. Frame gives all the power: flexibility, Auto Layout, responsiveness
• **Icons as SVG or Component** · If it is an icon, either import it as an SVG (a vector format that does not pixelate) or create a Component from it. An icon PNG means Claude will build an image rather than clean code, and the site will come out heavier and less flexible

📚 Not built with Auto Layout? Not to worry. There is a skill called 'Strap Grid Builder' that knows how to translate designs not built with Auto Layout into good responsiveness. A good starting point, but the source is preferred.

Step 8 · Don't have a ready design? Figma Community

Figma Community

Thousands of free design templates available immediately

A huge template library: UI Kits, Dashboards, Mobile Apps, Landing Pages, Icons, Illustrations. Most of them are free. Click a template · 'Open in Figma' · the template is copied to your account, you edit it, and from there to Claude.

Agent tip: In search, filter by 'Free'. It is worth reviewing community ratings · a template with 50K downloads is likely to be well-structured too.

Want to master Claude Code from scratch?

This guide gave you the basics. In the full Claude Code workshop, we build together step by step: installation, CLAUDE.md, skills, agents, and a live website in the air. 4 recorded sessions, lifetime access.

Step 9 · From Localhost to live · GitHub + Vercel

Commands for Claude · Copy and paste

• 'Create a private repo for me on GitHub and push the code'
• 'Connect this repo to Vercel and deploy to Production'
• 'I have a domain avivit-portfolio.com that I bought on Cloudflare. Connect it to the project and update the DNS records'
• 'Add Google Analytics 4 to the site and connect my Property ID'

💰 Combine 3 tools together · GitHub is free, Vercel is free (up to 100GB traffic per month), Figma Professional is the only charge. If you have the workshop and the club, the ROI from the first website repays the expense 50 times over.

Frequently asked questions from the session

Not anytime soon. Claude Design is a design interface on the Claude website (not desktop). It is pretty, fast, and knows how to generate basic designs, but it is very limited. Its tokens are separate from Claude Code, expensive, and run out quickly. Avivit reached $300 on one account. Anyone working with Claude Code on the desktop can achieve the same results without extra cost. Figma continues to be the professional standard for complex design.

Yes, but with one difference: instead of you creating the design in Figma, you go into Figma Community, download a ready template (portfolio, dashboard, landing page), edit the texts and images, and connect to Claude. Avivit also suggests asking Claude 'Let's build a design system together'. You give it images, moodboard, ideas, and Claude generates the basis.

A skill is a defined capability: 'video editing', 'writing in Hebrew', 'accessibility testing'. Claude activates it when relevant. An agent (Sub-Agent) is an entity with a whole brain: it knows how to perform a series of actions, make decisions, and activate other skills. In Figma + Code, a 'Developer' agent can activate 'CSS Optimization', 'Accessibility', and 'OKLCH Colors' skills simultaneously. Beginners use skills. Advanced users build agents.

Avivit tested without agents too, and the results were less good. Agents provide superpowers: each is trained for a specific task, knows how you want it to think, and works in coordination with the others. Worth the initial investment of 2 to 3 hours to create an agent, after which it works for you forever.

Step by step: 1) Make sure your Figma account is paid. 2) Make sure Node.js is installed: in the terminal type `node -v` and you will get a version number. 3) Make sure the token is still valid: if 90 days have passed, generate a new one. 4) Screenshot the terminal error and send it to the Claude chat. It knows how to identify 95% of issues.

No. Two ways: 1) Edit the design directly in Figma, and run the Design Sync agent: Claude syncs the change to the code. 2) Simply tell Claude 'Change the main button to blue' without touching Figma: it will edit the code directly. The first way is more professional, as Figma and code remain synchronized.

Cursor and VS Code are IDEs, classic development environments intended for developers. They require basic technical knowledge. Claude Code Desktop was built for non-developer users: an intuitive interface, less dependency on the terminal, and a cleaner experience. All of Cursor's capabilities exist in Claude as well, only the interface is more accessible.

You can build straight in Claude and get a website. But Figma gives you full visual control before writing a line of code: you see the sections, the hierarchy, the colors, and can update in an instant. When transferring this to Claude, the result is many times more precise. In addition, Figma allows you to share the design with a client for approval before investing in development. For small projects: straight to Claude. For professional projects: through Figma.

The connector (Customize → Connectors → Figma) provides basic access: Claude can read parts of the file and do minor manipulations. It does not go deep into the file, does not see all Variables, does not read the full component hierarchy, and cannot write and update. The official Figma MCP provides full access: deep reading, access to the Design System, and the ability to execute actions. If you are serious about the process: MCP. If it is just a one-time experiment: the connector is enough.

The terminal does not need to stay open: Claude Desktop manages it in the background after the initial connection. To keep Claude from wandering into wild imagination, use Plan Mode (button at the bottom of Claude). In it, he presents a work plan before running to build, and you approve. Another trick: give him clear instructions with precise values ('right column, width 320px, background #FFFFFF') instead of open wording ('nice title'). The more precise the prompt, the more precise the result.

Depends on the agent type. A generic Developer agent that works with any Figma project is worth sharing across projects. A Copywriter agent is better kept separate per project (because tone changes between a personal project and a project for a client). Avivit's method: create a base agent, and copy it to each project folder with minor updates suited to the specific project.

Claude loads only the agents relevant to the specific request, not all of them. Inactive agents do not consume tokens. However, if you have 30 agents in a folder, Claude might get confused about which one to choose. Avivit recommends keeping up to 5 to 7 agents in each project folder, and the rest in separate folders.

Claude knows how to handle both, but you need to ask. For SEO, ask to add meta tags according to Google codes, sitemap.xml, robots.txt, and structured data. For security, ask to add HTTPS via Vercel, ensure there are no secrets in the code, and set CSP headers. Recommended skills to install include Israeli Privacy Shield for privacy and Israeli Accessibility Compliance for accessibility. We mentioned both in the Vibe Coding guide.

It depends on the setting. When creating a new repo on GitHub, you can choose Public (open to everyone) or Private (only for you and people you invite). The default on a free account might be Public. When talking to Claude, always ask it to create a private repo or a Private repository. If it accidentally turns out Public, go to GitHub, Settings, General, Danger Zone, and Change visibility.

There are three options. First, tell Claude to update the text in the Hero section to X, and it updates the code and redeploys to Vercel, which is fast for targeted edits. Second, save the content in a separate JSON or MD file inside the project, allowing simple editing without touching the code itself. Third, connect an external CMS like Notion, Airtable, or Sanity where you update content, and Claude builds an infrastructure that pulls from it automatically. The first is the simplest, and the third is the most professional.

Basically yes. Lovable, Bolt, and Replit Agent are all Vibe Coding tools that generate websites from descriptions. The difference is that they are closed tools, you are limited to what they allow, and they have separate subscriptions. Claude Code works on websites, automations, agents, and video editing with a single subscription. In addition, Claude gives you access to the code itself, you are the owner, and you can move to any platform. Lovable involves vendor lock-in.

Figma is the professional standard for designing digital products with 16 years on the market, a huge ecosystem, and an official MCP for Claude. Stitch AI is a newer tool that generates designs from text, which is nice to try out but less professional for complex projects. If you build once a decade, Stitch will suffice. If you build products seriously, use Figma.

There are three ways. First, Claude builds it for you when you upload a mood board, websites you liked, and images representing the brand, and ask it to build a design system, prompting it to create a palette, fonts, spacing, and hierarchy. Second, buy a ready-made template in the Figma Community and edit the colors and fonts to your taste. Third, use the UI/UX Pro Max or Web Design Guidelines skill, which includes 50 styles and 161 ready-made color palettes. Avivit previously presented a full session on building a design system, which was uploaded to the club system.

Yes. Examples from the community include Claude creating the website and sending an update to Slack, a change in Figma prompting Claude to sync and push to GitHub while Vercel deploys automatically, or Claude creating the website, uploading screenshots to Drive, and sending an email to the client with the link. All of this is done through Make.com or additional MCPs that can be added to Claude.

🚀 Next step · The full Claude Code workshop

FAQ

Will Claude Design replace Figma?

Not anytime soon. Claude Design is a design interface on the Claude website, not the desktop app. It is pretty, fast, and knows how to generate basic designs, but it is very limited. Its tokens are separate from Claude Code, expensive, and run out quickly. Avivit reached 300 dollars on one account. Anyone working with Claude Code on the desktop can achieve the same results without extra cost. Figma continues to be the professional standard for complex design.

I am not a designer. Is this guide relevant to me?

Yes, but with one difference. Instead of you creating the design in Figma, you go to the Figma Community, download a ready-made template such as a portfolio, dashboard, or landing page, edit the texts and images, and connect it to Claude. Avivit also suggests asking Claude to build a design system together by providing images, a mood board, and ideas so Claude can generate the base.

What is the difference between a sub-agent and a skill?

A skill is a defined capability such as video editing, writing in Hebrew, or accessibility testing, which Claude activates when relevant. A sub-agent is an entity with a whole brain that knows how to perform a series of actions, make decisions, and activate other skills. In Figma plus Code, a Developer agent can activate CSS Optimization, Accessibility, and OKLCH Colors skills simultaneously. Beginners use skills, while advanced users build agents.

Do you have to build agents to get professional results?

Avivit tested without agents as well, and the results were less good. Agents provide superpowers because each one is trained for a specific task, knows how you want it to think, and works in coordination with the others. It is worth the initial investment of 2 to 3 hours to create an agent, after which it works for you forever.

My connection failed. What should I do?

Step by step: first, make sure your Figma account is paid. Second, make sure Node.js is installed by typing node -v in the terminal to get a version number. Third, make sure the token is still valid, and if 90 days have passed, generate a new one. Fourth, take a screenshot of the terminal error and send it to the Claude chat, as it knows how to identify 95 percent of issues.

What happens when I have a live website and a client asks for changes. Do we start from scratch every time?

No. There are two ways. First, edit the design directly in Figma and activate the Design Sync agent so Claude syncs the change to the code. Second, simply tell Claude to change the main button to blue without touching Figma, and it will edit the code directly. The first way is more professional because Figma and the code stay synchronized.

What is the difference between this connection and Cursor or VS Code?

Cursor and VS Code are IDEs, which are classic development environments designed for developers that require basic technical knowledge. Claude Code Desktop was built for non-developer users with an intuitive interface, less dependency on the terminal, and a cleaner experience. All the capabilities of Cursor exist in Claude, just with a more accessible interface.

Why build in Figma instead of straight in Claude?

You can build straight in Claude and get a website. However, Figma gives you full visual control before writing a single line of code, allowing you to see the sections, hierarchy, and colors, and update them instantly. When you transfer it to Claude, the result is many times more accurate. In addition, Figma allows you to share the design with a client for approval before investing in development. For small projects, go straight to Claude. For professional projects, go through Figma.

Why isn't Claude's regular Figma connector enough?

The connector found under Customize, Connectors, and Figma provides basic access where Claude can read parts of the file and make minor manipulations. It does not go deep into the file, does not see all variables, does not read the full component hierarchy, and cannot write and update. The official Figma MCP provides full access, deep reading, access to the Design System, and the ability to perform actions. If you are serious about the process, use MCP. If it is just a one-time experiment, the connector is enough.

Does the terminal need to be open all the time? How do you prevent Claude from being too creative?

The terminal does not need to be open because Claude Desktop manages it in the background after the initial connection. To keep Claude from letting its imagination run wild, use Plan Mode via the button at the bottom of Claude, where it presents a work plan before rushing to build and you approve it. Another trick is to give it clear instructions with exact values like right column, width 320px, background #FFFFFF, instead of open phrasing like a nice title. The more precise the prompt, the more precise the result.

Does every project require its own agent, or can one agent be shared across multiple projects?

It depends on the type of agent. A generic Developer agent that works with any Figma project is worth sharing between projects. For a Copywriter agent, it is better to have a separate agent for each project because the tone changes between a personal project and a client project. Avivit's method is to create a base agent and copy it to each project folder with minor updates tailored to the specific project.

If you give Claude all the agents, doesn't it cost more tokens?

Claude loads only the agents relevant to the specific request, not all of them. Inactive agents do not consume tokens. However, if you have 30 agents in a folder, Claude might get confused about which one to choose. Avivit recommends keeping up to 5 to 7 agents in each project folder, and the rest in separate folders.

What about security tests and SEO for a website generated by Claude?

Claude knows how to handle both, but you need to ask. For SEO, ask to add meta tags according to Google codes, sitemap.xml, robots.txt, and structured data. For security, ask to add HTTPS via Vercel, ensure there are no secrets in the code, and set CSP headers. Recommended skills to install include Israeli Privacy Shield for privacy and Israeli Accessibility Compliance for accessibility. We mentioned both in the Vibe Coding guide.

Are my files on GitHub open to everyone?

It depends on the setting. When creating a new repo on GitHub, you can choose Public (open to everyone) or Private (only for you and people you invite). The default on a free account might be Public. When talking to Claude, always ask it to create a private repo or a Private repository. If it accidentally turns out Public, go to GitHub, Settings, General, Danger Zone, and Change visibility.

What happens when you want to update content on a live website when we do not have a content management system?

There are three options. First, tell Claude to update the text in the Hero section to X, and it updates the code and redeploys to Vercel, which is fast for targeted edits. Second, save the content in a separate JSON or MD file inside the project, allowing simple editing without touching the code itself. Third, connect an external CMS like Notion, Airtable, or Sanity where you update content, and Claude builds an infrastructure that pulls from it automatically. The first is the simplest, and the third is the most professional.

Does this replace Lovable / Bolt / Replit?

Basically, yes. Lovable, Bolt, and Replit Agent are all vibe coding tools that generate websites from descriptions. The difference is that they are closed tools, you are limited to what they allow, and they have separate subscriptions. Claude Code works on websites, automations, agents, and video editing, all for one subscription. In addition, Claude gives you access to the code itself, you own it, and you can move to any platform. With Lovable, there is vendor lock-in.

Figma versus Stitch AI, which is better?

Figma is the professional standard for designing digital products, with 16 years in the market, a huge ecosystem, and an official MCP for Claude. Stitch AI is a newer tool that generates designs from text, nice for experimentation, but less professional for complex projects. If you build once a decade, Stitch will suffice. If you build products seriously, use Figma.

We are entrepreneurs with no design background, how do we build a design system?

Three ways. First, Claude builds it for you, you upload a mood board, websites you liked, images representing the brand, and say, build me a design system. It creates a palette, fonts, spacing, and hierarchy. Second, buy a ready-made template in the Figma Community and edit the colors and fonts to your taste. Third, use the UI/UX Pro Max or Web Design Guidelines skill, with 50 styles and 161 ready-made color palettes. Avivit previously presented an entire session on building a design system, which has been uploaded to the club system.

Can this workflow be connected to other automations?

Yes. Examples from the community include Claude creating the website and sending an update to Slack, a change in Figma triggering Claude to sync, push to GitHub, and Vercel deploying automatically, and Claude creating the website, uploading screenshots to Drive, and sending an email to the client with the link. Everything goes through Make.com or through additional MCPs that can be added to Claude.