Menu
Pull design tokens + frame structure from a Figma URL via the Figma REST API. Requires FIGMA_TOKEN env var.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| 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".