Website designFree→ Claude / ChatGPT
Design System Starter Kit
Tokens, components and usage rules for a small product team.
What you get: A tokens file, component specs and do/don't rules ready to hand to developers.
Example output. A simplified example of what this prompt can produce, made by Claude from the prompt using the sample values below. Names, prices and reviews are invented, and your result will differ with your own values and the tool you use.
- product_name:
- Fieldnote
- product_type:
- note-taking app
- audience:
- students
- components:
- Button, Text input
- brand_personality:
- calm, friendly, clear
Act as a senior design-systems lead. Create a starter design system for {{product_name}}, a {{product_type}} used by {{audience}}.
Deliver:
1. Design tokens as JSON: colors (brand, neutral, semantic success/warning/danger, each with 9 steps), type scale (6 sizes, line heights, weights), spacing scale (4px base), radii, shadows, motion durations and easing, breakpoints.
2. Dark and light theme mappings for every semantic color, with contrast ratios that meet WCAG AA.
3. Specs for these components: {{components}} — anatomy, states (default, hover, focus, active, disabled, error, loading), sizing variants and accessibility notes (roles, keyboard behaviour).
4. Ten do/don't usage rules written so a developer can follow them without a designer.
5. A naming convention and a changelog format.
Brand personality: {{brand_personality}}. Keep the output implementation-ready.