What problem does it solve? Websites often grow as collections of one-off page fixes, leading to inconsistent colors, spacing, and components that break when real content arrives. This Skill structures website UI as a system of design tokens, component contracts, and page templates so visual decisions stay consistent and maintainable across pages. ## Core Features & Use Cases - Design Token Modeling: Define a compact, semantically named token set covering color, typography, spacing, radius, shadow, layout, and motion, with CSS variable implementation patterns. - Component Contracts: Document reusable components with purpose, variants, states (loading, empty, error, success, disabled), content rules, and accessibility requirements before scaling usage. - Page Hierarchy & Templates: Establish stable page blueprints covering identity, value proposition, primary action, proof, and navigation so page intent is clear within the first screen. - Use Case: When refactoring a marketing site with inconsistent buttons and ad hoc spacing, use this Skill to extract a minimal token vocabulary, write contracts for repeated components, and define reusable page layouts instead of patching individual pages. ## Quick Start Use the site-design-system skill to audit my landing page and propose a token set and component contracts for the repeated UI patterns.
