前言¶

產品想法往往先停留在文檔或口頭描述裏。要驗證流程和界面，常見做法是開 Figma、搭前端工程，或讓設計排期出稿，週期偏長。若目標只是「能讓人點一點、走通主路徑」，一個可在瀏覽器直接打開的獨立 HTML 往往夠用。

下面介紹 SkillHub 社區 Skill「快速生成高保真的產品交互原型1」（座標 @user_cc3f6cfc/product-prototype-design，當前版本 v1.0.1）。它面向 Agent 工作流：在對話裏描述頁面與交互，由 Agent 按 Skill 指引生成高保真、可交互原型，輸出爲單個 HTML 文件，便於產品經理、創業者和設計師做概念驗證。

這是什麼¶

定位：在 AI 編碼助手（如 Cursor、Claude Code 等支持 Skills 的客戶端）中，把「產品原型 / Demo / Landing Page」類需求轉成可本地打開的單文件 HTML 交互頁。

來源與維護：SkillHub 社區來源（community），發佈者爲 user_cc3f6cfc，分類爲 design-media。頁面標註 requires_api_key=false，即 Skill 本身不要求額外 API Key（具體生成效果仍取決於你所用的模型與客戶端能力）。

解決的問題：縮短從想法到可點擊界面的路徑，減少爲驗證而單獨搭前端或等設計稿的時間；交付物是單文件，分享與演示只需瀏覽器。

核心功能¶

以下能力均來自 SkillHub 官方簡介與頁面說明，未在資料中出現的細節不展開。

1. 高保真交互原型：生成帶界面與基礎交互的產品原型，而非純線框說明。
2. 單文件 HTML 交付：輸出爲單個獨立 HTML，便於保存、轉發和在瀏覽器中預覽。
3. 意圖識別指引：Skill 內寫明觸發場景——用戶提到原型設計、產品原型、交互原型、demo 製作、產品 Mock、界面原型、H5 原型、產品頁面設計、MVP 原型、Landing Page、產品概念驗證等；即未明說「原型」，只要想快速做一個產品頁面、界面或 Demo，也應啓用此 Skill。
4. 適用角色：產品經理、創業者、設計師等需要快速驗證想法的場景。

安裝與啓用¶

安裝 SkillHub CLI（若尚未安裝）¶

先檢查是否已安裝：

command -v skillhub && skillhub --version

未安裝時，可按 SkillHub 安裝文檔執行完整安裝（CLI + 默認 Skill）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

僅安裝 CLI：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only

說明與命令出處：SkillHub 安裝與優先源配置。

安裝本 Skill¶

安裝時必須用 --dir 指向當前 Agent 的 skills 目錄，否則默認裝到 ./skills/ 可能不會被客戶端識別。

skillhub install @user_cc3f6cfc/product-prototype-design --dir <skills 目錄>

各客戶端常用 skills 目錄（摘自官方安裝文檔）：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或項目下的 .agents/skills/

也可在 SkillHub 技能頁將下列說明發給 AI，由其按安裝文檔完成安裝：

請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_cc3f6cfc/product-prototype-design`。

安裝後按你所用客戶端的要求刷新或重啓 Agent，使 Skill 生效。

典型用法¶

官方頁面未提供逐步截圖教程，可復現的流程如下。

1. 確認本 Skill 已安裝到當前 Agent 的 skills 目錄。
2. 在對話中說明要做的產品頁面：目標用戶、核心功能、主要頁面或流程、是否需要 Landing Page 或 H5 形態等。描述越具體，生成結果越貼近預期。
3. 使用與原型、Demo、Mock 相關的表述時，Agent 會按 Skill 說明優先走「單文件高保真 HTML 原型」路徑。
4. 在 Agent 完成生成後，將得到的 .html 用瀏覽器打開，走一遍主流程，用於內部評審或對外演示。

示例請求方向（可自行改寫，不必照搬）：

幫我做一個 SaaS 產品 Landing Page 的可交互原型：包含導航、功能介紹、定價三檔和註冊按鈕，輸出單個 HTML 文件。

適用場景與注意¶

適合誰

• 需要快速做 MVP 原型、概念驗證頁、活動 H5 或產品 Demo 的非工程角色。
• 需要在評審前用可點擊頁面對齊信息架構與關鍵交互的團隊。

使用上需注意

• 產出是原型 HTML，不等同於可直接上線的生產代碼；上線仍需工程化、安全與性能等方面的單獨建設。
• Skill 標籤爲 requires_api_key=false，不表示零成本：模型調用與客戶端能力仍由你當前環境決定。
• SkillHub 頁面統計（以抓取資料爲準）：評分 100000，下載 2836 次，安裝數顯示爲 0——安裝統計可能與各客戶端本地安裝方式有關，以你本機 skillhub install 與 Agent 是否識別爲準。

結尾¶

「快速生成高保真的產品交互原型1」把「描述產品 → 可交互單頁 HTML」收斂進 Agent Skill 工作流，適合在想法早期用瀏覽器即可演示的路徑做驗證。安裝與詳情見 SkillHub：

• 技能頁：https://www.skillhub.cn/skills/user_cc3f6cfc/product-prototype-design
• API 條目：https://api.skillhub.cn/user_cc3f6cfc/product-prototype-design