ChatGPT Prompts for Designers

Create a comprehensive design brief for a {{project_type}} project.

Client/stakeholder: {{client_name}}
Business objective: {{business_objective}}
Target audience: {{target_audience}}
Brand guidelines: {{brand_constraints}}
Timeline: {{timeline}}
Budget tier: {{budget_tier}}

The brief should include:
1. Project overview (2-3 sentences)
2. Problem statement — what user/business problem this design solves
3. Target audience profile with key behaviors and pain points
4. Scope and deliverables (be specific: screens, components, assets)
5. Design requirements and constraints (platforms, existing systems, technical limitations)
6. Success metrics — how we will measure if this design works
7. Competitive/inspirational references (suggest 3 based on {{industry}})
8. Timeline with milestones (discovery, wireframes, visual design, handoff)
9. Out of scope (explicitly state what this project does NOT include)

Write in clear, actionable language. Avoid subjective terms like "modern" or "clean" — use specific, measurable descriptors.

Conduct a UX audit of {{product_name}} focusing on the {{flow_name}} flow. Platform: {{platform}}.

Current flow steps:
{{flow_steps}}

User persona: {{user_persona}}
Key user goal: {{user_goal}}

Evaluate each step against:
1. **Usability heuristics** (Nielsen's 10) — flag specific violations
2. **Cognitive load** — identify steps that require too much mental effort
3. **Error prevention and recovery** — how does the flow handle mistakes?
4. **Accessibility** — WCAG {{wcag_level}} compliance issues
5. **Mobile experience** — touch targets, thumb zones, responsive behavior
6. **Copy and microcopy** — clarity, tone consistency, action-oriented labels

For each issue found:
- Severity (critical / major / minor / cosmetic)
- Screenshot location (describe which screen/element)
- Specific recommendation with reasoning
- Effort estimate (quick fix / medium / major redesign)

Prioritize findings by impact-to-effort ratio.

Generate a color palette for {{project_type}} targeting {{target_audience}}.

Brand personality: {{brand_personality}}
Industry: {{industry}}
Existing brand colors (if any): {{existing_colors}}
Mood/emotion to evoke: {{target_emotion}}

Provide:
1. **Primary palette** (3 colors): hex values, usage rationale, and where each is used (backgrounds, text, CTAs)
2. **Secondary palette** (2-3 colors): supporting colors for accents, illustrations, data viz
3. **Neutral palette** (4 shades): backgrounds, borders, disabled states, body text
4. **Semantic colors**: success, warning, error, info — with hex values
5. **Accessibility check**: contrast ratios for all text/background combinations against WCAG {{wcag_level}}
6. **Dark mode variant**: adjusted palette that maintains brand recognition and meets contrast requirements
7. **Usage examples**: describe how the palette applies to a card component, a form, and a dashboard

Include CSS custom properties (HSL format) ready to paste into a stylesheet.

Perform an accessibility review of the {{component_or_flow}} in {{product_name}}. Platform: {{platform}}. Target: WCAG {{wcag_level}} conformance.

Component/flow description:
{{description}}

Current implementation details:
{{implementation_notes}}

Review against these categories:
1. **Perceivable**: Color contrast, text alternatives, captions, content structure
2. **Operable**: Keyboard navigation, focus management, touch targets (min 44x44px), motion/animation
3. **Understandable**: Error messages, labels, predictable behavior, reading level
4. **Robust**: Semantic HTML, ARIA usage (check for misuse), screen reader testing notes

For each issue:
- WCAG success criterion violated (e.g., 1.4.3 Contrast)
- Current behavior vs. expected behavior
- Code fix or design change needed (be specific)
- Impact on users with specific disabilities

Also provide:
- Recommended testing tools for {{platform}}
- Manual testing checklist (what automated tools cannot catch)
- Screen reader announcement script for the happy path

Write documentation for the {{component_name}} component in our design system.

Component purpose: {{purpose}}
Variants: {{variants}}
Platform: {{platform}}
Design tool: {{design_tool}}
Code framework: {{code_framework}}

Documentation should include:
1. **Overview**: When and why to use this component (and when NOT to use it — suggest alternatives)
2. **Anatomy**: Label each part of the component (e.g., icon, label, helper text, container)
3. **Variants and states**: Describe each variant with its use case. States: default, hover, active, focus, disabled, error, loading
4. **Props/properties table**: Name, type, default value, description
5. **Spacing and sizing**: Padding, margins, and min/max dimensions using our {{spacing_scale}} scale
6. **Accessibility**: Required ARIA attributes, keyboard behavior, screen reader expectations
7. **Do/Don't examples**: 3 correct usages and 3 common misuses with explanations
8. **Content guidelines**: Character limits, tone, capitalization rules for any text within the component

Write for a mixed audience of designers and developers.

Map the complete user flow for {{flow_name}} in {{product_name}}.

User persona: {{persona}}
Entry point: {{entry_point}}
Success state: {{success_state}}
Key decision points: {{decision_points}}

For each step in the flow, provide:
1. Step number and name
2. Screen/page description
3. User action (what they click, type, or swipe)
4. System response (what happens after the action)
5. Data needed (what info must the user provide or the system display)
6. Potential drop-off risk and mitigation

Also include:
- **Error paths**: What happens when things go wrong at each step (network error, validation failure, permission denied)
- **Edge cases**: Empty states, first-time vs. returning user, maximum data scenarios
- **Alternate paths**: Shortcuts or alternative routes to the same success state
- **Metrics to track**: One key metric per step (e.g., completion rate, time-on-step, error rate)

Format as a numbered flow that can be translated into a Figma flowchart. Include a text-based diagram using arrows (-->) to show the flow visually.