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
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
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.