Define your product type and get a full design system - tokens, components, patterns, and documentation ready for your design tool and codebase.
Paste into any LLM with your product details. Use the output to build your Figma library and component code.
You are a design systems architect who has built and maintained design systems used by 200+ designers and developers at companies like Shopify, Atlassian, and Stripe. Product type: [SAAS/E-COMMERCE/MOBILE APP/DASHBOARD/MARKETPLACE] Brand personality: [PROFESSIONAL/PLAYFUL/MINIMAL/BOLD/LUXURIOUS] Primary platform: [WEB/IOS/ANDROID/CROSS-PLATFORM] Team size: [SOLO/SMALL TEAM 2-5/LARGE TEAM 10+] Existing tech stack: [REACT/VUE/SWIFT/FLUTTER/OTHER] Build a complete design system: **1. Design Tokens** - Color palette: primary, secondary, neutral, semantic (success, warning, error, info) - Provide hex codes, HSL values, and contrast ratios for each pairing - Typography scale: font families, sizes (8 steps), weights, line heights - Spacing scale: 4px base unit, 8 steps (4, 8, 12, 16, 24, 32, 48, 64) - Border radius scale: sharp (0), subtle (4), rounded (8), pill (999) - Shadow system: sm, md, lg, xl with exact values - Breakpoints: mobile, tablet, desktop, wide **2. Core Components** For each component, provide: visual spec, states, variants, and usage rules. - Button (primary, secondary, ghost, danger - 3 sizes) - Input field (text, number, password, search - with validation states) - Select / dropdown (single, multi, searchable) - Checkbox and radio button - Toggle switch - Badge and tag - Avatar (sizes, fallbacks, status indicator) - Card (content card, action card, stat card) - Modal and dialog - Toast notification (4 types) - Tooltip - Tab navigation - Breadcrumb - Pagination **3. Layout Patterns** - Grid system (12-column with responsive behavior) - Page templates: dashboard, list view, detail view, settings, onboarding - Navigation patterns: top bar, sidebar, bottom nav (mobile), command palette - Empty states, loading states, error states for each pattern **4. Accessibility Standards** - Color contrast requirements (WCAG AA minimum) - Focus state design for keyboard navigation - Screen reader annotation rules - Touch target minimum sizes (44x44px) - Motion preference (reduced-motion handling) **5. Documentation Template** - Component anatomy diagram structure - Do/don't examples for each component - Code snippet format - Version changelog format Provide actual values, not ranges. This should be copy-paste ready into a design tool.
The reason "Complete Design System From Scratch" outperforms a generic request is structural: it uses role assignment and sequential task breakdown and output formatting to constrain the AI's response toward user-centered design specifications with component details, interaction states, and accessibility considerations. This means you get user-centered design specifications with component details, interaction states, and accessibility considerations without the trial-and-error that wastes most people's time with AI.
These ui/ux design tips will help you get stronger results when using "Complete Design System From Scratch" and similar prompts in this category.
"Complete Design System From Scratch" is particularly useful in these situations. If any of these scenarios sound familiar, this prompt will save you significant time.
When you use "Complete Design System From Scratch" with ChatGPT, Claude, or Gemini, here is what to expect in the AI output.
Adapt "Complete Design System From Scratch" to your specific situation by modifying these key areas. The more context you add, the better the results.