AI SummaryThis booster integrates Figma's MCP server into Claude Code to automatically fetch design context, screenshots, and variables, then translate Figma designs into production code. Developers working on design-to-code workflows benefit significantly from automated design asset retrieval and code generation.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "figma" skill in my project. Please run this command in my terminal: # Install skill into your project (8 files) mkdir -p .claude/skills/figma && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma/SKILL.md "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma/LICENSE.txt "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma/LICENSE.txt" && mkdir -p .claude/skills/figma/agents && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma/agents/openai.yaml "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma/agents/openai.yaml" && mkdir -p .claude/skills/figma/assets && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma/assets/figma-small.svg "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma/assets/figma-small.svg" && mkdir -p .claude/skills/figma/assets && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma/assets/figma.png "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma/assets/figma.png" && mkdir -p .claude/skills/figma/assets && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma/assets/icon.svg "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma/assets/icon.svg" && mkdir -p .claude/skills/figma/references && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma/references/figma-mcp-config.md "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma/references/figma-mcp-config.md" && mkdir -p .claude/skills/figma/references && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma/references/figma-tools-and-prompts.md "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma/references/figma-tools-and-prompts.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
Figma MCP
Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.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)
• Run get_design_context first to fetch the structured representation for the exact node(s). • 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. • Run get_screenshot for a visual reference of the node variant being implemented. • Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation. • 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. • 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.
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster