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 .claude/design-tokens/design-tokens.json.

Pre-check: Incremental Update

Before scanning, check if .claude/design-tokens/design-tokens.json exists.

• If it does not exist: create the .claude/design-tokens/ directory and proceed with a full scan (Steps 1-8).
• 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. Check if package.json dependencies have changed — compare installed packages against the preferred_libraries section. If new libraries were added to an existing category, or a new category now has libraries, re-run Step 5 for those categories only. Ask the user to re-choose if a new competing library was added to a category that previously had only one.
  4. Merge changes into the existing design-tokens.json — add new entries, update changed entries, remove entries for deleted files.
  5. Skip Steps 7-8's Playwright/pixelmatch install if already installed.

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

Step 1: Identify the Styling Approach