技能概述
Mobile Onboarding 技能生成一個三屏手機引導流程，展示喺單一 HTML 頁面上：三個手機框架並排排列，每部手機含狀態欄（時間、電量、信號）、主視覺插圖/圖標、標題 + 輔助段落、3 點分頁指示器、主 CTA（全寬 pill 按鈕）、"Skip" 或替代操作。最後一部手機為註冊/繼續選項頁面。使用強烈排版、柔和漸變、可訪問對比度。
觸發關鍵字
- mobile onboarding、ios onboarding、android onboarding、phone signup、app onboarding、移动端引导
什麼時候用
- App 新用戶引導流程
- 手機註冊頁面
- 產品功能介紹滑動頁
- 移動應用 demo 展示
- 用戶體驗流程原型
使用方法
自然語言觸發
帮我做一个手机引导页面
做一個 iOS onboarding flow
整一個 app signup 頁面
指定技能
用 mobile-onboarding 技能生成一個 meditation app 嘅 3 屏引導
標準工作流程
- 讀 DESIGN.md — 使用其顏色、字型、組件 token
- 識別應用 + 目標用戶 — 從 brief 提取 app 類型、受眾
- 三屏設計：
- Screen 1（Splash / Welcome） — 主視覺插圖 + 歡迎標題 + 一句話價值主張 + 3 點分頁（第 1 點 active）+ "Get Started" CTA + "Skip" 右上角
- Screen 2（Value Props） — 插圖/圖標 + 3 個價值主張（icon + 標題 + 簡短描述）+ 3 點分頁（第 2 點 active）+ "Next" CTA
- Screen 3（Sign-in / Continue） — 註冊選項（Email / Google / Apple / Phone）+ 條款說明 + 3 點分頁（第 3 點 active）+ "Continue" CTA
- 每部手機框架：
- 狀態欄（時間、電池、信號圖標）
- 主視覺區域
- 標題 + 段落
- 分頁點
- 主 CTA（全寬 pill 按鈕）
- 右上角 "Skip"
- 視覺風格 — 柔和漸變背景、強烈排版層次、可訪問對比度
輸出格式
單文件 HTML，inline CSS。三個手機框架並排展示，響應式佈局。每個手機框架有手機外殼視覺效果。
自檢清單
- 三屏敘事連貫（Welcome → Value → Sign-in）
- 狀態欄細節完整（時間、電池、信號）
- 分頁點正確標示 active 狀態
- CTA 按鈕一致（全寬 pill 形狀）
- 最後一屏包含多種註冊方式
- 對比度符合 accessibility 標準
實際例子
例子 1：冥想 App 引導
用戶：「幫我設計一個 meditation app 嘅 3 屏引導」
生成：
- Screen 1：平靜插圖 + "Find your calm" + "Daily meditation made simple"
- Screen 2：3 個價值主張（Guided sessions / Sleep stories / Progress tracking）
- Screen 3：Sign in with Email / Google / Apple
例子 2：健身 App 引導
用戶：「用 mobile-onboarding 做一個 fitness app 嘅 onboarding」
生成：
- Screen 1：運動插圖 + "Your personal trainer" + 一句話 value prop
- Screen 2：價值主張（Workout plans / Nutrition tips / Community）
- Screen 3：Sign up + social login options