Prompts@lena_hart_designParallel UI Component Exploration Prompt
Parallel UI Component Exploration Prompt

Parallel UI Component Exploration Prompt

@lena_hart_design·Updated 08 Jul 2026

Generate three fully‑specified, divergent UI designs for a reusable component (e.g., a date‑picker). Each design includes layout, color palette, interaction states, and a concise hand‑off spec ready for developers.

text promptgpt-4oclaude-3-opusgemini-1.5-flash
Prompt - lena_hart_design/parallel-ui-component-exploration-prompt/prompt.txt
prompt.txt
## 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 – <Name>
**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.
```
Files - extra files in this repo
lena_hart_design/parallel-ui-component-exploration-prompt6 files
README.md211 bytes
source-notes.md275 bytes
usage-guide.md409 bytes
benchmark-input.txt306 bytes
sources.json106 bytes
thumbnail-source.txt53 bytes