切片：设计稿转HTML 是做什么的？
忠实复制设计稿为HTML，不得重新设计。正确的结果叠加在设计稿上几乎看不出差异。创意、“改进”和额外功能均视为错误。
工作流程（按顺序执行，不得跳过）
1. 接收设计稿
确认设计稿确实存在（检查 /mnt/user-data/uploads 和对话）；如果不存在，要求用户提供，绝不能猜测。如果设计稿有多个页面/画框，询问用户需要构建哪些。
支持的输入：PNG、SVG、通过MCP的Figma（JPG视为PNG）。对于任何其他格式，要求用户导出PNG或SVG。如何读取每种输入，请参阅 references/mockup-audit.md。对于Figma，在调用 get_design_context 之前，先加载 figma:figma-design-to-code 技能。
2. 询问两个问题
在审核和编码之前，一起询问这两个问题。如果用户已经回答过则跳过。优先使用 ask_user_input_v0（一次调用，两个问题）；否则使用简短的纯文本提问。
- 输出格式：单文件（HTML、CSS、JS内联在一个
index.html中，外加assets/）或分开文件（index.html、css/style.css、js/main.js，外加assets/） - CSS：纯CSS、通过CDN引入Bootstrap、或通过CDN引入Tailwind
在用户回答后，阅读 references/output-structure.md 以及对应的文件：references/vanilla.md、references/bootstrap.md 或 references/tailwind.md。不得阅读另外两个文件。
3. 编码前审核
阅读 references/mockup-audit.md 并生成审核规格（画布、容器、网格、颜色、字体、间距、圆角、阴影、资源、可见交互），每个值标记为 实际测量 或 估计值。仅在需要决策时（无法识别的字体、缺失资源）向用户展示摘要；否则继续。
4. 编写代码
- 规则：
references/responsive-and-fidelity.md（像素级精确和响应式）、references/code-standards.md（语义化HTML、BEM）、references/anti-slop.md（禁止项）。在编写代码时应用这些规则，而不是事后。 - 在设计稿宽度下的值必须与审核规格完全一致（以像素为单位，不向框架尺度取整）。
- JS仅用于设计稿中可见的交互组件，遵循
anti-slop.md中的内容测试（当设计稿包含所需内容时构建行为，否则保持静态并报告）；除了所选框架要求的之外，不得引入额外库。
5. 验证
按照 references/responsive-and-fidelity.md 中的验证步骤操作，然后运行 references/anti-slop.md 中的最终检查。如果沙箱无法渲染，则如实说明。
6. 交付
保存到 /mnt/user-data/outputs/ 并使用 present_files 分享。对于多个文件，打包成一个 .zip 文件，保持文件夹结构完整（以便资源路径有效），同时展示 index.html。
然后提供一个最多约6行的报告，仅包含用户需要知道的信息：未识别的字体及其替代字体、估计值、占位资源、无法重新创建或超出尺寸预算的图标、已构建或因缺乏内容而保持静态的交互行为、以及因设计稿缺失而推断的平板/手机部分。不得包含功能建议、改进想法或自我表扬。
核心原则
- 忠实至上。 如果设计稿看起来很弱，就原样复制。
- 不得添加任何设计稿中不存在的内容；不得默默猜测：所有影响视觉的假设都要在报告中说明。
- 精确复制文本，包括大小写、标点符号和数字；标记难以辨认的文本。