Design systems, wireframes, and user experience that actually works

Design a complete colour system for [BRAND/PRODUCT NAME]. Brand personality: [3 adjectives that describe the brand] Industry: [INDUSTRY — affects colour psychology expectations] Audience: [WHO USES THIS PRODUCT] Existing colours (if any): [PASTE HEX CODES OR DESCRIBE] Dark mode needed: [yes / no] Deliver: 1. **Primary palette** — 5 shades of main brand colour (50-900 scale) 2. **Neutral palette** — 9 greys (50-900) 3. **Semantic colours** — success, warning, error, info (with shades) 4. **Text colours** — primary, secondary, disabled, inverse 5. **Background tokens** — base, surface, overlay, card For each colour: - Hex value - WCAG contrast ratio against white and dark bg - Use case recommendation CSS custom properties format + Tailwind config format

Create a UX research plan for [PRODUCT / FEATURE]. Context: - What we're trying to learn: [RESEARCH QUESTION] - Stage of product: [discovery / validation / optimisation] - Timeline: [WEEKS] - Budget: [low / medium / high] - Team size: [PEOPLE AVAILABLE] Research plan should include: 1. **Research goals** (3-5 specific questions to answer) 2. **Methods** — which research methods and why (usability testing, interviews, surveys, analytics) 3. **Participant criteria** — who to recruit and how 4. **Discussion guide** — key questions for user interviews 5. **Metrics** — how we'll measure success 6. **Deliverables** — what outputs this produces 7. **Risk** — what could go wrong and how to mitigate Format this as a research brief I can share with stakeholders.

Write UX copy (microcopy) for [FEATURE / SCREEN / COMPONENT]. Context: - What the user is trying to do: [USER GOAL] - Where they are in the flow: [onboarding / mid-task / error state / empty state / confirmation] - User's likely emotional state: [excited / frustrated / unsure / in a hurry] - Product voice: [friendly / professional / playful / minimal / trustworthy] Write copy for: 1. [Screen/component title] 2. [Body text / instruction] 3. [CTA button] (and what NOT to write) 4. [Error message] — specific, helpful, not blaming 5. [Empty state] — helpful, not depressing 6. [Confirmation / success message] 7. [Tooltip text] Rule: every word must earn its place. Cut anything users can infer.

Review this design and give me a structured UX/UI critique. [DESCRIBE THE DESIGN IN DETAIL or list the screens/flows] Product type: [WHAT KIND OF APP/WEBSITE IS THIS] Target user: [WHO USES THIS] Primary goal of this screen: [WHAT SHOULD USERS DO HERE] Evaluate: 1. **Visual hierarchy** — does the eye go where it should? 2. **Clarity** — is the purpose of each element immediately clear? 3. **Friction** — what makes this harder to use than it should be? 4. **Consistency** — does it match standard conventions and itself? 5. **Accessibility** — obvious visual accessibility concerns 6. **Mobile usability** — tap targets, spacing, scrolling 7. **Empty/error states** — are they handled? Output: - Top 3 critical issues (highest impact to fix first) - 5 medium improvements - What's working well (keep these) - One redesign suggestion for the biggest issue

Create a component library specification for [PRODUCT NAME]. Stack: [React / Vue / Web Components / Figma-first] Existing design tools: [Figma / Sketch / none] Team size: [designers + developers] Product type: [SaaS dashboard / marketing site / mobile app / e-commerce] Define: 1. **Design tokens** — spacing scale, border radius scale, shadow scale 2. **Typography scale** — 6 sizes with use cases 3. **Component inventory** — list of all components needed 4. **Component anatomy** — for [BUTTON / INPUT / CARD / MODAL], define: - States (default, hover, active, disabled, error, loading) - Variants (primary, secondary, destructive, ghost) - Props/API - Do's and don'ts 5. **Naming convention** — file and component naming rules 6. **Documentation template** — what each component's doc page includes

Create [NUMBER] user personas for [PRODUCT / SERVICE]. What I know about my users: [PASTE ANY RESEARCH, INTERVIEWS, ANALYTICS, OR ASSUMPTIONS] Context: - Product: [WHAT IT DOES] - Stage: [pre-launch / early users / growth] - Main use cases: [HOW PEOPLE USE IT] For each persona: 1. Name, age, role, location (make them real but not stereotypes) 2. **Goals** — primary and secondary goals related to your product 3. **Frustrations** — what about the current situation bothers them 4. **Behaviours** — how they research, buy, and use tools like yours 5. **Quote** — one sentence that captures their mindset 6. **How they'd use your product** — specific scenario 7. **What would make them churn** — what would cause them to leave Format: one A4 card per persona (concise, visual-friendly)

Create a user journey map for [PERSONA TYPE] trying to [ACHIEVE GOAL] using [PRODUCT/SERVICE]. Journey scope: [end-to-end from awareness → advocacy / specific feature flow] For each stage of the journey, map: 1. **Stage name** (Awareness / Consideration / Onboarding / Usage / Renewal) 2. **Actions** — what the user does 3. **Thoughts** — what they're thinking 4. **Emotions** — feeling (rate 1-5, frustrated to delighted) + why 5. **Pain points** — what goes wrong or causes friction 6. **Opportunities** — what could be improved here 7. **Touchpoints** — what channels/interfaces they interact with Output format: - Table format (easy to put in a presentation) - Summary: top 3 highest-impact opportunities found - Recommended next research questions

Write a design brief for [PROJECT / FEATURE]. Project context: - What we're designing: [DESCRIPTION] - Business goal: [WHAT BUSINESS OUTCOME DOES THIS SUPPORT] - User goal: [WHAT DOES THE USER WANT TO ACCOMPLISH] - Success metric: [HOW WILL WE KNOW IT WORKED] Design constraints: - Platform: [web / iOS / Android / all] - Brand guidelines: [exist / in progress / flexible] - Technical constraints: [CMS / existing component library / specific tech] - Timeline: [WEEKS for design] - Budget: [DESIGN RESOURCES AVAILABLE] Brief should include: 1. Background & context (why this project) 2. Problem statement (specific, user-centred) 3. Goals (business + user) 4. Out of scope (what we're NOT doing) 5. Success criteria 6. Key questions to answer in discovery 7. Deliverables expected from designer