How does this differ from a standard Figma-to-code generator?

Unlike generic generators, this skill analyzes your existing project's code patterns (like specific CSS-in-JS libraries or state patterns) to ensure the generated plan fits your specific architecture.

Where are the resulting implementation plans stored?

Implementation plans are automatically generated and saved as Markdown files in the `.claude/plans/design/` directory of your repository.

Does it support different styling libraries like Tailwind or Styled-components?

Yes, it detects the styling solution by reading your provided reference files and related files in the same directory.

When should I use this instead of the standard figma-plan skill?

Use 'figma-reference-plan' when you have existing code to emulate; use 'figma-plan' for entirely new implementations without local code references.

What inputs are required to use this skill?

You need to provide a Figma URL (or Node ID) and a path to an existing local file that serves as a reference for the coding style and structure.

Figma Reference Plan

Name: Figma Reference Plan
Author: window-ook

bywindow-ook

0•

设计工具

Translates Figma designs into detailed implementation plans by analyzing existing codebase patterns for seamless frontend consistency.

Figma Reference Plan is a specialized Claude Code skill designed for developers who need to implement new UI designs while maintaining strict adherence to existing coding standards. By analyzing a Figma URL alongside a specified reference file, the skill identifies styling methods, component structures, and state management patterns to generate a comprehensive implementation blueprint. This ensures that new features are not just visually accurate, but also architecturally consistent with your current project, effectively reducing technical debt and accelerating the development workflow.

主要功能

01Built-in validation against design principles and implementation checklists

02Automated Figma design analysis via specialized sub-agents

03Structured plan generation in .claude/plans/design/ directory

04Smart classification of tasks into Reuse, Modify, or Create New categories

05Deep pattern matching with existing source code styles and components

060 GitHub stars

使用场景

01Bridging the gap between design handoff and code implementation with automated blueprints

02Scaling a design system by referencing existing component implementations for new UI blocks

03Implementing new application pages that must strictly match existing architectural patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add window-ook/claude-code-lab figma-reference-plan

For use in Claude.ai and ChatGPT

主要功能

01Built-in validation against design principles and implementation checklists

02Automated Figma design analysis via specialized sub-agents

03Structured plan generation in .claude/plans/design/ directory

04Smart classification of tasks into Reuse, Modify, or Create New categories

05Deep pattern matching with existing source code styles and components

060 GitHub stars

使用场景

01Bridging the gap between design handoff and code implementation with automated blueprints

02Scaling a design system by referencing existing component implementations for new UI blocks

03Implementing new application pages that must strictly match existing architectural patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add window-ook/claude-code-lab figma-reference-plan

For use in Claude.ai and ChatGPT