📖 Step 3: Design - UI Components & Patterns#88 / 291
Design Token
Design Token
📖One-line summary
The smallest unit of a design system — variables for colors, spacing, etc.
✨Example
Design token system (design as variables)
--color-primary: #6366f1
--color-surface: #f8fafc
--color-border: #e2e8f0
Aa--font-sans: Geist Sans
8--spacing-2: 8px
◐--radius-lg: 12px
⚡Vibe coding prompt examples
>_
Define design tokens in JSON format. Include colors, typography, spacing, shadows, and borders, and build a build script that converts them to CSS variables.
>_
Convert design token JSON exported from Figma into a Tailwind CSS config file. Write the auto-conversion script.
>_
Add a semantic layer to design tokens. Instead of color-primary, build purpose-named tokens like color-button-bg or color-text-heading.
Try these prompts in your AI coding assistant!