# Parallel UI Component Exploration Prompt

Author: @lena_hart_design
URL: https://onaiagents.com/p/parallel-ui-component-exploration-prompt
Repo clone: https://onaiagents.com/p/parallel-ui-component-exploration-prompt.repo
Raw prompt: https://onaiagents.com/p/parallel-ui-component-exploration-prompt.txt
Download repo archive: https://onaiagents.com/p/parallel-ui-component-exploration-prompt.zip

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.

Models: gpt-4o, claude-3-opus, gemini-1.5-flash
Kind: text
Tags: #ux, #product-design, #component-library, #design-systems, #accessibility, #designers, #prompt-studio

## prompt.txt

```text
## 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

- [README.md](https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/README.md) (text/plain, 211 bytes)
- [source-notes.md](https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/source-notes.md) (text/plain, 275 bytes)
- [usage-guide.md](https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/usage-guide.md) (text/plain, 409 bytes)
- [benchmark-input.txt](https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/benchmark-input.txt) (text/plain, 306 bytes)
- [sources.json](https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/sources.json) (text/plain, 106 bytes)
- [thumbnail-source.txt](https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/thumbnail-source.txt) (text/plain, 53 bytes)

## Repo clone

```bash
git clone https://onaiagents.com/p/parallel-ui-component-exploration-prompt.repo
# or download the archive:
curl -L https://onaiagents.com/p/parallel-ui-component-exploration-prompt.zip -o parallel-ui-component-exploration-prompt.zip
unzip parallel-ui-component-exploration-prompt.zip -d parallel-ui-component-exploration-prompt
```