Tom Huang
6f6bf31dd2
* Refactor project name from "Open Claude Design" to "Open Design" - Updated project name in package.json, package-lock.json, and README files. - Changed CLI commands and references from "ocd" to "od". - Adjusted file structure references in documentation and code to reflect new naming conventions. - Enhanced .gitignore to include new runtime data files. - Updated metadata in LICENSE file to match new project name. * Add contributing guidelines in English and Chinese - Introduced CONTRIBUTING.md and CONTRIBUTING.zh-CN.md to provide clear instructions for contributors. - Outlined contribution types, local setup instructions, and merging criteria for skills and design systems. - Enhanced README files to reference the new contributing guidelines.
53 lines
1.4 KiB
Markdown
53 lines
1.4 KiB
Markdown
---
|
|
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
|
|
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
|
|
|
|
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>
|
|
```
|