前言¶

拿到 PRD 要做原型時，常見的做法是手寫一版 HTML：能看，但配色、字體、圓角散在各個組件裏，客戶說「換個風格」就得全局改一遍。另一個常見做法是丟給通用大模型隨口生成一屏圖，改不了細節，也沒有結構說明。

下面介紹的這個 Skill 把這件事拆成兩層：結構骨架和視覺規範。骨架（頁面結構、組件、連線）保持穩定，視覺（配色、字體、圓角、組件樣式）單獨放在一個 DESIGN.md 文件裏，改規範就等於換風格，不用動頁面代碼。它還會依據 PRD 自動生成關鍵註釋，方便他人直接閱讀原型。

這是什麼¶

一句話定位：把 PRD 或需求描述變成風格可定製、帶關鍵註釋的交互式 HTML 產品原型。

出品方：SkillHub 上的社區技能，座標 @user_9c6b6ed5/product-prototype，發佈者 user_9c6b6ed5，版本 1.0.1，分類 design-media，來源標記爲 community。官方頁面：https://www.skillhub.cn/skills/user_9c6b6ed5/product-prototype

解決什麼問題：需求方要看到可點、可交互的界面而不是文檔；同時希望「換個視覺風格」不需要重寫頁面，改一份設計規範即可。

觸發方式：當用戶提出創建產品原型、UI 界面原型、可交互 HTML 演示頁面、產品功能展示頁面，或提到 prototype、產品原型、產品界面、UI 原型、交互原型、演示頁面等說法時使用；當用戶提供網頁鏈接、要求提取其設計風格、生成或更新 DESIGN.md 時，也使用本技能。

核心功能¶

1、生成交互式 HTML 原型。輸出是可直接在瀏覽器打開的 HTML 頁面，不是靜態截圖。
2、依據 PRD 自動生成關鍵註釋。註釋隨結構一起產出，省去事後補寫說明。
3、視覺風格由 DESIGN.md 驅動。配色、字體、圓角、組件樣式都從該文件讀取，改文件即換風格。
4、結構與連線骨架保持穩定。換規範時不重建頁面結構，只替換樣式表現。
5、支持從網頁鏈接提取設計風格，生成或更新 DESIGN.md。可以把目標站點的視覺特徵固化成規範文件。

標註：技能標籤爲 requires_api_key=false，即不依賴外部 API Key。

安裝與啓用¶

該技能基於通用 SKILL.md 格式。SkillHub 頁面本次未能抓取成功，以下按 SKILL.md 的通用落地方式說明，請在真實環境中以官方頁面爲準。

1、將技能目錄放到項目的 skills 目錄下，例如 Cursor 的 rules/skills 目錄或 Claude Code 的 .claude/skills/。

your-project/
└── .claude/
    └── skills/
        └── product-prototype/
            ├── SKILL.md
            └── DESIGN.md

2、在 SKILL.md 中聲明技能名稱與觸發條件，讓編輯器能按關鍵詞喚起它。

name: product-prototype
description: 生成風格可定製的交互式HTML產品原型，根據PRD自動生成註釋。

3、編輯 DESIGN.md 中的設計變量，例如配色、字體、圓角、組件樣式。這一層是視覺唯一的改動入口。

colors:
  primary: "#2563eb"
  surface: "#ffffff"
radius: 8px
font-family: "Inter, sans-serif"

4、保存後重新生成原型，頁面骨架不變，視覺按新規範刷新。

差異說明：本次抓取的官方頁面未返回 Cursor、Codex CLI、Claude Code 三者的具體配置差異，故不逐一列舉，上述目錄寫法按通用約定給出，使用前需在目標編輯器中確認。

典型用法¶

以下示例都來自官方簡介中描述的觸發場景。

1、給一段 PRD 文本，生成可交互原型。

用戶輸入：「幫我做一個訂單列表頁，支持篩選和分頁，PRD 見下……「

產出：一頁可點擊的 HTML 原型，含列表、篩選、分頁組件，關鍵位置帶註釋。

2、給一個參考網頁，先提取風格再出原型。

用戶輸入：「參考 https://example.com 的設計風格，做這個功能的原型。」

產出：先把該站點的配色、字體、圓角提取進 DESIGN.md，再按同一套規範生成原型。

3、客戶說風格不合適，改規範重出。

用戶輸入：「主色換成深色，圓角大一點。」

產出：只改 DESIGN.md 中的主色與 radius，頁面結構與連線不變，重新生成。

適用場景與注意¶

適合：需要快速給出可點原型的產品經理、前端、獨立開發者；需求方會反覆調整視覺風格的項目；需要把某個站點的設計風格複用到自己產品上的場景。

注意：

1、視覺改動集中在 DESIGN.md，不要在生成的頁面裏直接改樣式，否則下次生成會覆蓋。
2、結構骨架穩定意味着改結構要走另外的流程，本技能不負責自動重建頁面層級。
3、提取網頁風格受限於目標站點可訪問的樣式信息，複雜站點可能只能拿到部分特徵。
4、社區來源（source: community），版本 1.0.1，使用前建議在官方頁面覈對最新版本與更新說明。
5、評分與下載量以 SkillHub 頁面實時數據爲準，本文引用的抓取數據爲評分 100000、下載 862。

小結¶

這個 Skill 的價值在於把原型拆成「結構」和「規範」兩層：結構負責交互和可讀性，DESIGN.md 負責視覺。遇到「換風格」的需求時改一份文件即可，不用重寫頁面。官方地址：https://api.skillhub.cn/user_9c6b6ed5/product-prototype ，SkillHub 頁面：https://www.skillhub.cn/skills/user_9c6b6ed5/product-prototype