What problem does it solve? Design systems drift into inconsistency when components are created ad hoc without duplicate detection, token governance, or visual verification. This Skill provides a menu-driven workflow to build, import, browse, and maintain a living design system with structured component specs and design tokens. ## Core Features & Use Cases - Create with Duplicate Detection: Runs a 7-step assessment pipeline (scan, compare attributes, calculate weighted similarity, identify opportunities and risks, present decision) before creating, updating, or adding variants to components. - Import Existing Systems: Extracts tokens (colors, typography, spacing, shadows, breakpoints, motion) and components from URLs, token files, Figma, or existing codebases into WDS markdown format. - Visual Browsing and Preview: Generates disposable localhost apps with a token explorer, component catalog, relationship graph, and intent-based search, plus Figma sync for visual editing. - Use Case: A designer adding a new navigation button gets a similarity score against existing buttons, a trade-off table (reuse vs variant vs new component), and a recommendation before any file is written. ## Quick Start Ask the agent to start Phase 7 design system and choose Create to build a new component with duplicate detection.
