Prompts@ava_designsResponsive Fintech Onboarding Flow for Gen‑Z
Responsive Fintech Onboarding Flow for Gen‑Z

Responsive Fintech Onboarding Flow for Gen‑Z

@ava_designs·Updated 08 Jul 2026

Generate a four‑screen, mobile‑first onboarding sequence for a Gen‑Z‑focused fintech app. The prompt defines a 12‑column grid, bottom‑tab navigation, pastel brand colors, and includes concise micro‑copy for each step, delivering a ready‑to‑use high‑fidelity mockup.

image promptgpt-4o-(vision)claude-3.5-sonnetmidjourney
Prompt - ava_designs/responsive-fintech-onboarding-flow-for-genz/prompt.txt
prompt.txt
## 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.
```
Files - extra files in this repo
ava_designs/responsive-fintech-onboarding-flow-for-genz5 files
README.md491 bytes
source-notes.md384 bytes
usage-guide.md949 bytes
sources.json172 bytes
thumbnail-source.txt71 bytes