Analyzes Figma design URLs to generate comprehensive technical implementation plans for new frontend projects.
Figma Design Planner is a specialized Claude Code skill designed to bridge the gap between UI/UX design and development by automating the initial technical planning phase. It utilizes the figma-analyzer agent to extract visual data and layout specifications from Figma URLs or node IDs, then translates them into structured implementation plans stored directly in your project directory. This skill is specifically optimized for greenfield development where no prior codebase exists, ensuring that your implementation starts with a clear, validated roadmap that adheres to your project's specific design principles and quality standards.
주요 기능
01Generates structured technical roadmaps in .claude/plans/design/
02Automated Figma design data extraction via URL or node ID
030 GitHub stars
04Built-in validation against project-specific principles and checklists
05Standardized template usage for consistent documentation
06Seamless hand-off to implementation agents like execute-figma-plan
사용 사례
01Starting a new frontend project or feature from a Figma prototype
02Translating complex UI layouts into actionable development steps
03Creating standardized design-to-code documentation for teams
