product-design
Automates design handoff from Figma to code: token extraction, component mapping, drift detection, and a phased implementation plan.
Triggers
Natural-language phrases that auto-invoke the skill:
- “Review this design”
- “Analyze Figma mockup”
- “Design handoff for [feature]”
- “Check design system impact”
- “Extract tokens from Figma”
- “What changed in the design?”
What it does
- Connects directly to the Figma MCP server to extract metadata, design tokens, and code-connect mappings (progressive refinement to control token usage)
- Converts Figma variables to DTCG-format design tokens and diffs them against existing tokens
- Maps Figma components to codebase components with confidence scores; flags unmapped components needing creation
- Audits the design system for drift, unused tokens, and reuse opportunities, then assigns a priority level
- Generates a phased Navigator task document (tokens → atoms → molecules → organisms) plus a design review report
- Falls back to a manual workflow when Figma MCP is unavailable
Example
"Review the dashboard redesign from Figma: https://figma.com/file/..."Produces a design review report, a DTCG token diff, component mappings, and a TASK-XX implementation plan, then offers to start implementation, review the plan, or modify it.