交互式HTML产品原型生成
根据产品需求，生成完整的、可直接运行的单文件HTML产品原型。
核心原则：结构与风格分离
本 skill 只定义结构骨架（布局、连线、交互、响应式、技术栈），不包含任何视觉风格。
所有视觉风格——配色、字体、圆角、阴影、间距、组件样式——100% 由 DESIGN.md 驱动。
本文件中不得出现任何硬编码的色值、字体或组件风格；如需兜底，一律引用 assets/DESIGN-default.md，不要在本文档内重写一遍。
核心工作流程
- 理解需求 - 明确用户需要展示的产品功能和界面元素
- 解析设计规范 - 按下文「设计规范解析」确定本次生效的 DESIGN.md
- 设计布局 - 规划左侧界面元素与右侧说明文档的对应关系
- 编写代码 - 生成符合所有技术规范的完整HTML文件
- 验证检查 - 确保所有连线正确、交互完整、响应式正常、视觉与 DESIGN.md 一致
设计规范解析（每次生成前必做）
按以下优先级确定生效的设计规范，命中即停：
- 用户明确指定的规范文件：用户在对话中给出文件路径、直接粘贴设计规范内容，或指名某种风格的规范文件 → 以此为准
- 工作区根目录的
DESIGN.md：文件名大小写不敏感（DESIGN.md/design.md），存在则读取并严格遵循 - skill 内置默认规范：
assets/DESIGN-default.md
执行规则：
- 命中的 DESIGN.md 是唯一风格来源，其中的 Tokens、组件规范、Do's & Don'ts 必须严格执行
- DESIGN.md 未覆盖的细节，fallback 到下一级规范；全部未覆盖才由你按「简洁、现代、专业」的原则补齐
- 风格永远服从结构：若 DESIGN.md 中的某些主张与本 skill 的结构规范冲突（例如要求取消分栏、去掉连线），结构规范优先——DESIGN.md 决定"长什么样"，不决定"怎么组织"
- 生成完成后，主动告诉用户本次使用了哪份设计规范，以及"修改 DESIGN.md 后重新生成即可换风格"
从网页链接生成/更新 DESIGN.md
当用户粘贴一个网页链接，希望"换成这个网站的风格"、"提取这个网页的设计规范"或"更新 DESIGN.md"时，执行以下流程：
- CLI 自动提取（首选）：运行
npx @designmdcc/cli <url> --out=<临时文件>（需要 Node 18+；匿名可用，每 IP 每天 5 次完整生成额度）。它会用无头浏览器实测目标网站的计算样式，直接产出标准 DESIGN.md。只需快速 token 不需要成文稿时，用--json模式（免费、即时、不占额度） - 手工提取（降级方案）：CLI 不可用（无 Node 环境、额度用尽、网络失败）时，按
references/design-md-extraction.md执行：WebFetch 获取页面 → 不足则用 shellcurl抓取 HTML 源码与 CSS 分析 → 按指南清单提取并生成草案 - 用户确认：向用户展示风格摘要（来源网站、整体气质、主色、字体、关键组件特征），等用户确认后再写入
- 写入文件：写入工作区根目录的
DESIGN.md；若该文件已存在，先将其备份为DESIGN.backup.md再覆盖（用户要求合并时则按节合并，并在摘要中说明变更点） - 生效提示：告知用户新规范已生效，"接下来生成的原型将使用新风格；如需微调可直接编辑 DESIGN.md"
注意：
- 两种提取方式都失败（需要登录、反爬、超时），直接告知用户，并建议改用 designmd.me 等在线工具生成后把文件放进工作区
- CLI 产出带 YAML front matter，直接可用，不要重写格式；手工提取的草案须遵循 references/design-md-extraction.md 的模板与质量校验
布局规范（结构，严格执行）
整体结构
- 左右分栏布局
- 左侧：占页面宽度的80%-85%，展示产品主体界面内容
- 右侧：占页面宽度的15%-20%，展示对应功能的详细说明文档
- 分隔线：左右两栏之间有清晰的垂直分隔线
- 滚动同步：左右两栏各自独立滚动，互不影响
- 说明区可区分：右侧说明区在视觉上必须与左侧内容区明确区分（底色、卡片或边框均可），具体样式由生效的 DESIGN.md 决定；DESIGN.md 未定义时，按内置默认规范执行
连线功能（必须严格执行）
使用SVG技术绘制连线，确保连线清晰可见且不遮挡内容。
连线规则：
- 选择左侧界面中2-4个重要元素增加连线指向右侧对应的功能说明
- 锚点必须是真实界面元素：连线两端只能指向实际的功能区域（菜单、按钮、列表、卡片区等），禁止指向提示性文字、装饰元素或空白区域
- 连线的起始点必须精确连接到左侧元素的右侧边缘中点
- 连线的结束点必须精确连接到右侧对应说明文字的左侧边缘中点
- 连线采用平滑的贝塞尔曲线，避免生硬的直角转弯
- 连线线条粗细为 2px；连线与编号的颜色取生效 DESIGN.md 的主强调色
交互效果：
- 当鼠标悬停在左侧元素上时，对应的连线加粗并高亮显示
- 当鼠标悬停在右侧说明文字上时，对应的连线和左侧元素也会高亮显示
连线标注：
- 每条连线旁边添加小的数字编号，与右侧说明的编号对应
响应式设计规范
PC端
- 保持上述左右分栏布局
手机端
- 自动切换为上下布局
- 上方展示产品主体界面，下方展示功能说明
- 连线功能自动隐藏
- 在每个元素下方直接显示简短说明
- 提供"切换视图"按钮，允许用户在"仅界面"和"界面+说明"之间切换
技术栈要求
- 纯前端实现：使用纯HTML、CSS和原生JavaScript，不依赖任何外部框架
- 样式：使用Tailwind CSS v3，通过CDN引入
- 图标：使用Font Awesome图标库，通过CDN引入
- 代码结构：
- HTML结构语义化，使用适当的标签
- CSS样式内联在<style>标签中
- JavaScript代码内联在<script>标签中
- 所有代码整合在一个HTML文件中，无需外部资源 - 设计变量落地：将生效 DESIGN.md 的 tokens 转译为
:rootCSS 变量（或 Tailwind 配置），样式一律引用变量，不散写色值，便于后续换风格时整体替换
输出要求
- 输出完整的HTML文件代码
- 代码开头添加简短说明，介绍原型的功能和使用方法，并注明所依据的设计规范来源
- 确保所有连线的起始和指向位置完全正确
- 确保在不同屏幕尺寸下都能正常显示和交互
注意事项
- 连线计算必须在DOM渲染完成后执行，使用
DOMContentLoaded和resize事件重新计算 - 左右面板滚动时需实时重绘连线（监听 scroll + requestAnimationFrame）
- 确保SVG的
pointer-events-none不会阻挡下方元素的交互 - 移动端切换视图时，需要平滑过渡动画
- 所有元素ID和数据属性命名要清晰（
data-proto-id），便于连线脚本定位
参考内容
- 结构参照：
assets/example.html演示了完整的布局、连线、悬停高亮、模态框与移动端适配的实现方式。注意：它的视觉是某一份具体 DESIGN.md 的示例效果，只参考其结构与交互实现，视觉样式必须以当前生效的 DESIGN.md 为准 - 默认风格：
assets/DESIGN-default.md，用户未提供任何设计规范时使用 - 风格抽取指南：
references/design-md-extraction.md，从网页链接提取设计规范时的分析维度清单与 DESIGN.md 输出模板
