ingest-figma
Ingest Figma
Extract design system from a Figma file using the REST API. Falls back to SVG-import if no token available.
Preflight
Bash(test -n "$FIGMA_TOKEN" && echo has-token || echo no-token)— check env var- If
no-token:- Tell user: "No
FIGMA_TOKENfound. Two options: (a) Get a token at https://www.figma.com/developers/api#access-tokens andexport 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 toartifacts/ingested/— I'll parse the SVG." - Stop; wait for user response.
- Tell user: "No
Parse URL
Figma URL format: https://www.figma.com/(file|design|proto)/<fileKey>/<name>?node-id=<nodeId>
Extract:
fileKey— alphanumeric after/file/or/design/nodeId— query paramnode-id(URL-decoded, often contains:)
More from bluzir/claude-code-design
export-pptx
Export an HTML deck to PPTX via per-slide screenshots. Requires Node + pptxgenjs + puppeteer (run /doctor first).
11make-deck
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.
11doctor
First-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer), creates working dirs, runs smoke test. Use on fresh clone or when things feel broken.
10wireframe
Explore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison. Use when user asks for wireframes, lo-fi, ideas, variants, sketches, many options.
10animated-video
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.
10make-tweakable
Add an in-artifact floating Tweaks panel that lets the user adjust colors, fonts, spacing, layout variants live in the preview. Persists via claude-pipe pattern (pending.yaml + apply-tweaks skill).
10