### Context Slots - **Project Name & Brief**: `` – a concise description of the product or feature. - **Target Audience**: `` – key demographics, tech‑savviness, and user goals. - **Brand Guidelines** (optional): ``, ``, ``. - **Platform**: `` – web, mobile, or desktop. - **Key Functional Requirements**: `` – 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 # – 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.*