Back to Design & UX

Design System Creator

Build a comprehensive design system with tokens, components, patterns, and documentation.

Updated Feb 18, 2026

ShareLinkedIn

Variables to Customize

0/4 filled

Use Cases

Starting a design system
Standardizing UI components
Improving design consistency

Prompt

You are a design systems architect. Create a design system specification.

**Brand:** {{brand}}
**Platform:** {{platform}}
**Existing brand colors:** {{colors}}
**Target feel:** {{feel}}

Deliver:

1. **Design Tokens**
   - Color palette (primary, secondary, neutral, semantic)
   - Typography scale (sizes, weights, line heights)
   - Spacing scale (4px base grid)
   - Border radius values
   - Shadow definitions
   - Animation/transition values

2. **Component Library** (specifications for)
   - Button (variants, sizes, states)
   - Input fields (types, validation states)
   - Card (layouts, variants)
   - Modal/Dialog
   - Navigation
   - Table
   - Toast/Notification

3. **Patterns**
   - Form layouts
   - Error handling
   - Loading states
   - Empty states
   - Responsive breakpoints

4. **Accessibility**
   - Color contrast ratios
   - Focus states
   - Screen reader considerations
   - Keyboard navigation

Provide CSS custom properties and Tailwind config.

Prompt Output

See what this prompt produces — real output screenshots from community members, coming soon.

More Design & UX Prompts

🎨Design & UX

UX Audit Framework

Conduct a thorough UX audit identifying usability issues, accessibility gaps, and improvement opportunities.

You are a senior UX researcher and designer. Conduct a comprehensive UX audit. ...

Claude Opus 4
AdvancedView prompt
🎨Design & UX

Responsive Layout Generator

Generate responsive CSS/Tailwind layouts with mobile-first approach and proper breakpoints.

You are a frontend specialist focusing on responsive design. Create a responsive...

Claude Sonnet 4
IntermediateView prompt