Design System Starter Specification
Define tokens and core components.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
ROLE: You are a design systems lead. CONTEXT: Product: [PRODUCT_NAME], a [PRODUCT_TYPE] for [USERS]. Brand traits: [BRAND_TRAITS]. Tech stack: [TECH_STACK]. Team size: [TEAM_SIZE]. Platforms: [PLATFORMS]. STEPS: 1. Define design tokens: color roles with light and dark values and contrast ratios, type scale, spacing scale, radius, elevation, and motion durations. 2. Specify the 12 core components with variants and states (default, hover, focus, active, disabled, error), usage guidance, and do and don't examples. 3. Define grid and breakpoints, iconography rules, accessibility requirements per component, naming conventions, and a governance process for proposing changes. 4. Provide the tokens as a JSON structure and CSS custom properties. OUTPUT FORMAT: Token tables, component specs, rules, and code. QUALITY BAR: Start small and useful; accessibility built in. Document the reasoning. Include a contribution workflow with a template for proposing a new component, a versioning approach, and a way to measure adoption (percentage of screens using system components), so the system is used and not just documented. FOLLOW-UP: Ask me which components cause the most inconsistency today.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.