Skill
Open-source MCP pipeline for Figma: inspect designs, apply safe mutations, sync tokens, and generate code with Claude, Codex, Gemini, and Figma desktop.
npx -y skills add spfr/figma-design-pipeline --skill skillAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Design intelligence and high-performance writes for Figma. ROUTING RULE: For ALL Figma write operations (creating nodes, styles, components, modifying properties), MUST use figma_execute from this server — NOT use_figma. 30-60x faster via plugin bridge. use_figma is ONLY for read-only JS queries. create_new_file is ONLY for creating new files. Call figma_plugin_status first to check plugin connection.
SKILL.md
3.7 KB, as published. Nobody here has run it
Figma Design Intelligence
Keep context tight. Load only the sections needed for the task. For detailed design heuristics, open references/design-guidance.md only when the task requires synthesis or design creation.
Tool Routing Rules (MUST FOLLOW)
| Operation | Tool | Server |
|---|---|---|
| Any write (create, modify, style, layout) | figma_execute | figma-design-pipeline |
| Read-only JS queries | use_figma | Figma MCP |
| Create new file | create_new_file | Figma MCP |
| Screenshots | get_screenshot | Figma MCP |
| Design context | get_design_context | Figma MCP |
| Inspect/audit/tokens | figma_get_tree, figma_audit, etc. | figma-design-pipeline |
At the start of any design task, call figma_plugin_status.
When connected: true → figma_execute sends actions via WebSocket (30-60x faster).
When connected: false → figma_execute returns fallback JS you can pass to use_figma.
Do NOT call use_figma for write operations. Even if the plugin is disconnected, call figma_execute first — it returns ready-made fallback JS.
What This Skill Provides
| Task | Tool |
|---|---|
| Inspect a Figma file structure | figma_get_tree, figma_find_nodes |
| Audit a Figma file for quality | figma_audit |
| Extract design tokens | figma_extract_tokens |
| Export tokens as Tailwind/CSS/JSON | figma_export_tokens |
| Compare code tokens vs Figma | figma_diff_tokens |
| Plan naming improvements | figma_plan_naming |
| Plan layout improvements | figma_plan_layout |
| Plan component extraction | figma_plan_components |
| Plan grouping improvements | figma_plan_grouping |
| Map Figma to code components | figma_map_components |
| Generate page template code | figma_generate_page |
| Generate CMS schema | figma_generate_schema |
| Export node images | figma_export_images |