vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-05-31 19:04:39 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
open-design/skills/mobile-onboarding/SKILL.md
Mohamed Abdallah bc9a49ff48
craft: add laws-of-ux guidance 
Adds the laws-of-ux craft guidance for generated UI work.
2026-05-07 20:02:26 +08:00

1.6 KiB
Raw Blame History

name description triggers od
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 "移动端引导".
mobile onboarding
ios onboarding
android onboarding
phone signup
app onboarding
移动端引导
mode platform scenario featured preview design_system craft example_prompt
prototype mobile design 13
type entry
html index.html
requires sections
true
color
typography
layout
components
requires
state-coverage
animation-discipline
accessibility-baseline
form-validation
laws-of-ux
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>