← ClaudeAtlas

figmalisted

Use the Figma MCP server to fetch design context, screenshots, variables, and assets, 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.
ulises-jeremias/agent-toolkit · ★ 6 · AI & Automation · score 71
Install: claude install-skill ulises-jeremias/agent-toolkit
# 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). 2. If the response is too large or