Figma Workflow — Implement, Review, Optimize in 4 Phases

Implementing a Figma design in a single pass usually leaves visual drift, type errors, duplicated markup and loose Tailwind classes behind. This skill splits the job into phases, each run by its own sub-agent with a focused prompt, and starts the next one only after the previous one has reported back.

Who it is for

People who already have a working environment: an Astro, React or plain-HTML project with a guidelines file (CLAUDE.md or AGENTS.md), and an agent connected to the Figma MCP server. This skill does not build that environment for you.

Results depend on your Figma file

The skill can only build what the design gives it. Without variables it falls back to arbitrary values, and without components the code is not split into components. Before you run it, check the frame with figma-audit (free): it scores layer naming, auto layout, variables and components, and tells you what to fix first.

What it does

• Detects your project type (Astro, React, or plain HTML/TypeScript) and picks the matching prompts and number of phases
• Phase 1, Implementation: reads the design context, tokens and annotations through the Figma MCP server, reuses your existing components and @theme tokens, and builds the page or component following your project's agent guidelines (CLAUDE.md or AGENTS.md)
• Phase 2, Review: compares the implementation with the Figma screenshot of the same node, fixes layout, style and responsive differences, resolves type errors, and runs code-style and accessibility checks
• Phase 3, Optimization (Astro and React): organizes components and design tokens
• Phase 4, Tailwind Review: cleans up Tailwind classes with the free tailwind-review skill when it is installed; skipped, and reported as skipped, when it is not
• Carries Figma's data-node-id attribute onto the matching elements, so a later design change can be traced to the exact element that implements it
• Ends with one combined report covering every phase

How it works

1. You give it a Figma frame or section URL
2. It detects the project type and confirms the target file if you did not name one
3. It runs the phases in order, one sub-agent at a time
4. It summarizes what each phase did and changed

What it is not

It does not set up a project or install dependencies: it works inside a project that already exists and already has a guidelines file. The review phase compares your code with the Figma screenshot and does not require a browser; if your agent can start the dev server, it may also measure the rendered page. For very tall pages, split the design into section frames (Hero, Features, CTA) and run it once per section, otherwise the context gets too large.

Requirements

Runs inside an agent connected to the official Figma MCP server, in a project with a CLAUDE.md (or AGENTS.md) that describes your conventions: the implementation follows it strictly, so it sets the quality of the result. The review and optimization phases run scripts from your package.json, by project type: Astro uses astro check plus your lint/format script, React uses build plus your lint/format script, and plain HTML uses build. The lint/format script can be Biome, ESLint, Prettier or whatever you use (check, lint, format); without one, that step is skipped and the report says so. Node.js is used for project detection. Optional: the free tailwind-review skill for Phase 4.

Other agents

Written for and tested on Claude Code. It is plain Markdown, so you can ask your own agent to adapt it: swap the guidelines file name, the Agent tool used to launch sub-agents, and the skill lookup paths. Other agents have not been tested.

Try it free first

Try it Free on Agensi does not apply to this skill: the free trial runs on Agensi's own servers, which have neither your project files nor a Figma connection. Use the example session above to see what a real run looks like.

More from KMRVID

The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills