How do I install the Figma Design Pipeline skill?

Run npx skillmds@latest add spfr/figma-design-pipeline in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Figma Design Pipeline safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Figma Design Pipeline?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Figma Design Pipeline free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Figma Design Pipeline?

spfr (@spfr) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Figma Design Pipeline by spfr — Agent Skill

Name: Figma Design Pipeline
Author: spfr

Figma Design Pipeline

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.

spfr Updated Sep 17, 2026

File contents

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`

---name: figma-design-pipelinedescription: 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.---# Figma Design IntelligenceKeep context tight. Load only the sections needed for the task. For detailed design heuristics, open [references/design-guidance.md](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` |

Frequently asked questions