Figma To Webflow Workflow

Figma → Claude → Webflow — Implementation Playbook

A practical workflow reference for implementing Webflow pages from Figma designs with high visual fidelity, using **Claude** as the builder — connected live to Figma and Webflow through their MCP integrations.

**What this repository is:** the complete documentation, prompt library, downloadable Claude skills, and templates for a workflow used in production on a real Webflow template project. It documents the actual process — including its constraints, hard tool limits, and failure modes — not an idealized version.

**Who it's for:** experienced Figma/Webflow users who want to reproduce or adapt AI-assisted page implementation without sacrificing design-system consistency, responsiveness, or maintainability. It assumes fluency with Webflow, Figma, and general development workflow; it does not assume prior experience with Claude, skills, or MCPs (setup is covered in [01](01-prerequisites.md)).

**How the pieces fit:** *project documentation* (a handoff + architecture record) gives Claude the project's current state; *skills* give it the project's conventions and accumulated lessons; the *Figma MCP* provides exact design geometry instead of screenshot guesswork; the *Webflow MCP* is where building happens; *visual validation* closes the loop by measuring the published result against the design's numbers. Each has a dedicated section below.

The workflow

PREPARE (once per project)
 1. Prepare the design system and handoff in Figma          → 02
 2. Prepare the Webflow project: variables, naming, base classes → 02
 3. Install the skills; write your project-context docs      → 01, 04
 4. Connect and validate the Figma + Webflow MCPs            → 01

IMPLEMENT (every page)
 5. Analyze the existing project before touching anything    → 03
 6. Analyze the Figma design — numbers first                 → 03
 7. Map the design onto existing project patterns            → 03
 8. Build with validated patterns; ask on re