前言¶
產品側常把 PRD 或口頭想法交給研發，研發再自己猜頁面結構、狀態與交互，評審時才發現信息缺口。反過來，設計稿若缺少設計系統說明和前端交接清單，實現階段仍要反覆對齊。下面介紹一個在 Agent 裏把「需求輸入」收斂爲「評審級原型 + 設計說明 + 交接材料」的 Skill，並說明其邊界與安裝方式。
這是什麼¶
PRD到UI原型設計專家團（座標 @user_cae83fba/design-ui-prototype-expert-pack）是 SkillHub 社區來源（community）、分類爲 design-media 的 Skill，當前版本 1.2.0，由發佈者 user_cae83fba 維護；SkillHub 頁面標註作者爲「小浣熊肖恩」。標籤 requires_api_key=false，不依賴額外 API Key。
一句話定位：把 PRD、需求說明或產品想法轉成可評審的 UI 原型、設計規範、設計系統和前端交接清單，並對已有原型做證據化質量評審。
核心功能¶
依據官方簡介，Skill 覆蓋以下交付與行爲（僅列已覈實表述）：
- 需求轉原型：從 PRD、需求說明或產品想法產出可評審 UI 原型與設計說明。
- 設計體系整理：輸出設計規範、設計系統，以及前端交接清單。
- 原型質量評審：對已有原型做「證據化」評審（須實際讀取原型文件；未讀取不得聲稱評審通過）。
- 信息不足時先補問：缺少關鍵信息時先追問，不用推測填充。
核心紅線（官方明確）：
- 交付物爲評審級原型與設計說明，不承諾生產級前端工程。
- 無實際讀取原型文件不得聲稱評審通過。
- 不適用：純視覺品牌設計（VI / Logo / 插畫）、真實用戶研究與可用性測試、已有完整前端工程的代碼級重構、法務與安全合規結論。
常見觸發場景：PRD 轉原型、線框圖設計、後臺或移動端頁面設計、設計系統整理、前端交接文檔、原型可用性評審、界面走查、設計 token 規範化。
安裝與啓用¶
Skill 基於通用 SKILL.md 格式。在 SkillHub 上安裝時，官方給出的提示是：讓 AI 按安裝文檔處理指定座標。
方式一：通過 AI 按官方提示安裝¶
將下面提示發給當前 Agent（Cursor、Claude Code 等均可按各自 Skills 機制落地）：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_cae83fba/design-ui-prototype-expert-pack`。
方式二：SkillHub CLI¶
先確認本機是否已有 CLI：
command -v skillhub && skillhub --version
未安裝時，可按 SkillHub 安裝文檔執行完整安裝（CLI + 默認 Skill）：
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_cae83fba/design-ui-prototype-expert-pack --dir <skills 目錄>
也可先搜索再安裝：
skillhub search design-ui-prototype-expert-pack
具體包名以 skillhub search 返回爲準；座標與頁面一致爲 @user_cae83fba/design-ui-prototype-expert-pack。
典型用法¶
官方頁面未給出固定對話模板，用法與觸發場景綁定。經過上面的步驟啓用 Skill 後，可按下列思路復現：
- PRD 轉原型：粘貼 PRD 或需求說明，說明目標端（如後臺、移動端）與評審目標，請求產出線框級/可評審原型與設計說明。
- 設計系統與交接：在已有頁面描述或原型基礎上，請求整理設計規範、設計 token 規範化說明及前端交接清單。
- 原型評審：提供可讀取的原型文件或路徑，請求證據化質量評審或界面走查；若信息不全，應預期 Skill 先補問而非直接給「通過」結論。
交付物粒度以「評審級」爲準，不要把它當作可直接上線的前端工程生成器。
適用場景與注意¶
適合誰
- 產品、設計、前端協作前需要統一頁面結構與交互說明的團隊。
- 需要在 Agent 內快速從文字需求拉出可評審原型與交接文檔的場景。
- 希望對已有原型做有依據的走查，而非空泛點評。
使用注意
- 邊界清晰：不負責 VI/Logo/插畫、真實用戶研究、完整前端工程重構或合規法務結論。
- 評審依賴真實輸入：沒有原型文件就不要期待「評審通過」類結論。
- SkillHub 側統計（以抓取資料爲準）：評分 100000，下載 1822；分類 design-media，版本 1.2.0。
結尾¶
若你的工作流卡在「PRD 有了、可評審原型和設計交接材料還沒有」，可以把 PRD到UI原型設計專家團 作爲 Agent 裏的設計協作 Skill，並遵守其評審級交付與補問紅線。官方 API 入口：https://api.skillhub.cn/user_cae83fba/design-ui-prototype-expert-pack；SkillHub 頁面：https://www.skillhub.cn/skills/user_cae83fba/design-ui-prototype-expert-pack。
