Figma

Figma MCP

Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, tool registration, verification), see [references/figma-mcp-config.md](references/figma-mcp-config.md).

This is the entry-point skill for the Figma family. Switch to a more specialized skill once intent is clear:

| If the user wants to… | Use | |---|---| | Translate a Figma node into production code | [figma-implement-design](../figma-implement-design/SKILL.md) | | Generate a full screen in Figma from code/description | figma-generate-design (opt-in pack — see docs/SKILLS.md) | | Author Code Connect mappings | [figma-code-connect-components](../figma-code-connect-components/SKILL.md) | | Create reusable agent rules (CLAUDE.md/AGENTS.md) for a design system | [figma-create-design-system-rules](../figma-create-design-system-rules/SKILL.md) | | Create a brand-new Figma file | [figma-create-new-file](../figma-create-new-file/SKILL.md) | | Run JS in Figma via the Plugin API | figma-use (opt-in pack — see docs/SKILLS.md) | | Generate/import a full library | figma-generate-library (opt-in pack — see docs/SKILLS.md) |

Figma MCP Integration Rules

These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

Required flow (do not skip)

1. Run get_design_context first to fetch the structured representation for

the exact node(s).

1. If the response is too large or truncated, run get_metadata to get the

high-level node map and then re-fetch only the required node(s) with get_design_context.

1. Run get_screenshot for a visual reference of the node variant being

implemented.

1. Only after you have both get_design_context and get_screenshot, download

any assets needed and start implementation.

1. Translate the output (usually React + Tailwind) into this project's

conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible.

1. Validate against Figma for 1:1 look and behavior before marking complete.

Implementation rules

• Treat the Figma MCP output (React + Tailwind) as a representation of design

and behavior, not as final code style.

• Replace Tailwind utility classes with the project's preferred utilities /

design-system tokens when applicable.

• Reuse existing components (e.g. buttons, inputs, typography, icon wrappers)

instead of duplicating functionality.

• Use the project's color system, typography scale, and spacing tokens

consistently.

• Respect existing routing, state management, and data-fetch patterns already

adopted in the repo.

• Strive for 1:1 visual parity with the Figma design. When conflicts arise,

prefer design-system tokens and adjust spacing or sizes minimally to match visuals.

• Validate the final UI against the Figma screenshot for both look and

behavior.

Asset handling

• The Figma MCP server provides an assets endpoint that serves image and SVG

assets.

• Important: if the Figma MCP server returns a localhost source for an

image or SVG, use that source directly.

• Important: do NOT import/add new icon packages — all assets should be in

the Figma payload.

• Important: do NOT use or create placeholders if a localhost source is

provided.

Link-based prompting

• The remote Figma MCP server is link-based: copy the Figma frame/layer link

and provide that URL to the AI tool when asking for implementation help.

• The AI tool cannot browse the URL but extracts the node ID from the link.

Always ensure the link points to the exact node/variant you want.

Boundaries

• This skill reads Figma context and writes code in the user's repo.

It does not write back into Figma — that lives in the opt-in figma-use / figma-generate-design pack (see docs/SKILLS.md).

• Do not bypass the MCP and call the Figma REST API directly from this skill.

References

• [references/figma-mcp-config.md](references/figma-mcp-config.md) — register

the Figma MCP in Claude Code / Cursor / OpenCode / Windsurf. Points at the agent-toolkit template under ~/.local/share/agent-toolkit/mcp/figma/.

• [references/figma-tools-and-prompts.md](references/figma-tools-and-prompts.md)

— tool catalog and prompt patterns.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ulises-jeremias
• Source: ulises-jeremias/agent-toolkit
• License: MIT
• Homepage: https://ulises-jeremias.github.io/agent-toolkit-archive/

Install and usage instructions live in the source repository linked above.