figma-design-tokens
Extracts design tokens from Figma files and generates production-ready CSS, SCSS, JSON, TypeScript, and W3C DTCG format files using the Figma MCP server
create-design-system-rules
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.
design-system-governance
Detect and track design token drift between Figma design systems and code implementations - report-only skill that identifies inconsistencies and creates wrangler issues for resolution
figma-to-compose
Generate Android Jetpack Compose UI from Figma using Figma Desktop MCP (get_metadata, get_variable_defs, create_design_system_rules, get_design_context, get_screenshot). Automatically detect icon/vector nodes in Figma, obtain SVG/path data when available, and convert icons to Android VectorDrawable XML using Android MCP Toolkit (convert-svg-to-android-drawable). Use when the user shares a Figma link/node-id and asks to implement UI in Compose from Figma.
Figma Developer
Extract components from Figma, convert designs to React components, sync design tokens, and generate code from designs. Bridge the gap between design and code with automated workflows.
figma-integration
Guides design-to-code workflow using Figma integration. Helps extract designs, analyze components, and generate implementation specs. Auto-activates when users mention Figma URLs, design implementation, component conversion, or design-to-code workflows. Works with /ccpm:plan, design-approve, design-refine, and /ccpm:figma-refresh commands.
product-design
Automates design review, token extraction, component mapping, and implementation planning. Reduces design handoff from 6-10 hours to 5 minutes via direct Figma MCP integration. Auto-invoke when user mentions design review, Figma mockup, or design handoff.
