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 "移动端引导".
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
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.
