ewancy 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 原型或设计规范，必须优先复用；找不到时先向用户索要，不要为了完成任务直接新做一套视觉。
- 识别功能点目录：根据 PRD/知识库/用户描述确定功能点目录；优先在当前工作区和功能点目录查找资料。
- 查找当前页面资料：使用
find/rg --files查找*.png、*.jpg、*.jpeg、*.webp、*.html、*.zip、*原型*、*demo*、禅道附件/、截图/、设计稿/。 - 读取并确认风格：查看相关截图或旧原型，提取布局、色彩、字号、按钮样式、弹窗样式、表格/卡片样式、状态文案和已有交互。
- 基于当前页面增量设计：只补充本次需求新增区域或交互，例如新增入口、弹窗、状态切换；保持原页面视觉体系，不替换整体风格。
- 找不到资料时停止询问：如果无法找到当前页面或候选资料过多无法判断，向用户索要当前页面截图/原型/设计稿；在用户回复前不要生成正式原型。
- 新设计授权：只有用户明确授权可以新设计时，才按通用设计原则自由发挥，并在最终回复说明“用户已授权新设计”。
可向用户询问的简短话术：我没有找到当前页面截图/原型，请发我当前页面截图或说明可否按新设计生成。
后台静默采集当前页面
中文说明：当用户要求“登录我的后台”“基于当前页面”“没有截图就去后台找当前功能”时，优先使用后台 Playwright 独立上下文静默采集，不要操作用户正在使用的浏览器窗口、不要抢焦点、不要用 AppleScript/系统按键控制前台 Chrome。
推荐流程：
- 先查本地资料：仍然先按“当前页面优先流程”查找已有截图、旧原型、知识库和 PRD。
- 识别后台地址：从知识库、历史文档、浏览器历史、用户给的 URL 中确认后台域名和路由；不要猜测会破坏账号状态的操作路径。
- 后台启动 Playwright：用独立
browser.newContext()/ 临时 user data dir / headless 或 offscreen 模式采集截图；禁止复用或控制用户前台 Chrome。 - 登录态处理：
- 如果独立上下文打开后已登录，直接采集目标页面。
- 如果跳转到登录页，先检查是否有可用的本地 storage state、测试账号或用户已明确提供的登录信息。
- 如果没有登录态或凭据，不要操作用户前台页面；改用已有截图/知识库设计，并在最终说明“后台静默采集因登录态不足未取得页面”。
- 截图与结构采集：采集目标页面、相关弹窗、列表、筛选区、空态、导出/保存反馈等；保存到功能点目录下的
assets/current_capture/。 - 视觉提取：从截图中提取导航、顶部栏、标签页、按钮色、表格密度、弹窗宽度、表单行距和文案风格，再增量设计。
后台采集注意事项：
- 不要使用
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