前言¶

拿到 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