Takes a Figma URL or screenshot and generates implementation specs by connecting to the Figma MCP server. It extracts design tokens (colors, typography, spacing), maps out component hierarchies with their props and variants, and documents interaction states and responsive behavior. Outputs either a full 4-file PRD or focused design spec documents with pixel measurements, CSS values, and component definitions ready for development. The token extraction is thorough, covering everything from shadow values to letter spacing, which saves the usual back-and-forth with designers. Most useful when you're starting implementation and need exact specs rather than eyeballing designs.
npx skills add https://github.com/charon-fan/agent-playbook --skill figma-designer