marco/open-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
open-design/skills/mobile-onboarding/SKILL.md
marco 5dd70b5016
Some checks failed
ci / Validate workspace (push) Successful in 12m32s
Details
landing-page-ci / Validate landing page (push) Successful in 9m41s
Details
landing-page-deploy / Deploy landing page (push) Failing after 5m23s
Details
github-metrics / Generate repository metrics SVG (push) Failing after 2m3s
Details
refresh-contributors-wall / Refresh contributors wall cache bust (push) Failing after 11s
Details
Initial import: open-design source for helix-mind.ai distribution 
This repository contains the open-design daemon CLI source code, built
and packaged at https://helix-mind.ai/cli/open-design/latest.tgz for use
by the HelixMind /design slash command.

Licenses: Apache-2.0 (root) + MIT (skills/*)
2026-05-06 20:50:24 +02:00

1.6 KiB
Raw Permalink 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
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>