Skill · em Criar imagem, vídeo e arte

figma-implement-design

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma…

Procedência

Antes de instalar

6 arquivos · 26,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-implement-design/.

d=".claude/skills/figma-implement-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma-implement-design"
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"

Global: instala em ~/.claude/skills/figma-implement-design/.

d="$HOME/.claude/skills/figma-implement-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma-implement-design"
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"

Codex

Neste projeto: instala em .agents/skills/figma-implement-design/.

d=".agents/skills/figma-implement-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma-implement-design"
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"

Global: instala em ~/.agents/skills/figma-implement-design/.

d="$HOME/.agents/skills/figma-implement-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma-implement-design"
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"

Antigravity

Neste projeto: instala em .agents/skills/figma-implement-design/.

d=".agents/skills/figma-implement-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma-implement-design"
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"

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

d="$HOME/.gemini/antigravity-cli/skills/figma-implement-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/figma-implement-design"
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"

Peça ao Rook

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

Prévia do SKILL.md

---
name: "figma-implement-design"
description: "Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. R…
author: openai
---


# Implement Design

## Overview

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

## Prerequisites

- Figma MCP server must be connected and accessible
- User must provide a Figma URL in the format: `https://figma.com/design/:fileKey/:fileName?node-id=1-2`
  - `:fileKey` is the file key
  - `1-2` is the node ID (the specific component or frame to implement)
- **OR** when using `figma-desktop` MCP: User can select a node directly in the Figma desktop app (no URL required)
- Project should have an established design system or component library (preferred)

## Required Workflow

**Follow these steps in order. Do not skip steps.**

### Step 0: Set up Figma MCP (if not already configured)

If any MCP call fails because Figma MCP is not connected, pause and set it up:

1. Add the Figma MCP:
   - `codex mcp add figma --url https://mcp.figma.com/mcp`
2. Enable remote MCP client:
   - Set `[features].rmcp_client = true` in `config.toml` **or** run `codex --enable rmcp_client`
3. Log in with OAuth:
   - `codex mcp login figma`

After successful login, the user will have to restart codex. You should finish your answer and tell them so when they try again they can continue with Step 1.

### Step 1: Get Node ID
…

Ver todo o marketplace