{"slug":"parallel-ui-component-exploration-prompt","title":"Parallel UI Component Exploration Prompt","description":"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.","author":{"username":"lena_hart_design","name":"Lena Hart"},"url":"https://onaiagents.com/p/parallel-ui-component-exploration-prompt","repo_clone_url":"https://onaiagents.com/p/parallel-ui-component-exploration-prompt.repo","raw_url":"https://onaiagents.com/p/parallel-ui-component-exploration-prompt.txt","markdown_url":"https://onaiagents.com/p/parallel-ui-component-exploration-prompt.md","archive_url":"https://onaiagents.com/p/parallel-ui-component-exploration-prompt.zip","models":["gpt-4o","claude-3-opus","gemini-1.5-flash"],"kind":"text","tags":["ux","product-design","component-library","design-systems","accessibility","designers","prompt-studio"],"stars":6,"views":0,"prompt":"## Prompt Template (copy‑and‑paste)\n```\nYou are a senior UI/UX designer tasked with exploring multiple design directions for a single reusable component.\n\n**Context slots** (replace the brackets with your specifics):\n- Component name: [{component_name}]\n- Primary user persona: [{user_persona}]\n- Core functional requirement: [{core_requirement}]\n- Design constraints (e.g., brand colors, platform, accessibility): [{design_constraints}]\n\n**Task**: Produce **three** distinct design concepts (Concept A, B, C). For each concept provide:\n1. **Brief narrative (≤30 words)** describing the design intent.\n2. **Markdown layout sketch** using simple box characters or ASCII art to illustrate structure.\n3. **Color palette** – list HEX codes for primary, secondary, background, and accent colors.\n4. **Interaction states** – outline hover, focus, active, disabled states with color/opacity changes.\n5. **Hand‑off spec** – a concise table (properties: width, height, padding, border‑radius, font‑size, contrast ratio) that a front‑end engineer can copy‑paste.\n\n**Output format**:\n```\n### Concept A – <Name>\n**Narrative:** …\n**Layout Sketch:**\n```\n[ASCII diagram]\n```\n**Palette:**\n- Primary: #XXXXXX\n- Secondary: #XXXXXX\n- Background: #XXXXXX\n- Accent: #XXXXXX\n**States:**\n- Hover: …\n- Focus: …\n- Active: …\n- Disabled: …\n**Spec Table:**\n| Property | Value |\n|---|---|\n| Width | … |\n| Height | … |\n| Padding | … |\n| Border‑radius | … |\n| Font‑size | … |\n| Contrast (AA) | … |\n```\nRepeat for Concept B and Concept C.\n\n**Quality bar**:\n- Designs must be visually distinct (different layout or interaction paradigm).\n- All colors must meet WCAG AA contrast (≥4.5:1) against the background.\n- Provide at least one responsive note (e.g., mobile‑first adaptation).\n- Keep each concept under 150 words total (excluding the spec table).\n\n**Constraints**:\n- Do **not** embed images; use only textual description.\n- Assume the component will be implemented in React with CSS‑in‑JS; keep CSS class names generic.\n- If any requested slot is missing, ask the user to fill it before proceeding.\n```","files":[{"filename":"README.md","kind":"text","mime":"text/plain","size":211,"raw_url":"https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/README.md"},{"filename":"source-notes.md","kind":"text","mime":"text/plain","size":275,"raw_url":"https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/source-notes.md"},{"filename":"usage-guide.md","kind":"text","mime":"text/plain","size":409,"raw_url":"https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/usage-guide.md"},{"filename":"benchmark-input.txt","kind":"text","mime":"text/plain","size":306,"raw_url":"https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/benchmark-input.txt"},{"filename":"sources.json","kind":"text","mime":"text/plain","size":106,"raw_url":"https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/sources.json"},{"filename":"thumbnail-source.txt","kind":"text","mime":"text/plain","size":53,"raw_url":"https://onaiagents.com/api/site/raw/parallel-ui-component-exploration-prompt/thumbnail-source.txt"}],"updated_at":"2026-07-08T10:45:07.982490"}