Skill · em Criar imagem, vídeo e arte

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.

Procedência

Antes de instalar

8 arquivos · 23,1 KB · só texto, nenhum script

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/figma/.

d=".claude/skills/figma"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yaml" "$u/agents/openai.yaml" \
  -o "$d/assets/figma-small.svg" "$u/assets/figma-small.svg" \
  -o "$d/assets/figma.png" "$u/assets/figma.png" \
  -o "$d/assets/icon.svg" "$u/assets/icon.svg" \
  -o "$d/LICENSE.txt" "$u/LICENSE.txt" \
  -o "$d/references/figma-mcp-config.md" "$u/references/figma-mcp-config.md" \
  -o "$d/references/figma-tools-and-prompts.md" "$u/references/figma-tools-and-prompts.md"

Global: instala em ~/.claude/skills/figma/.

d="$HOME/.claude/skills/figma"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yaml" "$u/agents/openai.yaml" \
  -o "$d/assets/figma-small.svg" "$u/assets/figma-small.svg" \
  -o "$d/assets/figma.png" "$u/assets/figma.png" \
  -o "$d/assets/icon.svg" "$u/assets/icon.svg" \
  -o "$d/LICENSE.txt" "$u/LICENSE.txt" \
  -o "$d/references/figma-mcp-config.md" "$u/references/figma-mcp-config.md" \
  -o "$d/references/figma-tools-and-prompts.md" "$u/references/figma-tools-and-prompts.md"

Codex

Neste projeto: instala em .agents/skills/figma/.

d=".agents/skills/figma"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yaml" "$u/agents/openai.yaml" \
  -o "$d/assets/figma-small.svg" "$u/assets/figma-small.svg" \
  -o "$d/assets/figma.png" "$u/assets/figma.png" \
  -o "$d/assets/icon.svg" "$u/assets/icon.svg" \
  -o "$d/LICENSE.txt" "$u/LICENSE.txt" \
  -o "$d/references/figma-mcp-config.md" "$u/references/figma-mcp-config.md" \
  -o "$d/references/figma-tools-and-prompts.md" "$u/references/figma-tools-and-prompts.md"

Global: instala em ~/.agents/skills/figma/.

d="$HOME/.agents/skills/figma"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yaml" "$u/agents/openai.yaml" \
  -o "$d/assets/figma-small.svg" "$u/assets/figma-small.svg" \
  -o "$d/assets/figma.png" "$u/assets/figma.png" \
  -o "$d/assets/icon.svg" "$u/assets/icon.svg" \
  -o "$d/LICENSE.txt" "$u/LICENSE.txt" \
  -o "$d/references/figma-mcp-config.md" "$u/references/figma-mcp-config.md" \
  -o "$d/references/figma-tools-and-prompts.md" "$u/references/figma-tools-and-prompts.md"

Antigravity

Neste projeto: instala em .agents/skills/figma/.

d=".agents/skills/figma"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yaml" "$u/agents/openai.yaml" \
  -o "$d/assets/figma-small.svg" "$u/assets/figma-small.svg" \
  -o "$d/assets/figma.png" "$u/assets/figma.png" \
  -o "$d/assets/icon.svg" "$u/assets/icon.svg" \
  -o "$d/LICENSE.txt" "$u/LICENSE.txt" \
  -o "$d/references/figma-mcp-config.md" "$u/references/figma-mcp-config.md" \
  -o "$d/references/figma-tools-and-prompts.md" "$u/references/figma-tools-and-prompts.md"

Global: instala em ~/.gemini/antigravity-cli/skills/figma/.

d="$HOME/.gemini/antigravity-cli/skills/figma"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/agents/openai.yaml" "$u/agents/openai.yaml" \
  -o "$d/assets/figma-small.svg" "$u/assets/figma-small.svg" \
  -o "$d/assets/figma.png" "$u/assets/figma.png" \
  -o "$d/assets/icon.svg" "$u/assets/icon.svg" \
  -o "$d/LICENSE.txt" "$u/LICENSE.txt" \
  -o "$d/references/figma-mcp-config.md" "$u/references/figma-mcp-config.md" \
  -o "$d/references/figma-tools-and-prompts.md" "$u/references/figma-tools-and-prompts.md"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.figma

Prévia do SKILL.md

---
name: figma
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.
author: openai
---

# 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)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. 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.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, 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.

### 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.
…

Ver todo o marketplace