🖌️ AI‑Driven UI Concept Generator for Product Designers

### Context Slots
- **Project Name & Brief**: `<PROJECT_NAME>` – a concise description of the product or feature.
- **Target Audience**: `<AUDIENCE>` – key demographics, tech‑savviness, and user goals.
- **Brand Guidelines** (optional): `<BRAND_COLORS>`, `<BRAND_FONTS>`, `<BRAND_TONE>`.
- **Platform**: `<PLATFORM>` – web, mobile, or desktop.
- **Key Functional Requirements**: `<FEATURES>` – list of core interactions.

### Task
Generate a complete UI concept package that includes:
1. **Concept Overview** – 2‑3 sentence narrative of the visual direction.
2. **Mood Board** – suggested imagery style and vibe (described textually).
3. **Color Palette** – exactly three primary colors with HEX codes, meeting WCAG AA contrast against white.
4. **Typography** – primary and secondary font families with fallback stacks.
5. **Layout Sketches** – textual wireframe description for Home, Dashboard, and Settings screens (include hierarchy, component placement, and spacing guidelines).
6. **Component Library** – list of reusable UI components with brief style specs (buttons, inputs, cards, etc.).
7. **Accessibility Checklist** – bullet points ensuring color contrast, focus order, and ARIA labeling.
8. **Export Instructions** – a placeholder Figma file link format (`https://www.figma.com/file/PROJECT_ID/PROJECT_NAME`) and a short guide on how to translate the textual specs into a design file.

### Output Format (Markdown)
```markdown
# <PROJECT_NAME> – UI Concept
## 1. Concept Overview
...
## 2. Mood Board
...
## 3. Color Palette
| Role | HEX |
|------|------|
| Primary | #... |
| Accent  | #... |
| Background | #... |
## 4. Typography
- **Primary**: ...
- **Secondary**: ...
## 5. Layout Sketches
### Home Screen
- Header: ...
- Hero Section: ...
### Dashboard
- Sidebar: ...
- Main Panel: ...
### Settings
- Form Layout: ...
## 6. Component Library
- **Button**: ...
- **Input**: ...
## 7. Accessibility Checklist
- Contrast ratio ≥ 4.5:1 for text.
- ...
## 8. Export Instructions
[Figma File](https://www.figma.com/file/PROJECT_ID/PROJECT_NAME)
```

### Quality Bar
- **Visual Cohesion**: All elements must feel part of a unified brand identity.
- **Accessibility**: Must pass WCAG AA for contrast and be navigable via keyboard.
- **Scalability**: Components should be reusable across screens.
- **Clarity**: Descriptions must be unambiguous for hand‑off to design tools.

### Constraints
- Use **exactly three** primary colors.
- No more than **two font families**.
- Keep the layout description to **max 300 words** per screen.
- Provide **only textual output**; no image files.
- If brand guidelines are missing, infer a neutral palette and modern sans‑serif fonts.

---
*Prompt crafted from community insights on prompt engineering for designers.*