# HTML Interactive Prototype

> Create self-contained interactive HTML prototypes from PRD/需求说明, knowledge bases, screenshots, existing pages, current UI references, or user-provided interaction rules. Use when the user asks to 生成可交互HTML原型, htmldemo, 前端交互demo, 后台配置交互demo, prototype, simulate backend/frontend UI flows, or update a prototype based on the current page. Must first look for and reuse current page screenshots/prototypes/design system; if current UI references cannot be found, ask the user for them and do not invent a new design unless the user explicitly authorizes a fresh design. Trigger phrases include: $html-interactive-prototype, 交互原型, HTML原型, htmldemo, 前端demo, 后台demo.

- Skill: `ewancy/html-interactive-prototype` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add ewancy/html-interactive-prototype`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ewancy/html-interactive-prototype/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: ewancy (https://skillmd.com/u/ewancy)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/ewancy/html-interactive-prototype

---


# html-interactive-prototype / 可交互 HTML 原型生成

## 调用原则

只在用户目标是“制作可交互 HTML 原型/demo”时使用本 Skill。输入可以是需求说明、知识库、当前页面截图、已有原型、设计系统、用户描述的交互规则。

核心约束：原型默认必须基于当前页面或已有产品风格延展，不允许直接自由新设计。只有用户明确说“可以直接新设计”“没有现有页面，按你方案设计”等同义表达时，才可以脱离当前页面重新设计。

本 Skill 不负责建立知识库；需要先从禅道或本地资料沉淀知识库时使用 `$requirement-kb-creator`。
本 Skill 不负责写正式 PRD；需要写需求文档时先使用 `$requirement-prd-writer`。

## 推荐口令

- `$html-interactive-prototype 基于 xxx需求说明.md 生成前端交互demo`
- `交互原型：按这个 PRD 做一个 htmldemo`
- `后台demo：严格参考之前的后台样式，生成配置弹窗原型`

## 当前页面优先流程

中文说明：制作原型前先确认“当前页面长什么样”。如果本地已有截图、禅道附件、旧 HTML 原型或设计规范，必须优先复用；找不到时先向用户索要，不要为了完成任务直接新做一套视觉。

1. **识别功能点目录**：根据 PRD/知识库/用户描述确定功能点目录；优先在当前工作区和功能点目录查找资料。
2. **查找当前页面资料**：使用 `find`/`rg --files` 查找 `*.png`、`*.jpg`、`*.jpeg`、`*.webp`、`*.html`、`*.zip`、`*原型*`、`*demo*`、`禅道附件/`、`截图/`、`设计稿/`。
3. **读取并确认风格**：查看相关截图或旧原型，提取布局、色彩、字号、按钮样式、弹窗样式、表格/卡片样式、状态文案和已有交互。
4. **基于当前页面增量设计**：只补充本次需求新增区域或交互，例如新增入口、弹窗、状态切换；保持原页面视觉体系，不替换整体风格。
5. **找不到资料时停止询问**：如果无法找到当前页面或候选资料过多无法判断，向用户索要当前页面截图/原型/设计稿；在用户回复前不要生成正式原型。
6. **新设计授权**：只有用户明确授权可以新设计时，才按通用设计原则自由发挥，并在最终回复说明“用户已授权新设计”。

可向用户询问的简短话术：`我没有找到当前页面截图/原型，请发我当前页面截图或说明可否按新设计生成。`

## 后台静默采集当前页面

中文说明：当用户要求“登录我的后台”“基于当前页面”“没有截图就去后台找当前功能”时，优先使用后台 Playwright 独立上下文静默采集，不要操作用户正在使用的浏览器窗口、不要抢焦点、不要用 AppleScript/系统按键控制前台 Chrome。

推荐流程：

1. **先查本地资料**：仍然先按“当前页面优先流程”查找已有截图、旧原型、知识库和 PRD。
2. **识别后台地址**：从知识库、历史文档、浏览器历史、用户给的 URL 中确认后台域名和路由；不要猜测会破坏账号状态的操作路径。
3. **后台启动 Playwright**：用独立 `browser.newContext()` / 临时 user data dir / headless 或 offscreen 模式采集截图；禁止复用或控制用户前台 Chrome。
4. **登录态处理**：
   - 如果独立上下文打开后已登录，直接采集目标页面。
   - 如果跳转到登录页，先检查是否有可用的本地 storage state、测试账号或用户已明确提供的登录信息。
   - 如果没有登录态或凭据，不要操作用户前台页面；改用已有截图/知识库设计，并在最终说明“后台静默采集因登录态不足未取得页面”。
5. **截图与结构采集**：采集目标页面、相关弹窗、列表、筛选区、空态、导出/保存反馈等；保存到功能点目录下的 `assets/current_capture/`。
6. **视觉提取**：从截图中提取导航、顶部栏、标签页、按钮色、表格密度、弹窗宽度、表单行距和文案风格，再增量设计。

后台采集注意事项：

- 不要使用 `osascript` 改前台浏览器 URL、发送按键或点击用户正在操作的窗口。
- 不要触发真实删除、提交、启停、支付、发送消息等高风险写操作；需要展示保存效果时在本地原型中模拟。
- 可以使用后台 Playwright 打开只读页面、弹出配置弹窗、截图；如必须登录但没有凭据，应停止采集并降级为本地资料设计。
- 采集文件命名建议：`playwright_<route>.png`、`current_<page>_<state>.png`，避免覆盖用户提供的原始截图。

## 原型类型选择

- **前端/客户端原型**：用户提到 PC、移动端、客户端首页、用户点击、展示区、搜索、声音开关等。
- **后台/配置原型**：用户提到账服后台、配置项、表格、弹窗、页签、上传、保存、删除等。
- **双端原型**：用户同时要求后台配置和前端展示，需要分别生成两个 HTML 文件。

## 设计原则

- 生成自包含 HTML：CSS/JS 内联，不依赖外网资源。
- 原型要可交互，不只是静态截图。
- 可用控件模拟后台配置，实时影响前端预览。
- 严格遵守用户给的截图风格；已有设计系统和当前页面优先于自由发挥。
- 不要在产品原型里擅自加入“需求说明”侧栏、解释浮层、AI 注释面板。
- 只保留用户当前确认的字段和说明；用户要求去掉的列、说明行、范围提示或状态文案，必须从 HTML、JS 数据和截图校验中全部移除。
- 敏感业务背景不自动带入原型文案；例如用户要求只写“需要屏蔽的账号”，就不要在原型中出现团队、地区或内部原因说明。

## 迭代微调规则

中文说明：原型完成后，用户经常基于截图指出“去掉某一行/某一列/某段说明”。这类反馈应直接修改原型，不要重新设计整页。

- 对用户用截图框出的区域，定位到对应 HTML 节点、JS 数据字段和样式，完整删除或调整。
- 删除表格列时，同步调整 CSS grid/table 列数、表头、行数据和搜索/筛选逻辑，避免残留空列。
- 删除说明文案时，同时检查 tooltip、toast、默认数据、隐藏字段、代码字符串，确保文案不残留。
- 修改后用后台 Playwright 打开本地 HTML，至少截取关键状态（主页面、弹窗、二级弹窗）验证无报错、无残留文案。
- 最终回复只列变更点、文件绝对路径和可体验交互，不重复输出大段 HTML。

## 原型确认后同步 PRD 提醒

中文说明：原型设计确认后，需求文档需要补充“核心页面截图 + 页面说明”，避免 PRD 只有文字、研发测试无法快速定位改动页面。

- 当用户明确表示原型“确认”“可以了”“设计完毕”“按这个走”或原型已完成多轮调整后，提醒用户是否将核心页面截图和说明同步补充到需求文档。
- 如用户同意，优先补充到对应 PRD 的 `页面截图` 章节；若 PRD 尚无该章节，按 `requirement-prd-writer/references/prd-template.md` 的截图章节格式新增。
- 核心页面通常包括：入口列表页、配置弹窗/抽屉、二级选择弹窗、关键状态页、保存后效果页、受影响的数据展示页。
- 截图说明应写“页面用途 + 本次改动位置/状态”，不要写技术实现细节。
- 本地 PRD 可以使用 Markdown 图片相对路径；若后续提交禅道，需由禅道提交流程把图片转成 HTML `<img>` 或替换为禅道附件引用。
- 输出或同步截图时保留稳定文件名，优先放到功能点目录 `assets/current_capture/`；文件名应能表达页面和状态，例如 `prototype_auth_modal.png`、`prototype_account_picker_paged.png`。
- 最终回复中列出“建议同步到 PRD 的核心截图清单”，方便后续禅道提交流程打包附件并将正文图片替换为禅道 `<img>`。

## 后台原型要求

参考 `references/backend-prototype-guidelines.md`。

必须关注：

- 白底/灰底后台风格。
- `WEB开发` 顶栏、绿色按钮、表格、弹窗、页签、表单行。
- 字段联动：不适用的字段要隐藏，例如“视频跳转=进入二级分类”时不展示游戏选择。
- 黑色说明气泡只在原型本身需要时使用；用户要求去掉时必须删除。

## 前端原型要求

参考 `references/frontend-prototype-guidelines.md`。

必须关注：

- PC/移动端切换。
- 关键状态切换：空标题、单游戏直跳、多游戏列表、声音开关、View all 等。
- 点击反馈：视频点击、按钮点击、搜索、保存等要有 toast 或状态变化。
- 响应式布局不能错位。
- 校验产物是否贴近当前页面：颜色、间距、按钮、弹窗、字体层级和主要布局不能明显跳出原页面风格。

## 校验

- 文件存在且非空。
- 关键文案和交互控件存在。
- 用户明确删除的元素不能残留。
- 已查找当前页面资料；若未找到，必须有用户提供资料或授权新设计的记录。
- 原型视觉与当前页面/截图保持一致；新增模块应像原页面的自然延展，而不是另一套 UI。
- 后台 demo 不出现无关需求说明面板。
- 最终回复给出绝对路径和可体验的交互点。

## 输出约定

推荐文件名：

- `<需求名>前端交互demo.html`
- `<需求名>后台配置交互demo.html`
- `<需求名>优化交互demo.html`