| name |
mobile-onboarding |
| description |
A multi-screen mobile onboarding flow rendered as three phone frames
side by side — splash, value-prop, sign-in. Status bar, swipe dots,
primary CTA. Use when the brief mentions "mobile onboarding", "iOS
onboarding", "phone signup", or "移动端引导".
|
| triggers |
mobile onboarding |
ios onboarding |
android onboarding |
phone signup |
app onboarding |
移动端引导 |
|
| od |
| mode |
platform |
scenario |
featured |
preview |
design_system |
craft |
example_prompt |
prototype |
mobile |
design |
13 |
| type |
entry |
html |
index.html |
|
| requires |
sections |
true |
color |
typography |
layout |
components |
|
|
| requires |
state-coverage |
animation-discipline |
accessibility-baseline |
form-validation |
|
|
Design a 3-screen mobile onboarding flow for a meditation app — welcome, value props, sign-in. |
|
Produce a three-screen mobile onboarding flow on a single HTML page.
- Read DESIGN.md.
- Identify the app + audience.
- Layout: three phone frames side by side. Each phone:
- Status bar (time, battery, signal).
- Hero artwork or icon.
- Headline + supporting paragraph.
- 3-dot pagination.
- Primary CTA (full-width pill button).
- "Skip" or alt action top-right.
- Last phone is the sign-in / continue-with options screen.
- Strong typography, gentle gradients, accessible contrast.
<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
<!doctype html>...</artifact>