AI生成的 HTML 拿到手后，先不要急着部署，也不要立刻把整份代码重新丢回 AI。正确的第一步，是判断你要的到底是哪一种结果：能打开并演示的网页、可以继续改的原型，还是能进入生产环境的工程页面。三种目标需要的检查深度不同。如果只是演示，重点是资源路径和关键交互；如果要导入原型，重点是结构是否能被识别和继续编辑；如果要上线，还要补齐真实数据、权限、安全、可访问性和性能验证。
本文用一个“活动报名落地页”作为贯穿案例：AI 输出了 index.html、assets/ 图片目录、外部字体链接和一段模拟报名脚本。你会看到从收到文件到交给团队的完整路径：识别产物 → 预览 → 检查依赖 → 最小修改 → 选择去向 → 留下交付记录。
先回答一个问题：你要使用的是代码，还是代码产生的结果？
“使用 AI 生成的 HTML”经常指向四件不同的事：打开看看、改几处文案、转成团队可评审的原型、或者真的上线。把它们混在一起，最容易出现“页面能打开，但没人敢改”“看起来像成品，但接口全是假的”的情况。
| 你的目标 | 应该先处理什么 | 最后交付什么 | 不能省略的检查 |
|---|---|---|---|
| 快速演示 | 解压并预览页面，确认图片、字体和跳转 | 可访问的 HTML 文件夹或分享地址 | 资源路径、主要点击路径、不同屏幕宽度 |
| 继续做产品设计 | 把 HTML 导入可编辑原型，补页面和状态 | 可评论、可版本化的原型项目 | 页面层级、组件、文字、交互和敏感素材 |
| 进入研发上线 | 整理代码、替换模拟数据并接入工程环境 | 代码仓库、部署配置和验收记录 | 安全、权限、可访问性、性能、真实接口和回滚 |
本文的判断标准：HTML 不是终点，而是一个待验证的网页资产。先明确资产要服务谁，再决定是“打开它”“编辑它”还是“把它工程化”。
第一步：先识别 AI 输出的是哪一种 HTML
收到压缩包后，不要只看文件名。先把目录展开，确认入口文件和依赖关系。活动落地页案例可以先整理成下面这张清单：
| 看到的文件 | 说明 | 使用前要问 |
|---|---|---|
index.html | 通常是浏览器入口 | 引用的是相对路径，还是某个固定域名？ |
assets/、images/ | 图片、字体、图标或脚本资源 | 目录是否完整？文件名大小写是否一致？ |
style.css、app.js | 页面样式和交互逻辑 | 是否依赖 CDN、框架或构建产物？ |
package.json、src/ | 可能是 React、Vue 或其他工程 | 它是已经构建的静态页面，还是需要安装依赖后启动？ |
| 模拟 JSON、接口地址 | 用于填充页面内容或交互 | 数据是示例，还是已经接入可用服务？ |
只有一个 HTML 文件时，可能是单文件演示，也可能把图片、字体和脚本都写成了外链。多文件项目则要区分“可以直接打开的构建结果”和“需要开发环境运行的源码”。这一步的产物不是代码修改，而是一句清楚的判断：这是一个静态演示包、一个可转原型的页面，还是一个待接入工程的前端草稿。
第二步：先让页面稳定显示，再谈视觉修改
活动页案例可以按四个视口和三条路径快速预览：桌面首屏、手机首屏、报名表单、报名失败。预览时记录“事实”，不要只写“看起来不对”。
- 确认入口：打开
index.html或项目说明指定的启动入口，观察浏览器控制台是否有资源或脚本错误。 - 确认资源：检查 Logo、主图、字体、图标是否缺失；如果页面只有文字和空框，优先检查相对路径。
- 确认交互：点击报名按钮、展开 FAQ、关闭弹窗、提交空表单，记录每一步的预期结果。
- 确认响应式：用窄屏和宽屏各看一次，重点检查导航、按钮、长标题、表单和图片裁切。
如果双击文件后页面空白，常见原因有三类：资源路径写错、脚本使用了浏览器本地文件不允许的模块或请求、页面依赖外部服务但当前网络不可用。修复顺序应是先看控制台和网络请求，再改路径或启动方式，不要直接让 AI 重写整页，否则原本正确的结构也可能被覆盖。
第三步：用“最小修改协议”改 HTML
AI 生成页面最适合小步修改。先把变更分成内容、样式和行为三类，每次只动一类，才能知道问题是从哪里来的。
| 变更类型 | 适合直接改什么 | 修改后马上检查什么 |
|---|---|---|
| 内容 | 标题、按钮文案、活动时间、示例图片、联系方式 | 换行、长度、链接目标和是否仍与业务事实一致 |
| 样式 | 颜色变量、间距、字号、卡片圆角、响应式断点 | 桌面/手机布局、对比度、焦点状态和图片比例 |
| 行为 | 表单校验、弹窗开关、锚点跳转、错误提示 | 正常、空值、失败、重复点击和返回路径 |
给 AI 的修改请求也要带上边界，例如：“只修改报名按钮和提交成功提示，不改变页面结构；保留现有图片路径；提交为空时显示错误，不调用真实接口。”这样生成模型不会把局部修正扩展成全页重构。
第四步：如果要评审，把 HTML 转成可编辑原型
当产品、设计和研发需要共同讨论页面结构时，直接在代码里评论通常不是最高效的方式。此时可以把 HTML 导入可编辑原型，让团队先围绕页面、组件、状态和任务路径达成共识，再决定哪些内容进入工程。
墨刀相关页面当前介绍了将网页或 HTML 导入为可编辑原型的路径，生成后可以继续调整结构、组件、文字和交互。操作入口、账号权限和具体识别效果以当前工作区为准，可先查看网页转可编辑原型的方法。
- 准备输入：保留 HTML、图片、字体和必要的 CSS/JS，不要只上传一张截图。
- 导入后对照：检查首屏、导航、表单、弹窗和长列表是否被正确识别。
- 补齐状态：把加载、空数据、失败、权限不足和提交成功补进原型。
- 开始评审：让评论对应到具体页面或组件，并写清事实、影响和下一步。
- 冻结版本：确定哪些问题进入研发，哪些只是视觉探索，保留版本号和负责人。
如果 HTML 来自墨刀 AI API，官方 API 页面当前列出了生成 HTML 的 gen_html 与导入 HTML 的 import_html，导入接口页面标注为 Beta；使用前应核对当前文档、授权和账号权益，不能把接口示例当成所有账号都可用的承诺。详情可查看墨刀 AI API 页面。
第五步：根据目的选择“分享、原型还是上线”
同一份 AI HTML 可以走三条路径，但每条路径的验收标准不同。不要因为页面能打开，就跳过后续判断。
| 路径 | 适合场景 | 必须补的材料 | 不应假设的事情 |
|---|---|---|---|
| 分享演示 | 方案汇报、内部走查、客户现场展示 | 入口说明、浏览器要求、关键任务、备用截图 | 能演示不代表接入了真实数据 |
| 导入原型 | 需求讨论、交互评审、设计迭代 | 页面范围、状态清单、评论规则、版本负责人 | 结构识别不代表所有组件都可直接复用 |
| 研发上线 | 真实活动、产品页面、业务系统 | 代码仓库、接口契约、权限、安全、监控、回滚方案 | AI 生成的模拟逻辑不等于生产逻辑 |
如果你的目标只是无网络环境下演示已经完成的墨刀原型，可以参考墨刀离线 HTML 演示包说明。它解决的是“原型如何导出为可离线演示包”，与“AI 生成 HTML 如何进入设计或研发流程”不是同一个任务。
第六步：交给研发时，别只发一个压缩包
AI HTML 交付给研发时，最有价值的不是“代码已经生成”，而是让接手人知道哪些内容可以信、哪些内容只是占位、哪些问题还没有决定。活动页可以用下面的交付单：
| 交付项 | 活动页示例 | 接手人要核对什么 |
|---|---|---|
| 入口与版本 | V0.3，入口为 index.html | 当前评审的是哪一份文件，是否覆盖旧版本 |
| 页面范围 | 活动首页、报名弹窗、成功页、失败提示 | 未包含的页面和状态是否写明 |
| 数据说明 | 姓名和手机号目前是模拟字段 | 真实接口、校验和隐私要求由谁提供 |
| 资源说明 | 主图来自素材库，字体使用外链 | 版权、加载方式和生产环境可用性 |
| 验收条件 | 空表单提示、重复提交、移动端折行和回退路径 | 开发完成后按哪些结果判断通过 |
如果团队已经在墨刀中评审，可以把原型链接、版本号、状态说明和决策记录放在同一个任务里；如果直接进入代码仓库，则至少提交生成时的 HTML、修改后的版本、预览地址和变更说明。这样后续发现 AI 猜错时，能回到具体版本，而不是重新争论“当时生成的是什么”。
第七步：真正上线前，再做一次“网页而不是稿子”的检查
AI 生成的页面通常擅长呈现视觉效果，但上线还需要验证浏览器、数据和安全边界。至少检查下面八项：
- 所有本地图片、字体、图标和脚本在生产域名下都能加载。
- 外部 CDN、统计脚本和第三方组件有来源、版本和替代方案。
- 表单没有把敏感信息发送到未知地址，接口使用 HTTPS 并有服务端校验。
- 按钮、链接、键盘焦点、错误提示和颜色对比符合基本可访问性要求。
- 移动端没有横向溢出，长标题、长数字和异常文案不会覆盖其他元素。
- 真实接口失败、超时、重复提交和无权限时，用户能得到明确反馈。
- 页面性能经过真实资源体积检查，图片和脚本没有因为 AI 生成而无限膨胀。
- 上线前保留上一版地址或回滚包，并记录谁在什么时间确认了哪些结果。
如果只是要把页面部署为静态演示，选择支持静态文件的托管方式即可；如果页面依赖服务端渲染、数据库、登录或支付，就不能把上传一个 HTML 文件当成完整部署。部署方式应由页面的真实依赖决定，而不是由文件后缀决定。
给 AI 的 HTML 生成请求，应该提前写清哪些边界
很多“生成后不好用”的问题，其实在输入阶段就埋下了。可以用下面的约束减少返工：
这段提示词不会替你完成验收，但它会让产物更容易被打开、导入、评审和交付。生成结果仍要按本文的路径检查，尤其是外链、模拟数据和权限边界。
常见问题
AI生成的 HTML 可以直接双击打开吗？
如果它是自包含的静态页面，通常可以直接打开；如果引用了模块脚本、接口、字体或跨目录资源，双击打开可能出现空白、样式丢失或交互无效。先检查控制台、资源路径和项目说明，再决定使用浏览器预览、静态服务器或正式托管。
打开后只有文字，没有图片，怎么办？
优先检查图片路径、文件名大小写和压缩包目录是否完整。HTML 中的 assets/banner.png 必须对应真实文件和相对位置；不要只把图片重新命名而不同步引用路径。
AI生成的 HTML 能导入墨刀继续编辑吗？
墨刀相关页面当前介绍了网页或 HTML 转可编辑原型的路径，也提供 HTML 导入相关 API。导入后仍需检查页面层级、组件识别、状态和交互；具体入口、可用额度和识别效果以当前账号和工作区为准。
改 HTML 还是导入原型，哪个更合适？
只改少量文案、颜色或链接时，直接改 HTML 更快；需要产品、设计和研发共同评审页面结构与交互时，导入可编辑原型更合适；需要接入真实接口和部署流程时，应回到代码仓库和工程规范。
AI生成的 HTML 可以直接上线吗？
不建议直接上线。至少要完成真实数据替换、权限与安全检查、响应式和可访问性检查、第三方依赖核对、错误处理、性能检查和回滚准备。能在浏览器里显示，只说明演示路径成立。
AI生成 HTML 和 React 项目有什么区别？
单个 HTML 或静态文件夹更接近可直接预览的页面资产；React 项目通常还包含依赖、构建脚本、组件和环境变量，需要按项目方式安装、构建和部署。不要因为两者都能生成页面，就用同一套打开和上线方法。
怎样保留 AI 生成页面的版本？
至少保存原始压缩包、修改后的文件、预览地址、截图或录屏、变更说明和评审结论。版本号要写在文件或任务中，避免用“最终版”“最终版2”这类无法追踪的名称。
把 AI HTML 用在正确的位置，才会真正省时间
AI 生成 HTML 最有价值的地方，是快速把想法变成可以打开、可以讨论、可以继续编辑的网页资产。它不是自动完成的生产系统，也不是一张只能观看的截图。先判断目标，再检查依赖；需要讨论就转成可编辑原型，需要上线就交给工程流程，需要演示就保留清晰的入口和版本记录。
如果你已经有一份 HTML，可以从HTML 转可编辑原型开始；如果你想从墨刀原型生成离线演示包，可查看离线 HTML 演示说明。关键不是把文件放到某个工具里，而是让下一位接手的人知道：这份页面当前能做什么、还缺什么、下一步由谁负责。
