交互式原型图

它解决什么问题

评审产品方案时，原型与说明往往是割裂的：截图看不出交互逻辑，交互文档又与界面对不上号。这个技能生成的是一份可直接运行的单文件 HTML 原型——左侧占 80%~85% 宽度渲染产品界面，右侧 15%~20% 宽度放置对应功能的编号说明，两者用 SVG 贝塞尔曲线精确连接，鼠标悬停时连线与两端元素同步高亮。它填平的是「界面长什么样」和「每个区域负责什么」之间的鸿沟。

核心能力与工作流程

结构与风格严格分离是这条流水线的第一原则：skill 只负责结构骨架——左右分栏布局、连线、悬停高亮、响应式切换、纯前端技术栈；所有视觉决策（配色、字体、圆角、阴影、间距）100% 由生效的 DESIGN.md 驱动。本文档内不出现任何硬编码色值，tokens 一律转译为 :root CSS 变量，换风格只需替换规范文件。

生成一次原型要经过五个步骤：

1. 理解需求——明确要展示的功能与界面元素
2. 解析设计规范——按优先级确定本次生效的 DESIGN.md：用户明确指定 > 工作区根目录的 DESIGN.md > skill 内置的 assets/DESIGN-default.md，命中即停
3. 设计布局——规划左侧元素与右侧说明的对应关系
4. 编写代码——生成符合技术规范的完整 HTML
5. 验证检查——连线锚点、交互完整性、响应式行为、视觉与 DESIGN.md 的一致性

风格服从结构：若 DESIGN.md 的主张与结构规范冲突（比如要求取消分栏或连线），结构优先。生成完成后会告知本次使用了哪份规范，以及修改 DESIGN.md 后重新生成即可换风格。

想照着某个网站的风格做，可以从网页链接提取 DESIGN.md：首选 npx @designmdcc/cli，无头浏览器实测目标站点的计算样式直接产出（需要 Node 18+，输出带 YAML front matter，可直接使用）；不可用时降级为手工提取——WebFetch 抓取页面，必要时用 curl 拉源码分析 CSS，再按指南清单起草。提取结果先展示风格摘要（来源网站、主色、字体、关键组件特征），用户确认后才写入；已有 DESIGN.md 会先备份为 DESIGN.backup.md 再覆盖。

技术栈与适用边界

产出物是纯前端单文件：语义化 HTML 内联 CSS 与原生 JavaScript，样式走 Tailwind CSS v3 CDN，图标用 Font Awesome，不依赖外部框架。PC 端保持左右分栏、两栏独立滚动；移动端自动切换上下布局，连线隐藏，元素下方直显简短说明，并提供「仅界面 / 界面+说明」的切换按钮。

参考实现 assets/example.html 覆盖了几个容易踩的实现细节：

• 连线计算必须在 DOMContentLoaded 之后执行，并用 resize 事件重算
• 左右面板滚动时通过 scroll + requestAnimationFrame 实时重绘连线
• SVG 设 pointer-events-none，不能挡住下方元素的交互
• 锚点必须落在真实界面元素（菜单、按钮、卡片区）的右边缘中点，禁止指向装饰或空白区域
• 元素 ID 与 data-proto-id 命名要清晰，连线脚本依赖它定位

它不做视觉风格决策，也不替你写产品文案；它保证骨架的可靠性——只要 DESIGN.md 给得准，输出就能直接在浏览器里跑、评审时点得动。