Figma to Webflow Using Claude MCP: The 1-Hour Workflow

For years, the manual transition from a Figma design to a live Webflow site has been a tedious bottleneck for designers. With the emergence of Claude MCP (Model Context Protocol) connectors, it is now possible to have AI handle the heavy lifting of building the scaffolding, allowing designers to focus on high-level creative work. [00:22]

In a recent demonstration by Flux Academy, a full responsive website was developed from a Figma file to Webflow in just one hour. Here is the step-by-step guide to this “easy” workflow.

---

Step 1: Connecting the Ecosystem

To get started, you need to authorize Claude to talk to both your design tool and your development platform. [00:43]

1. Authorize Figma: Use the Figma for Claude connector to allow Claude to read your project URL and its layers. [00:56]
2. Authorize Webflow: Connect the Webflow MCP and authorize a specific project. This gives Claude the “hands” to actually build components, sections, and variables within your Webflow site. [01:02]

Step 2: The Initial Prompt

Once connected, give Claude clear instructions on how you want the project built. [01:21]

• Identify the Project: Ask Claude to find your Figma project and your target Webflow site.
• Define the Framework: To ensure clean, professional code, instruct Claude to use a framework like Client-First. This ensures that classes, variables, and structures are organized in a way that is easy for human designers to understand later. [02:19]

Step 3: The 30-Minute Build

Claude will begin creating the structure of the site. During this phase, you simply need to stay present to approve the AI’s requests to continue. [02:35]

• The First Result: You will get a site with correct page wrappers, sections, and color variables. [03:01]
• Manual Asset Step: Currently, the MCP cannot upload images directly into Webflow’s asset panel. Claude will export the assets for you; you must manually drop them into Webflow and then tell Claude, “Images uploaded,” so it can link them. [04:02]

Step 4: Refinement and Quality Control

Like any junior developer, Claude may make mistakes (e.g., using HTML blocks for headings instead of native tags, or missing responsive breakpoints). [04:31]

• Feedback Loop: Provide a list of “notes” for the second round of revisions. This might include repositioning nav links, fixing button padding, or aligning columns. [05:11]
• Responsiveness: Explicitly ask Claude to tackle the tablet and mobile breakpoints. [05:30]

The Result: Scaffolding vs. Creative Work

The goal of this workflow is not for the AI to deliver a “perfect” 100% finished site, but to handle the 85% of repetitive scaffolding work. [04:57]

Once Claude is done, you are left with a functional site in Webflow’s visual interface. You can then use your creative skills to fine-tune spacing, add complex interactions, and set up CMS logic—all without the “hassle” of rebuilding from scratch. [06:42]