eumateusvidal

Figma To Webflow Workflow — Design skill for Claude Code

Design community

A practical playbook for implementing Webflow pages from Figma designs with Claude — MCP setup, project preparation, implementation workflow, visual validation, and downloadable skills.

How to install Figma To Webflow Workflow

This entry records only its repository, not the path inside it, so there is no exact command to give. Open eumateusvidal/figma-to-webflow-workflow and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Figma To Webflow Workflow does

A practical playbook for implementing Webflow pages from Figma designs with Claude — MCP setup, project preparation, implementation workflow, visual validation, and downloadable skills.

Alternatives in Design

Planning With Files — Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B 17.4k ★
Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
Brainstorm Experiments New — Design lean pretotypes for new product validation 7.8k ★

README

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