Menu
Pull design tokens + frame structure from a Figma URL via the Figma REST API. Requires FIGMA_TOKEN env var.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
| name | ingest-figma |
| description | Pull design tokens + frame structure from a Figma URL via the Figma REST API. Requires FIGMA_TOKEN env var. |
| argument-hint | <figma-url> |
| allowed-tools | Read Write Bash(curl:*) Bash(mkdir:*) Bash(realpath:*) |
Extract design system from a Figma file using the REST API. Falls back to SVG-import if no token available.
Bash(test -n "$FIGMA_TOKEN" && echo has-token || echo no-token) — check env varno-token:
FIGMA_TOKEN found. Two options: (a) Get a token at https://www.figma.com/developers/api#access-tokens and export FIGMA_TOKEN=... in your shell, or (b) export the frame as SVG in Figma (Right-click frame → Copy as → Copy as SVG) and paste the file to artifacts/ingested/ — I'll parse the SVG."Figma URL format: https://www.figma.com/(file|design|proto)/<fileKey>/<name>?node-id=<nodeId>
Extract:
fileKey — alphanumeric after /file/ or /design/nodeId — query param node-id (URL-decoded, often contains :)Fetch file nodes:
Bash(curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" \
"https://api.figma.com/v1/files/<fileKey>/nodes?ids=<nodeId>&depth=2" \
-o /tmp/figma-<ts>.json)
Fetch style definitions:
Bash(curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" \
"https://api.figma.com/v1/files/<fileKey>/styles" \
-o /tmp/figma-styles-<ts>.json)
Parse JSON:
document.children → find fills with type === 'SOLID' → extract color {r,g,b} → convert to hexeffects with type === 'DROP_SHADOW'style with fontFamily, fontSize, fontWeight, lineHeightPxtype === 'COMPONENT' and type === 'COMPONENT_SET'/styles: styles endpoint returns named variablesWrite:
artifacts/ingested/figma-<fileKey>-tokens.json
Same schema as ingest-github, plus "source": { "figma_url": "...", "file_key": "...", "node_id": "..." }.
Offer next step:
artifacts/ingested/figma-<fileKey>-tokens.json."/create-design-system or start artifact skill.artifacts/ingested/Read the SVG contentfill="#..." / stroke="#..." / style="...color..." attributes<text> elements for font info (font-family, font-size, font-weight)"source": { "svg": "<path>" } + confidence flagsFigma API: 50 req/min for free tier. Fetching one frame + styles = 2 requests, well under limit.
FIGMA_TOKEN in env only — never written to disk or logged.
Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.
Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues. Use after /done reports clean and before end-of-turn.
Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.
Apply buffered tweaks from pending.yaml to the source HTML file. Invoked when user says "save tweaks", "apply tweaks", "persist panel changes", or runs /apply-tweaks.
Generate a working demo artifact on dummy content so the user can see a reference implementation. Use when user says "show me an example deck", "what does a prototype look like", "give me a starter", "I want to see an example of X". Generates live — not from a static gallery.
Extract or build a design system (tokens, components, style guide). Use for "design system", "style guide", "tokens", "UI kit".