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.
Target: Figma. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Figma MCP
- Figma MCP Integration Rules
- Required flow (do not skip)
- Implementation rules
- Asset handling
- Link-based prompting
- References
Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.md. These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change. 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 visual reference of the node variant being implemented. 4. Only after you have both getdesigncontext and getscreenshot, download any assets needed and start implementation. 5. 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. 6. Validate against Figma for 1:1 look and behavior before marking complete. 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-sys
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- davila7/claude-code-templates
- Source file
- cli-tool/components/skills/creative-design/figma/SKILL.md
- Fixed revision
- 21be197f100a12b8d0dd9a211cc244c8179f84d3
Requirements
- Only the author’s Skill metadata is included. Read the full instructions to check dependencies, licensing and conditions of use.
A small first task
先阅读原作者说明，再决定是否在自己的 AI 工具中使用。
Instructions for your AI tool
- Claude Desktop: resource-specific guide not available yet
- Claude Code: resource-specific guide not available yet
- Cursor: resource-specific guide not available yet
- Codex: resource-specific guide not available yet
Author documentation is not live verification by this site. Without evidence, we do not mark a resource as compatible, safe or free.
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: davila7/claude-code-templates · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-09T14:01:43.795Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.