Source profileQuality 66/100
openai/skills/skills/.curated/figma/SKILL.md
figma
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.
- Source repository stars
- 25,188
- Declared platforms
- 0
- Static risk flags
- 1
- Last source update
- 2026-07-14
- Source checked
- 2026-08-26
Decision brief
What it does: where it fits
Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.md.
Not for
- Tasks that require unconfirmed production actions or broad system permissions.
- Environments where the pinned source and install steps cannot be inspected.
Compatibility matrix
Platform support, with evidence labels
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
Inspect first. Install second.
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
Source-detected install commandSource
npx skills add https://github.com/openai/skills --skill "skills/.curated/figma"Safe inspection promptEditorial
Inspect the Agent Skill "figma" from https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma/SKILL.md at commit 49f948faa9258a0c61caceaf225e179651397431. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
What the source asks the agent to do
- 01
Implementation rules
Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
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. - 02
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.
Run getdesigncontext first to fetch the structured representation for the exact node(s).If the response is too large or truncated, run getmetadata to get the high-level node map and then re-fetch only the required node(s) with getdesigncontext.Run getscreenshot for a visual reference of the node variant being implemented. - 03
Required flow (do not skip)
1. Run getdesigncontext first to fetch the structured representation for the exact node(s). 2. If the response is too large or truncated, run getmetadata to get the high-level node map and then re-fetch only the required node(s) with getdesigncontext. 3. Run getscreenshot for a…
Run getdesigncontext first to fetch the structured representation for the exact node(s).If the response is too large or truncated, run getmetadata to get the high-level node map and then re-fetch only the required node(s) with getdesigncontext.Run getscreenshot for a visual reference of the node variant being implemented. - 04
Asset handling
The Figma MCP Server provides an assets endpoint which can serve image and SVG assets.
The Figma MCP Server provides an assets endpoint which can serve image and SVG assets.IMPORTANT: If the Figma MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly.IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload.
Permission review
Static risk signals and limitations
Network access
The documentation includes network, browsing, or remote request actions.
The client cannot browse the URL but extracts the node ID from the link; always ensure the link points to the exact node/variant you want.Evidence record
Why each signal appears
EvidenceSourceComputedTestedEditorial
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 66/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 25,188 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Provenance and original SKILL.md
- Repository
- openai/skills
- Skill path
- skills/.curated/figma/SKILL.md
- Commit
- 49f948faa9258a0c61caceaf225e179651397431
- License
- Not declared
- Collected
- 2026-08-26
- Default branch
- main
View the original SKILL.md
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.
Asset handling
- The Figma MCP Server provides an assets endpoint which can serve image and SVG assets.
- IMPORTANT: If the Figma MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly.
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload.
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided.
Link-based prompting
- The server is link-based: copy the Figma frame/layer link and give that URL to the MCP client when asking for implementation help.
- The client cannot browse the URL but extracts the node ID from the link; always ensure the link points to the exact node/variant you want.
References
references/figma-mcp-config.md— setup, verification, troubleshooting, and link-based usage reminders.references/figma-tools-and-prompts.md— tool catalog and prompt patterns for selecting frameworks/components and fetching metadata.
Frequently asked questions
What to verify before installation and use
What does the figma source document cover?
Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.md.
How do I install figma?
The source record exposes this install command: npx skills add https://github.com/openai/skills --skill "skills/.curated/figma". Inspect the command and pinned source before running it.
Which permission-related actions were detected?
Static rules flagged network in the source; the page lists the matching lines and excerpts.
Alternatives
Compare before choosing
Computed 1008
narrative-io/narrative-skills-marketplace
design-analysis
Translate a fuzzy analytical question into a rigorous investigation plan. Interrogates the ask, grounds the plan in the available data dictionary, applies analytical best practices, and produces a structured brief of query specifications for a downstream query-writing skill. Plans, does not write SQL. Use when: "why did X drop", "is there a relationship between A and B", "who are our highest-value customers", "what's driving the change in Y", "investigate this trend", "design an analysis for", "
Computed 96156
open-edge-platform/edge-ai-libraries
chatqna-helm-deploy
Deploy Chat Question-and-Answer Core to Kubernetes using Helm (OpenVINO CPU, OpenVINO GPU, or Ollama), including values.yaml configuration, helm install/upgrade, deployment verification, uninstall, and translation from Docker Compose setup_env.sh variables into Helm override values. Use this skill when the user says "deploy chatqna core to kubernetes", "helm install chatqna-core", "configure values.yaml", "convert compose config to helm", or "translate setup_env.sh to chart values".
Computed 9439,130
wshobson/agents
brand-landingpage
Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens —
Computed 9489
aAAaqwq/AGI-Super-Team
figma-implement-design
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.