prototype-html

name	prototype-html
description	生成交互式HTML产品原型的专家技能。当用户需要创建产品原型、UI界面原型、 可交互的HTML演示页面、产品功能展示页面，或提到"原型"、"prototype"、 "产品界面"、"UI原型"、"交互原型"、"演示页面"等时使用。

交互式HTML产品原型生成

根据产品需求，生成完整的、可直接运行的单文件HTML产品原型。

核心工作流程

1. 理解需求 - 明确用户需要展示的产品功能和界面元素
2. 设计布局 - 规划左侧界面元素与右侧说明文档的对应关系
3. 编写代码 - 生成符合所有技术规范的完整HTML文件
4. 验证检查 - 确保所有连线正确、交互完整、响应式正常

布局规范（严格执行）

整体结构

• 左右分栏布局
  • 左侧：占页面宽度的80%-85%，展示产品主体界面内容
  • 右侧：占页面宽度的15%-20%，展示对应功能的详细说明文档
• 分隔线：左右两栏之间有清晰的垂直分隔线
• 滚动同步：左右两栏各自独立滚动，互不影响

连线功能（必须严格执行）

使用SVG技术绘制连线，确保连线清晰可见且不遮挡内容。

连线规则：

• 选择左侧界面中2-4个重要元素增加连线指向右侧对应的功能说明
• 连线的起始点必须精确连接到左侧元素的右侧边缘中点
• 连线的结束点必须精确连接到右侧对应说明文字的左侧边缘中点
• 连线采用平滑的贝塞尔曲线，避免生硬的直角转弯
• 连线线条粗细为 2px

交互效果：

• 当鼠标悬停在左侧元素上时，对应的连线加粗并高亮显示
• 当鼠标悬停在右侧说明文字上时，对应的连线和左侧元素也会高亮显示

连线标注：

• 每条连线旁边添加小的数字编号，与右侧说明的编号对应

响应式设计规范

PC端

• 保持上述左右分栏布局

手机端

• 自动切换为上下布局
• 上方展示产品主体界面，下方展示功能说明
• 连线功能自动隐藏
• 在每个元素下方直接显示简短说明
• 提供"切换视图"按钮，允许用户在"仅界面"和"界面+说明"之间切换

技术栈要求

1. 纯前端实现：使用纯HTML、CSS和原生JavaScript，不依赖任何外部框架
2. 样式：使用Tailwind CSS v3，通过CDN引入
3. 图标：使用Font Awesome图标库，通过CDN引入
4. 代码结构：
   • HTML结构语义化，使用适当的标签
   • CSS样式内联在<style>标签中
   • JavaScript代码内联在<script>标签中
   • 所有代码整合在一个HTML文件中，无需外部资源

样式与视觉规范

配色方案

• 如果用户指定了色系则用用户指定的色系，否则用下面默认的色系
• 主色调：蓝色 #165DFF
• 辅助色：浅灰色 #F5F7FA、深灰色 #333333
• 强调色：绿色 #00B42A（成功状态）、红色 #F53F3F（错误状态）

其他样式要求

• 右侧的功能说明区要用琥珀色系，跟左侧内容区区分开！
• 字体：系统默认无衬线字体
• 间距：以 8px 为基本单位，保持一致的间距系统
• 阴影：适当使用轻微阴影增强层次感
• 整体风格：简洁、现代、专业的产品原型风格

输出要求

1. 输出完整的HTML文件代码
2. 代码开头添加简短说明，介绍原型的功能和使用方法
3. 确保所有连线的起始和指向位置完全正确
4. 确保在不同屏幕尺寸下都能正常显示和交互

注意事项

• 连线计算必须在DOM渲染完成后执行，使用 DOMContentLoaded 和 resize 事件重新计算
• 确保SVG的 pointer-events-none 不会阻挡下方元素的交互
• 移动端切换视图时，需要平滑过渡动画
• 所有元素ID和数据属性命名要清晰，便于连线脚本定位

参考内容

• 生成的HTML文件要参考 assets/example.html