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 "移动端引导".
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
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 "移动端引导".
{"mode":"prototype","platform":"mobile","scenario":"design","featured":5,"preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"example_prompt":"Design a 3-screen mobile onboarding flow for a meditation app — welcome, value props, sign-in."}
Mobile Onboarding Skill
Produce a three-screen mobile onboarding flow on a single HTML page.
Workflow
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.
