ChatGPTDesign
UI/UX Design System Prompt for Figma
Create a complete design system with consistent tokens, components, and documentation.
Act as a senior UI/UX designer with expertise in design systems. Create a comprehensive design system specification for [PROJECT NAME]. **Brand Information:** - Industry: [INDUSTRY] - Target users: [USER DEMOGRAPHIC] - Brand personality: [3 ADJECTIVES] - Existing brand colors (if any): [HEX CODES] **Deliverables:** ### 1. Design Tokens **Colors:** - Primary: [Generate 9-shade palette] - Secondary: [Generate 9-shade palette] - Semantic: Success, Warning, Error, Info (with light/dark variants) - Neutral: Gray scale 50-950 - Background & Surface colors **Typography:** - Font pairing recommendation (heading + body) - Type scale: xs(12) sm(14) base(16) lg(18) xl(20) 2xl(24) 3xl(30) 4xl(36) 5xl(48) - Line heights and letter spacing **Spacing System:** 4px base unit (4, 8, 12, 16, 24, 32, 48, 64, 96) **Border Radius:** sm(4) md(8) lg(12) xl(16) full(9999) ### 2. Core Components (specify props & variants): - Button (variant: primary/secondary/ghost/danger, size: sm/md/lg) - Input (state: default/focus/error/disabled) - Card (variant: default/elevated/outlined) - Badge/Tag - Modal/Dialog - Navigation (top/sidebar) ### 3. Accessibility Guidelines - WCAG 2.1 AA compliance requirements - Focus states - Color contrast ratios ### 4. Figma Organization Structure Suggested page and frame organization
Comments
to leave a comment.
No comments yet. Be the first to comment!