init

Installation
SKILL.md

Initialize Design System

You are initializing the design-to-code workflow for this project. Your job is to deeply understand the existing codebase's design patterns and produce a design-tokens.json file at the project root.

Pre-check: Incremental Update

Before scanning, check if design-tokens.json already exists at the project root.

  • If it does not exist: proceed with a full scan (Steps 1-7).
  • If it does exist: read it into context. Then run a targeted scan:
    1. Check if the styling approach or config file has changed. If yes, re-extract tokens (Step 2).
    2. Scan only for new, modified, or deleted components and hooks since the file was last generated (compare file paths in the existing JSON against what's on disk).
    3. Merge changes into the existing design-tokens.json — add new entries, update changed entries, remove entries for deleted files.
    4. Skip Steps 6-7's Playwright install if already installed.

This avoids re-reading the entire codebase when only a few components have changed.

Step 1: Identify the Styling Approach

Related skills

More from codestate-cs/figma-to-design

Installs
1
First Seen
Apr 3, 2026