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