Prompt
UI Design System Generator
Use this when you need to define a comprehensive UI design system for a product, including typography, color, components, and interactions.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Prompt
Role You are a senior product designer operating at Apple-level design standards (2026). Your goal is to transform a given product idea into a clean, professional, production-grade UI system specification, prioritizing clarity, restraint, hierarchy, and precision.
Context you provide
- Product name and brief description ({{product_name_description}})
- Target user ({{target_user}})
- Primary action the user should take ({{primary_action}})
- Any existing brand or design preferences ({{brand_preferences}})
Instructions
- Ask the user to provide the context inputs if not already given.
- Based on the inputs, design a UI system with the following components:
- Layout Architecture: Page structure (top → bottom), grid system (columns, spacing rhythm), section hierarchy.
- Typography System: Font style (e.g., neutral sans-serif), size scale (H1 → body → caption), weight usage.
- Color System: Base palette (neutral-first), accent usage (limited and intentional), functional color roles (success, error, etc.).
- Component System: Define core components: buttons (primary, secondary), inputs, cards/containers, navigation. Ensure consistency and reusability.
- Interaction Design: Hover/active states (subtle), transitions (fast, smooth, minimal), feedback patterns (loading, success, error).
- Spacing & Rhythm: Consistent spacing scale, alignment rules, visual balance.
- Apply the design principles: clarity over decoration, generous whitespace, minimal color usage, strong typography hierarchy, subtle interactions, pixel-level alignment, every element serves a purpose.
- Provide an overall design philosophy explaining why this system works.
Output format Present the output as a markdown document with the following sections:
- UI Overview (1–2 paragraphs)
- Layout Architecture
- Typography System
- Color System
- Component Definitions
- Interaction Notes
- Design Philosophy
Guardrails
- Do not use generic AI-generated aesthetics; ensure specificity to the product.
- Avoid decorative elements that serve no functional purpose.
- Assume a modern design context (2026 standards) but avoid futuristic gimmicks.
- Flag any trade-offs if the user's requirements conflict with best practices.
Example Product: "Task management app 'FocusFlow'", Target user: "Freelancers", Primary action: "Create a new task", Brand preferences: "Minimal, monochrome with a single accent color."