技能介绍

解决的问题

在需求阶段，把「功能列表」或「PRD 文字」变成可点击界面，往往要经历画原型、搭静态页、补交互、区分 Web/H5 等多轮迭代，售前演示和需求对齐常常被等待时间拖慢。HTML 交互原型生成器 的目标是：用一段自然语言、功能清单、PRD 或参考 URL，直接产出单文件可交互 HTML 原型，桌面浏览器打开即可体验导航、Tab、表单、弹窗与数据展示等核心逻辑。

核心能力与工作流程

输入灵活：支持功能清单/模块描述、PRD 文档、参考 URL 和口头描述四种形式。系统会先提取产品名称、核心模块、页面层级与目标端（Web、H5 或双端），输出页面清单后再动手写代码。

Web 端生成：生成的 .html 文件将 CSS 与 JavaScript 完全内嵌，不依赖外部资源。布局采用 Flexbox/Grid 实现响应式，视觉上参考 Ant Design/Element UI 的企业级 SaaS 风格，主色 #1890ff，背景 #f0f2f5，卡片白底配轻阴影和 4-8px 圆角。交互方面覆盖：

侧边导航通过 display: none/block 切换页面，当前菜单高亮
Tab 切换使用唯一前缀（如 modA-tab1）避免 ID 冲突，子 Tab 通过 function(id, el) 显式传参
模态弹窗支持遮罩点击关闭，表单弹窗包含输入框、下拉、日期选择
数据表格填充真实感中文数据，带分页控件和查看/编辑/删除操作
Toast 提示支持 success/warning/error 三种类型，2 秒自动消失

H5 端适配：如需双端输出，H5 版本会取消侧边栏，改为顶部导航栏加底部 Tab 导航，宽度限制 max-width: 750px 并居中，按钮最小高度 44px 保证触摸友好。文件头注释中会标注适配钉钉/企微/小程序 WebView。H5 端通常只保留核心功能页面，不必与 Web 端一一对应。

自检清单：生成后自动检查白屏、导航切换、Tab 冲突、弹窗开关、表格数据、响应式变形和 H5 底部导航等关键项，确保原型可用。

适用边界与注意点

单文件超过约 3000 行时，建议将次要页面简化为占位提示，避免文件过大难以维护
用户需求模糊时，技能会基于已有信息做合理假设，并在交付时标注假设点
拖拽排序、文件上传预览等复杂交互，目前用简化模拟实现，代码中会注释说明
参考 URL 时，需通过 fetch_web 获取页面结构后再提取设计风格，不能直接抓取整站
输出文件命名遵循 {项目名称}_Web原型.html 与 {项目名称}_H5原型.html，便于区分端型

典型场景包括售前客户演示、产品方案评审、开发需求对齐和投标方案附件。原型不是最终产品，但足以让团队在投入开发前，对信息架构和交互流程达成一致。

截图预览

使用场景

售前要在客户沟通前演示美容门店管理系统，先按工作台、客户管理、门店管理等模块生成可点击Web原型。
产品评审前已有PRD，需要按文档生成Web和H5原型，覆盖导航、Tab、表单弹窗与数据表格，确认信息架构。
投标方案需要直观附件，应根据功能清单生成单文件HTML原型，包含完整导航、弹窗与数据展示，作为方案附件。
开发排期前，用户只口头描述数据对接平台，需要先产出Web原型验证页面层级，再生成H5核心流程原型。

适合人员

售前顾问：要在客户沟通前快速产出可点击系统原型，演示功能流程并现场调整重点模块。
产品经理：已有PRD但开发排期紧，需要把需求变成Web/H5交互原型，用于评审和开发需求对齐。
投标负责人：方案需要直观附件，希望根据功能清单生成单文件HTML原型，覆盖导航、表格、弹窗等核心交互。
独立开发者：产品想法还停留在口头描述，想在写生产代码前先验证页面层级和核心操作流程。

HTML 交互原型生成器