前言¶
移動端產品從想法到可演示界面，常見路徑是畫低保真線框、再交給設計出稿、最後前端搭殼子。評審和立項階段往往只需要「看起來像真 App」的交互殼，卻又要佔掉設計和前端不少時間。若你已經在用帶 Skills 的 AI 編碼助手，可以把「按 App 名稱出一版高保真手機頁」交給專門 Skill，而不是每次從零寫 Tailwind 和 Tab 結構。
下面介紹 SkillHub 上的 手機端-高保真產品原型交付（@user_52a81e7a/uiux-prototype-generator），說明它做什麼、如何安裝，以及典型觸發方式。
這是什麼¶
手機端-高保真產品原型交付 是 SkillHub 社區來源（community）的技能，座標 @user_52a81e7a/uiux-prototype-generator，當前版本 v1.0.8，分類爲 design-media，發佈者爲 user_52a81e7a（SkillHub 頁面標註作者爲江楓）。官方頁面標明 requires_api_key=false，不依賴額外 API Key。
定位在官方簡介中寫得很直接：扮演產品經理、UI/UX 設計師與前端工程師三重角色，基於 ROSES 框架，輸入任意 APP 名稱，輸出 iPhone 15 Pro 視口尺寸（375×812） 的高保真移動端 HTML 原型。技術棧爲 Tailwind CSS 與 FontAwesome。
核心功能¶
以下能力均來自 SkillHub 官方簡介與技能頁，未在資料中出現的細節不展開。
- 固定手機畫布：按 375×812 生成頁面，貼近 iPhone 15 Pro 邏輯分辨率，便於瀏覽器內預覽和截圖評審。
- 四個核心界面：登錄、主頁、發現、個人中心，覆蓋常見消費類 App 的主路徑。
- 視覺與交互殼：玻璃擬態、多層陰影、iOS 風格狀態欄、底部 Tab 導航；採用 iframe 架構、漣漪動畫，並使用 真實圖片（而非純佔位色塊）。
- 按名稱定製：以你提供的 APP 名稱爲輸入，由 Skill 推導界面文案與結構，而不是固定模板名。
- 自然語言觸發：官方列出的觸發詞包括「手機端原型設計」「高保真原型」「APP 原型設計」「APP 原交互設計」「生成 APP 界面」「APP 界面」「手機交互原型」等，在對話裏用這些表述即可喚起技能邏輯。
SkillHub 統計（以抓取資料爲準）：評分 100000，下載 4231 次。
安裝與啓用¶
SkillHub 推薦讓 AI 按官方安裝文檔操作，或在本機用 skillhub CLI 安裝到當前 Agent 的 skills 目錄。
方式一：對話安裝（官方頁提示）¶
將下面提示發給支持 SkillHub 的 AI 助手即可：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_52a81e7a/uiux-prototype-generator`。
方式二：CLI 安裝¶
先確認是否已安裝 SkillHub CLI：
command -v skillhub && skillhub --version
未安裝時，可按官方文檔執行完整安裝（示例爲文檔中的推薦命令）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安裝技能時，必須用 --dir 指向當前 Agent 的 skills 目錄，否則默認落在 ./skills/，可能不會被助手加載。官方文檔給出的常見路徑包括：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
示例（將 <skills 目錄> 換成你環境對應路徑）：
skillhub install @user_52a81e7a/uiux-prototype-generator --dir <skills 目錄>
安裝後按你所用客戶端要求重啓或刷新技能列表。Cursor、Claude Code、Codex 等差異僅在於 skills 目錄位置；安裝命令本身以 SkillHub 文檔爲準。
典型用法¶
啓用技能後，在對話中說明要做的移動端 App，並帶上官方觸發詞之一。可復現的示例表述如下：
用手機端原型設計，爲「每日記賬」生成高保真 APP 界面：iPhone 15 Pro 尺寸，包含登錄、主頁、發現、個人中心，玻璃擬態風格和底部 Tab。
經過上面的步驟，助手應按 Skill 約定產出可在瀏覽器打開的 HTML 原型（含 iframe 結構與 Tailwind + FontAwesome 資源引用）。具體文件名與目錄結構由 Skill 內 SKILL.md 指導生成，以你本地安裝後的技能包爲準。
若需檢索或覈對版本，可在 SkillHub 搜索：
skillhub search uiux-prototype-generator
適用場景與注意¶
適合誰
- 產品經理或獨立開發者，需要在立項、路演、內審前快速展示移動端信息架構與視覺層次。
- 前端或全棧同學，希望先拿到一版可點擊的 HTML 殼，再決定是否接入真實 API 或設計系統。
限制與注意
- 輸出是 高保真 HTML 原型，不是生產級 React Native / Flutter 工程；上線前仍需設計規範、無障礙與性能等工程化工作。
- 界面固定爲官方描述的 四個核心頁 與 375×812 畫布；超出該範圍的複雜業務流需你在對話中補充，Skill 是否擴展以實際生成爲準。
- 使用真實圖片時，注意版權與圖源；評審環境若離線，需自行確認外鏈資源是否可訪問。
- 資料中 安裝 計數爲 0、下載 爲 4231，反映的是 SkillHub 側統計口徑，與你本機是否已安裝無關。
結尾¶
手機端-高保真產品原型交付 把「輸入 APP 名稱 → 輸出 iPhone 尺寸、四 Tab 高保真 HTML」收斂成一條 Skill 工作流，適合在設計和前端排期緊張時先拿出一版可演示界面。安裝與座標以 SkillHub 爲準。
- 技能 API 地址：https://api.skillhub.cn/user_52a81e7a/uiux-prototype-generator
- SkillHub 頁面：https://www.skillhub.cn/skills/user_52a81e7a/uiux-prototype-generator
- 安裝說明：https://skillhub.cn/install/skillhub.md
