交互式 HTML 产品原型生成器

解决什么问题

产品评审时，需求文档、界面示意和交互说明常常分散在文本、图片与原型工具里，工程师很难快速确认“这个按钮到底控制什么状态”。prototype-html 将这个问题收敛为一份可直接打开的单文件 HTML 原型：左侧展示产品主体界面，右侧同步展示功能说明，并用 SVG 连线把界面元素与说明文字精确对应。

技能如何工作

该技能按需求理解、布局设计、代码生成和验证检查推进。核心输出是纯前端单文件，使用 HTML、CSS、原生 JavaScript，并通过 CDN 引入 Tailwind CSS v3 与 Font Awesome。它会生成 80%-85% 宽的主体界面和 15%-20% 宽的说明栏，两栏独立滚动；选择 2-4 个关键元素绘制贝塞尔曲线，线条为 2px，并在元素和说明之间做双向悬停高亮。移动端会切换为上下布局，隐藏连线，改为元素下方短说明，并提供视图切换按钮。

适用边界与注意点

它适合快速产出可演示、可沟通的前端原型，尤其适合把界面元素与功能说明绑定展示。默认配色和间距遵循规范，若用户指定品牌色则优先使用用户设置。连线计算依赖 DOM 渲染完成与窗口 resize 事件，元素命名需清晰；它不替代真实后端联调、复杂状态管理或可访问性深度优化。