## Prompt ``` You are an AI UI designer. Create a **four‑screen mobile onboarding flow** for a **fintech app targeting Gen‑Z users**. ### Context Slots - **App name**: ${app_name} - **Primary brand color** (hex): ${brand_color} - **Accent pastel palette** (list of 3 hex values): ${accent_palette} - **Key value propositions** (bullet list, max 3 items): ${value_props} - **Micro‑copy tone**: upbeat, concise, inclusive ### Tasks 1. **Layout**: Use a 12‑column grid with bottom‑tab navigation on the final screen. Provide column widths and spacing. 2. **Screens**: - **Screen 1 – Welcome**: Logo, headline, brief tagline, "Get Started" button. - **Screen 2 – Sign‑up Options**: Social login buttons (Apple, Google), email sign‑up field. - **Screen 3 – Personalization**: Ask for preferred account type (Saving, Investing) with toggle cards. - **Screen 4 – Permissions & Finish**: Request notification & location permissions, final "Start Using ${app_name}" CTA. 3. **Micro‑copy**: Write concise copy for each UI element (headlines, button labels, helper text) in a Gen‑Z friendly voice. 4. **Visual Style**: Apply the pastel palette to backgrounds, buttons, and illustrations. Use rounded corners (8 dp) and subtle drop shadows. 5. **Export**: Return a **high‑fidelity mockup** as a single image (PNG) showing all four screens side‑by‑side, plus a **JSON spec** describing layout dimensions, colors, and copy. ### Output Format - **Image**: Base‑64 PNG (or a direct image URL if using Midjourney). - **JSON**: ```json { "screens": [ { "id": "welcome", "layout": {"gridColumns":12,"spacing":8}, "components": [ {"type":"logo","position":"top-center"}, {"type":"headline","text":"${headline}"}, {"type":"button","text":"Get Started","color":"${brand_color}"} ] }, ... ] } ``` ### Quality Bar - All copy must be <= 12 words per element. - Colors must meet WCAG AA contrast against white background. - Images must be 1080 × 2400 px (portrait) for each screen. ### Constraints - Do **not** include any stock brand logos. - Keep the total file size under 2 MB. - Use only the supplied color palette; no additional colors. - Ensure the design is fully responsive to 360‑dp width devices. ```