From cowork-with
Use when the user works with or mentions Figma designs, prototypes, mockups, UI specs, design tokens, or design-to-code workflows
How this skill is triggered — by the user, by Claude, or both
Slash command
/cowork-with:cowork-with-figmaThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design-to-code workflow for Claude Code via the official Figma MCP server.
Design-to-code workflow for Claude Code via the official Figma MCP server.
Requires globally installed Figma MCP server (named figma). If not set up, run /cowork-with:cowork-with-onboarding.
When a Figma URL appears — in conversation, a Jira issue description, or a wiki page — use the explorer agent to extract design context automatically. Pass the full Figma URL directly to get_design_context; the tool extracts the relevant node.
Node ID format: Figma node IDs use colon separators: 23102:138594. If a URL contains a dash-formatted node (e.g., node-id=23102-138594), convert dashes to colons when passing nodeId to any tool: "23102:138594".
Spawn via: Agent tool → name: "explorer" (the plugin ships agents/explorer.md — haiku model, read-only: MCP reads + codebase + git).
| Task | Who |
|---|---|
| Read design context, tokens, metadata | explorer agent |
| Take screenshots for visual reference | explorer agent |
| Inspect Code Connect mappings | explorer agent |
| Generate code from design context | Main model |
| Preview to user and get confirmation | Main model |
| Write to Figma (generate design, diagrams, Code Connect) | Main model |
Read (explorer agent):
get_design_context — structured code from frames/components (React + Tailwind default)get_variable_defs — design tokens: colors, spacing, typographyget_code_connect_map — existing component-to-code mappingsget_code_connect_suggestions — detect unmapped componentsget_screenshot — visual reference of a selectionget_metadata — XML layer structure (lightweight; use for large files before calling get_design_context on specific nodes)get_figjam — FigJam diagram metadata and screenshotswhoami — current user info and plan detailsWrite (main model, after user confirmation):
generate_figma_design — capture running web UI as editable Figma design (code → Figma); confirm target file with user firstgenerate_diagram — create FigJam diagram from Mermaid syntax or natural languageadd_code_connect_map — create Code Connect mappings between components and codesend_code_connect_mappings — finalize suggested Code Connect mappingscreate_design_system_rules — generate rule file for consistent code output/superpowers:brainstorming to explore implementation approaches before coding./cowork-with:cowork-with-jira to track progress.The following are not available via MCP or have restrictions:
generate_figma_design: Rolling out, limited availability.npx claudepluginhub labrinyang/cowork-with-marketplace --plugin cowork-withBridges Designpowers specs and Figma in both directions: pushes visual decisions or code into Figma frames, pulls Figma files in for review or design-system source. Falls back to HTML prototype when Figma is unavailable.
Automates design handoff from Figma to code: extracts tokens, maps components, detects drift, and generates implementation plans. Reduces handoff time from hours to minutes.
Connects Figma designs to code by generating design system rules, mapping UI components to Figma, and maintaining design-code consistency via MCP server. Useful for Figma to code, UI mockups, design systems.