product-design_skill

Overview

This skill automates design review, token extraction, component mapping, and implementation planning to shrink design handoff time from hours to minutes. It connects directly to Figma via the MCP protocol or accepts manual design input, then generates analysis, a phased implementation plan, and task artifacts ready for development. Auto-invokes when users mention design review, Figma mockups, or design handoff requests.

How this skill works

The skill inspects Figma metadata, variables, and component structures via a local MCP connection or manual JSON input and extracts design tokens, component definitions, and similarity scores. It runs a codebase audit to detect drift, maps Figma components to code components (with confidence levels), and produces a phased task document and design-review report. Outputs include DTCG-formatted tokens, component mappings, an audit summary, and a Navigator-style implementation plan ready for PM or developer use.

When to use it

• When you need a fast design-to-code handoff for a new feature
• When you want to extract or sync design tokens from a Figma file
• When checking for design-system drift between Figma and the codebase
• When planning phased implementation and acceptance criteria for UI work
• When you need a reproducible design review report for stakeholders

Best practices

• Run the MCP automated workflow with the Figma Desktop app and MCP enabled for fastest, most accurate results
• Keep a .agent/design-system UI kit and token inventory committed to the repo for reliable mapping and diffs
• Provide a clear feature name and Figma URL or a concise manual JSON describing tokens and components when MCP is unavailable
• Review generated task documents before auto-starting implementation and mark breaking changes clearly
• Set up visual regression testing after implementation to prevent future drift

Example use cases

• Perform a full design handoff for a dashboard redesign and get a TASK document plus a review report in minutes
• Audit an existing UI for token drift and receive a prioritized list of token fixes and reuse opportunities
• Map new Figma components to existing code components and get confidence scores for reuse vs. new creation
• Generate a phased implementation plan (tokens → atoms → molecules → organisms) ready for PM ticket creation
• Extract DTCG-format tokens from Figma variables to update theme and Tailwind configs