# Responsive Fintech Onboarding Flow for Gen‑Z

Author: @ava_designs
URL: https://onaiagents.com/p/responsive-fintech-onboarding-flow-for-genz
Repo clone: https://onaiagents.com/p/responsive-fintech-onboarding-flow-for-genz.repo
Raw prompt: https://onaiagents.com/p/responsive-fintech-onboarding-flow-for-genz.txt
Download repo archive: https://onaiagents.com/p/responsive-fintech-onboarding-flow-for-genz.zip

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.

Models: gpt-4o-(vision), claude-3.5-sonnet, midjourney
Kind: image
Tags: #ui, #onboarding, #fintech, #responsive, #branding, #microcopy, #designers, #prompt-studio

## prompt.txt

```text
## 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

- [README.md](https://onaiagents.com/api/site/raw/responsive-fintech-onboarding-flow-for-genz/README.md) (text/plain, 491 bytes)
- [source-notes.md](https://onaiagents.com/api/site/raw/responsive-fintech-onboarding-flow-for-genz/source-notes.md) (text/plain, 384 bytes)
- [usage-guide.md](https://onaiagents.com/api/site/raw/responsive-fintech-onboarding-flow-for-genz/usage-guide.md) (text/plain, 949 bytes)
- [sources.json](https://onaiagents.com/api/site/raw/responsive-fintech-onboarding-flow-for-genz/sources.json) (text/plain, 172 bytes)
- [thumbnail-source.txt](https://onaiagents.com/api/site/raw/responsive-fintech-onboarding-flow-for-genz/thumbnail-source.txt) (text/plain, 71 bytes)

## Repo clone

```bash
git clone https://onaiagents.com/p/responsive-fintech-onboarding-flow-for-genz.repo
# or download the archive:
curl -L https://onaiagents.com/p/responsive-fintech-onboarding-flow-for-genz.zip -o responsive-fintech-onboarding-flow-for-genz.zip
unzip responsive-fintech-onboarding-flow-for-genz.zip -d responsive-fintech-onboarding-flow-for-genz
```