/figma-to-webflow

name: webflow-mcp:figma-to-webflow
description: >-
  Build a Webflow page, section, component, or full site from a Figma design
  using the Figma MCP and the Webflow MCP (Designer Bridge + Data API). Use
  whenever translating a Figma file/frame into Webflow, building directly in a
  Webflow project, or implementing a design as live Webflow elements/styles
  (not a copy-paste fragment). Triggers: "build this Figma in Webflow",
  "Figma to Webflow", "implement this design in Webflow", a figma.com URL +
  a Webflow site, "recreate this in my Webflow project".

Figma → Webflow

Translate a Figma design into a live Webflow project: real elements, styles, assets, fonts, and (optionally) custom code + interactions.

Instructions

Follow this order exactly. When a step says to read a reference file, read it before doing that work; those files contain the failure modes for that step.

Non-Negotiable Gates

Treat these as build gates, not suggestions. If you cannot satisfy one, stop and explain the tradeoff instead of silently substituting.

• **Bridge gate:** Designer Bridge is the default build mode. If selected, provide the Designer launch link (opens Designer with the MCP Bridge App) and wait for the user to open it with that tab foregrounded before bridge-dependent steps. If the bridge disconnects, keep structural work headless and reconnect before snapshots/canvas inspection.
• **Native style gate:** apply styles with `data_style_tool`, never with the `data_whtml_builder` `css` param or raw `var()` strings. Otherwise styles land in Custom properties instead of native controls. Bind Webflow variables with `variable_as_value`.
• **Visible element gate:** build with real Designer-visible elements and native classes. Do not use embed `<style>` blocks, `::before` / `::after`, or other hidden constructs for normal layout/decorative elements.
• **Class existence gate:** create every class with `data_style_tool create_style` before using it in WHTML/element class lists. Webflow can silently drop class names that do not exist yet.
• **Variables gate:** decide the Webflow variable/design-system strategy before creating styles. Do not hard-code repeated colors/type/spacing/radii unless the user explicitly chooses hard-coded output.
• **Vector gate:** logos, icons, and marks must be inline SVG embeds, not PNG/JPG uploads, unless the user explicitly approves raster fallback.
• **Raster quality gate:** hero/product/mockup images must use a confirmed 2x source where crispness matters.
• **Dashed accent gate:** dashed lines, dividers, grids, accents, and underlines must use `repeating-linear-gradient`, not `border-style:dashed`, unless the user explicitly accepts browser-default dash rhythm.
• **Navbar gate:** custom navbar mobile behavior must be CSS-only, not JavaScript. Use the checkbox/sibling-selector pattern in `references/navbar.md`.
• **Verification gate:** never call a build done until you have verified rendered output. If visual verification is blocked, say what is unverified and ask the user to check it.
• **Capability gate:** do not assert that Webflow or MCP "can't" do something until you have tested the relevant tool path or clearly label it as untested.
• **Publish gate:** do not publish by default. Offer `.webflow.io` publish only after build/review, and only proceed on explicit user confirmation.

Tool Surfaces

| Surface | Examples | Needs Designer open? | |---|---|---| | **Data API** (headless) | `data_whtml_builder`, `data_element_builder`, `data_element_tool`, `data_style_tool`, `data_fonts_tool`, `data_pages_tool`, `data_scripts_tool`, `data_assets_tool`, publish | No | | **Designer Bridge** | `element_snapshot_tool`, `designer_tool` canvas/selection/navigation, `asset_tool upload_image_by_url` | **Yes — Designer tab open AND foregrounded** |

• Call `webflow_guide_tool` once before other Webflow tools. Confirm auth/site with `whoami` + `get_site`.
• Prefer bridge-assisted builds by default for better visual feedback, while still using `data_*` tools for DOM, classes/styles, text, semantic tags, responsive overrides, fonts, scripts, pages, and asset records.
• If Designer is disconnected, continue structural work headlessly with `query_styles`, `get_all_elements`, and `query_elements`; reconnect the bridge for snapshots, canvas inspection, and any still-required bridge-gated image processing fallback.
• If a bridge tool returns `status:false` or "Unable to connect to Webflow Designer," provide the Designer launch link (opens Designer with the MCP Bridge App) and ask the user to open it **and keep that browser tab in the foreground** — it idles/disconnects when backgrounded. Retry before assuming anything broke.

Workflow

1. Gather And Decide

1. Use Figma MCP:

• `get_metadata` for structure.
• `get_design_context` for major frames/sections.
• `get_variable_defs` for colors, type, spacing, radii.
• Read page/canvas background; do not assume white.

2. Use Webflow MCP:

• `webflow_guide_tool` first.
• Confirm target site/page and inspect existing variables/styles.

3. Ask the required setup prompts below. 4. Confirm ambiguous design intent before building. If Figma component instances contain repeated placeholder labels, ask for intended copy instead of copying placeholders.

Required Prompts

Before creating Webflow variables, classes, or CSS, ask these four questions:

• **Build mode:** Designer Bridge during build (default, better visual QA; requires Designer tab open/foregrounded) or headless first (faster, structural checks only until bridge needed).
• **Variables/design system:** read existing variables and create missing ones (default), create a new design system from scratch, use existing variables only, or hard-code with no Webflow variables.
• **Style naming:** FlowKit naming (default; reference `webflow-mcp:flowkit-naming`), existing Webflow design-system naming, or clear semantic kebab-case names.
• **Units:** `px` (default), `re