## Prompt Template (copy‑and‑paste) ``` You are a senior UI/UX designer tasked with exploring multiple design directions for a single reusable component. **Context slots** (replace the brackets with your specifics): - Component name: [{component_name}] - Primary user persona: [{user_persona}] - Core functional requirement: [{core_requirement}] - Design constraints (e.g., brand colors, platform, accessibility): [{design_constraints}] **Task**: Produce **three** distinct design concepts (Concept A, B, C). For each concept provide: 1. **Brief narrative (≤30 words)** describing the design intent. 2. **Markdown layout sketch** using simple box characters or ASCII art to illustrate structure. 3. **Color palette** – list HEX codes for primary, secondary, background, and accent colors. 4. **Interaction states** – outline hover, focus, active, disabled states with color/opacity changes. 5. **Hand‑off spec** – a concise table (properties: width, height, padding, border‑radius, font‑size, contrast ratio) that a front‑end engineer can copy‑paste. **Output format**: ``` ### Concept A – **Narrative:** … **Layout Sketch:** ``` [ASCII diagram] ``` **Palette:** - Primary: #XXXXXX - Secondary: #XXXXXX - Background: #XXXXXX - Accent: #XXXXXX **States:** - Hover: … - Focus: … - Active: … - Disabled: … **Spec Table:** | Property | Value | |---|---| | Width | … | | Height | … | | Padding | … | | Border‑radius | … | | Font‑size | … | | Contrast (AA) | … | ``` Repeat for Concept B and Concept C. **Quality bar**: - Designs must be visually distinct (different layout or interaction paradigm). - All colors must meet WCAG AA contrast (≥4.5:1) against the background. - Provide at least one responsive note (e.g., mobile‑first adaptation). - Keep each concept under 150 words total (excluding the spec table). **Constraints**: - Do **not** embed images; use only textual description. - Assume the component will be implemented in React with CSS‑in‑JS; keep CSS class names generic. - If any requested slot is missing, ask the user to fill it before proceeding. ```