📖 Step 2: Design - UI/UX Basics#34 / 291
Design System
Design System
📖One-line summary
A unified set of UI rules covering colors, fonts, buttons, and more.
💡Easy explanation
A set of design rules used across the whole service. "Buttons are blue, rounded, 14px font" — unified rules defined upfront.
✨Example
Color Tokens
Primary
Text
Success
Error
Warning
Typography
H1 Heading
H2 Heading
Body text
Caption
Buttons
PrimarySecondaryDisabled
Spacing
4
8
12
16
24
⚡Vibe coding prompt examples
>_
Set up a React-based design system. Build Button, Input, Card, and Badge components and document them in Storybook.
>_
Add theming to the existing design system. Use CSS variables to switch between light and dark themes.
>_
Define color tokens for the design system. Split Primary, Secondary, Neutral, and Semantic colors into scales and meet accessibility standards.
Try these prompts in your AI coding assistant!