mobile-onboarding
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 "移动端引导".
来源信息
- 仓库
- nexu-io/open-design
- 最近来源活动
- 2026年7月27日 14:02
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 96,674
- 分支
- 11,234
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
2 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- 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":"prototype","platform":"mobile","scenario":"design","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"craft":{"requires":["state-coverage","animation-discipline","accessibility-baseline","form-validation","laws-of-ux"]},"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
1. Read DESIGN.md.
2. Identify the app + audience.
3. 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.
4. Last phone is the sign-in / continue-with options screen.
5. Strong typography, gentle gradients, accessible contrast.
## Output contract
```
<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
<!doctype html>...</artifact>
```
在 GitHub 查看