技能概述
Mobile App 技能生成一個 iPhone 15 Pro 像素精確框架入面嘅手機應用屏幕原型。Seed 模板已經內置咗 Dynamic Island、狀態欄 SVG icons、home indicator、side rails 同 tab bar，唔使重新實現。
6 種屏幕原型：Feed / Detail / Onboarding / Profile / Checkout / Focus，每個屏幕只做一件事。
觸發關鍵字
- mobile app、ios app、android app、phone screen、app UI、app mockup、移動端、手機 app
什麼時候用
- 手機應用原型設計
- iOS / Android app mockup
- 手機界面概念驗證
- 移動應用 UX 展示
- 新手引導流程
使用方法
自然語言觸發
帮我做一个 mobile app 原型
整一個 iOS app mockup
做一個手機 app 界面
選擇屏幕原型
| 場景 | 原型 |
|---|---|
| feed、inbox、timeline、messages | A — Feed |
| article、post、item、product detail | B — Detail |
| sign-up、welcome、walkthrough | C — Onboarding |
| profile、account、bio | D — Profile |
| checkout、payment、form | E — Checkout |
| timer、map、single big number | F — Focus |
工作流程
- 讀
template.html— Dynamic Island / status bar / home indicator 已預置 - 讀
layouts.md— 6 種 screen archetype - 讀 DESIGN.md — 映射 6 個
:root變量 - 拷貝 seed + 揀 archetype + 粘貼填充
- 自檢：frame 完整、tap target ≥ 44px、accent ≤ 2 次
輸出格式
單文件 HTML，iPhone 15 Pro 設備框架，包含：
- Dynamic Island
- 狀態欄 SVG icons
- Home indicator
- 側邊導軌
- Tab bar（部分原型可選）
硬規則
- 電話框架係真實嘅 — 唔好重寫 frame
- 單一屏幕，單一任務 — 唔做多 tab tours
- Accent 預算 = 2 — 一個 active tab + 一個 primary action
- 數字用 mono（
.numclass） - 標題用 serif（
var(--font-display)） - 無外部圖片 — 用
.ph-img占位
實際例子
例子 1：社交 Feed 頁面
用戶：「做一個社交 app 嘅 feed 頁面，類似 Instagram」
生成 Feed archetype：
- 頂部：logo + notifications icon
- Feed cards：user avatar + name + image placeholder + action bar
- 底部 tab bar：Home / Search / Post / Activity / Profile
例子 2：電商 Checkout
用戶：「整一個電商 app 嘅 checkout 頁面」
生成 Checkout archetype：
- Order summary
- Shipping address
- Payment method
- Place order button