Where are the generated plans stored?

Plans are automatically validated and saved in the '.claude/plans/design/' directory of your project.

Does it support TypeScript and modern CSS frameworks?

Yes, it is designed to analyze .ts, .tsx, and style files to extract patterns regardless of the specific library or framework used.

What inputs does the figma-reference-plan skill require?

It requires a valid Figma URL (or node ID) and a path to an existing file in your repository to serve as a reference for code patterns.

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

Use figma-reference-plan when you want to replicate an existing page structure; use the standard figma-plan when creating something entirely new without a reference.

How does it maintain consistency with my existing code?

The skill reads your reference file and related dependencies (styles, providers, sub-components) to identify your specific styling solution and state management patterns.

Figma Reference Planner

Name: Figma Reference Planner
Author: window-ook

bywindow-ook

0•

Design Tools

Generates structured implementation plans by mapping Figma designs to existing code patterns and file structures.

The Figma Reference Planner is designed to bridge the gap between design and production by analyzing UI components from Figma and cross-referencing them with your existing codebase. By providing a Figma URL and a reference file path, the skill identifies reusable styles, component architectures, and state management patterns to create a detailed implementation strategy. This ensures that new features remain architecturally consistent with your established project standards while significantly reducing manual planning time.

Key Features

01Multi-file context awareness including styles and sub-components

02Source code pattern matching for styling, components, and state

03Automated Figma design analysis via specialized sub-agents

04Standardized implementation plan generation in Markdown

05Automated validation against design principles and checklists

060 GitHub stars

Use Cases

01Implementing new UI pages based on the structure of existing ones

02Documenting technical implementation strategies before writing code

03Maintaining architectural consistency across a large frontend codebase

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

Key Features

01Multi-file context awareness including styles and sub-components

02Source code pattern matching for styling, components, and state

03Automated Figma design analysis via specialized sub-agents

04Standardized implementation plan generation in Markdown

05Automated validation against design principles and checklists

060 GitHub stars

Use Cases

01Implementing new UI pages based on the structure of existing ones

02Documenting technical implementation strategies before writing code

03Maintaining architectural consistency across a large frontend codebase

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