# H5 → 小程序转换：输入材料准备指南 > 本文档规范了每次将 H5 原型页面转换为微信小程序时，应提供的输入材料清单、格式要求和操作步骤。 > 目标：提高 AI 转换还原度，减少颜色/间距换算错误、交互逻辑遗漏、图标处理失误。 --- ## 一、HTML 文件规范 ### 问题背景当前 H5 原型是 Tailwind CDN + 内联 SVG + 原生 JS 的单文件结构，存在以下转换障碍： - Tailwind 工具类需逐个手动展开为 WXSS，容易遗漏或换算错误 - 内联 SVG 在小程序中完全不可用，但混在 HTML 里容易被"直译" - JS 交互逻辑和 DOM 操作对小程序没有参考价值，反而干扰判断 ### 推荐做法 1. **提供渲染后的最终 DOM**（而非模板源码） - 浏览器中打开页面 → 右键 `` → Copy → Copy outerHTML - 原因：Tailwind `tailwind.config` 中自定义颜色/间距在源码中只是类名，无法确定最终计算值 - 保存为 `docs/h5_ui/rendered/.html` 2. **去掉所有 `