Translates Figma designs into detailed, structured implementation plans for new frontend projects.
Figma Plan is a specialized Claude Code skill designed to bridge the gap between UI/UX design and development by analyzing Figma URLs and generating comprehensive implementation blueprints. It utilizes a dedicated figma-analyzer sub-agent to extract design data and structures it into production-ready plans within the .claude/plans/design/ directory. This skill is specifically optimized for greenfield projects where no existing code reference is available, ensuring that architectural decisions, component structures, and styling logic are aligned with design principles from the very first line of code.
主要功能
010 GitHub stars
02Built-in self-validation via a comprehensive quality checklist.
03Standardized plan generation following predefined structural templates.
04Automated design data extraction using the figma-analyzer sub-agent.
05Automated documentation management within the project's local directory.
06Strict adherence to core development principles and design-to-code rules.
使用场景
01Creating technical implementation documentation for UI components before coding begins.
02Standardizing the design-to-engineering handover process for development teams.
03Starting a new frontend feature or page implementation from a Figma mockup.
