Codex 生成的多页面 HTML，可以通过墨刀的 HTML 转原型入口，或墨刀 AI MCP 的 import_to_proto 导入为可继续编辑的原型。先把每个页面整理成可独立打开的 HTML，再确认页面名称、文字组件和跳转目标；React、Vue 工程需要另行准备 HTML，不能把项目目录或外部网页地址直接当作导入材料。
如果你已经有首页、列表和确认页，下一步可使用墨刀 HTML 转原型把页面结构转成可编辑组件，再补齐交互、分享评审。导入解决“页面怎样继续改”，浏览器里能运行的 JavaScript、登录权限和接口请求仍要分别处理。
先判断手上的文件能不能直接导入
文件名带有 .html，不一定代表页面内容就在文件中。一个只有根节点、需要 JavaScript 请求数据后才显示界面的入口文件，与包含完整标题、按钮、卡片和内联样式的静态 HTML，转换时拿到的材料不同。
| 手头材料 | 先做什么 | 进入墨刀的方式 |
|---|---|---|
| 完整的单页 HTML | 打开文件，确认标题、文字、按钮与图片能显示 | 工作区入口粘贴代码，或通过 MCP 提供 HTML 文本 |
| 多个独立 HTML 文件 | 整理页面名、文件名和页面之间的去向 | 通过 MCP 提交 HTML 页面列表；手动操作时按当前入口支持的方式逐页导入 |
| 墨刀 AI 已完成的 HTML 任务 | 找到本人任务，确认状态已经完成且产物为 HTML | 通过 MCP 提供任务 ID 或任务链接 |
| React / Vue 工程 | 保留原工程，另做包含实际内容的静态 HTML 版本 | 导入整理后的 HTML；不直接提交工程目录 |
| 网页 URL 或本地预览地址 | 获取有权使用的完整 HTML 和必要资源 | MCP 不直接接收外部网页 URL；本地地址也不能替代 HTML 正文 |
| 截图、草图 | 确认只拥有图片，没有可用代码 | 使用图片转原型，再补页面关系 |
多页 HTML 导入后，新原型创建在当前账号的默认个人空间。不要在指令里假定可以直接指定企业空间；后续的共享与组织管理，按实际工作区权限处理。完整 MCP 配置可先看墨刀 AI MCP 使用指南。
用三页会员权益中心准备一份可导入材料
先做一个小而完整的任务：用户在会员首页查看积分，进入权益列表，选择权益并确认兑换。文件只分三页，成功、积分不足和库存不足作为确认页的不同状态，避免一开始就生成许多彼此没有联系的页面。
| 文件 | 页面内容 | 主要去向 |
|---|---|---|
index.html | 会员身份、可用积分、权益入口 | “查看权益”进入 benefits.html |
benefits.html | 权益名称、所需积分、剩余库存 | “立即兑换”进入 confirm.html；返回会员首页 |
confirm.html | 权益摘要、所需积分、确认与取消；结果状态 | 取消返回列表；成功后返回首页；失败后调整或返回 |
本例使用“会员有 1,200 积分、兑换一张需要 800 积分的咖啡券”。把这些数值写进生成要求，模型才能在列表、确认和结果三个位置保持一致。积分扣减在这里只用于表达页面状态，真正提交兑换时仍要由服务端校验。
可以把下面的要求直接交给能读写本地文件的 Codex。已存在同名目录时，先让它列出文件并保留原版本，再保存修改。
在 membership-prototype 目录生成三个可独立打开的静态页面：
index.html、benefits.html、confirm.html。
场景：会员有1200积分，要用800积分兑换咖啡券。
所有页面采用同一套中文布局、按钮和间距。
每个HTML包含完整页面内容和内联CSS，不依赖框架、远程字体或构建工具。
首页进入权益列表，列表进入确认页；取消返回列表，成功返回首页。
确认页展示成功、积分不足、库存不足三个可切换状态。
用普通HTML文字、按钮和卡片表达内容，不把整页绘制成图片或canvas。
另写page-map.md，列出每个按钮的源页面、目标页面/状态、取消与返回行为。
完成后逐个打开文件，检查链接、中文、窄屏和状态；先不要导入墨刀。如果 Codex 输出了 package.json、src/App.tsx 和一个空壳 index.html，它做的是前端工程。继续说明“保留工程，额外导出用于原型转换的静态 HTML”，不要把文件后缀改为 HTML 就提交。
导入前先在浏览器走通，再保留页面对照
从 index.html 开始点击“查看权益”，在列表选择咖啡券，进入确认页后先取消一次，再重新进入并确认兑换。分别切换积分不足、库存不足，确认它们不会显示成功结果。窄屏下检查文字是否遮挡按钮、操作区是否超出视口。
下面的三页练习包含完整 HTML、内联样式和页面对应表。下载解压后打开 index.html 即可开始，先比较浏览器中的页面和链接，再按下方步骤核对导入结果。
下载三页HTML练习与页面对应表，解压后从首页开始操作，再对照页面表逐项检查。
此时保存三类信息，后续对照会快很多：
- 每页一张浏览器截图，使用相同宽度；
- HTML 文件与页面名称的对应表；
page-map.md中的按钮、跳转和状态规则。
不要只留一个本地地址。http://localhost:3000 指向你电脑上的预览服务，远程工具无法凭这个地址读取本地页面；截图也不能替代可编辑的 HTML 结构。
路径一：在墨刀工作区转换 HTML
- 打开墨刀工作区的“HTML 转原型”入口，准备好目标页面的完整 HTML。
- 把代码粘贴到输入区，而不是粘贴文件路径、浏览器地址或 Markdown 代码围栏。
- 启动转换，完成后打开生成的原型页面。对多文件材料，按当前入口提供的页面组织方式操作；单页输入区就逐页转换，不把三份完整文档直接拼成一份。
- 为页面使用稳定名称，例如“01 会员首页”“02 权益列表”“03 兑换确认”。
- 选择标题、按钮、权益卡片分别修改，确认这些对象可编辑，再进入演示检查跨页动作。
如果输入区一次只接收一个页面，先完成首页转换，再处理列表和确认页；不要用“它能转换 HTML”推断“它一定会识别任意文件夹或所有路由”。多页面组织更明确的方式，是下一节的 MCP 页面列表。
路径二：让 Codex 读取文件，再调用墨刀 MCP 导入
连接成功后，Codex 可以先读取本地文件，把内容交给 import_to_proto。文件读取发生在你的客户端，导入时提交的是读取到的 HTML；工具不会自行访问你电脑上的路径。
读取 membership-prototype 中的 index.html、benefits.html、confirm.html。
先确认每个文件都有完整HTML正文，并按“会员首页、权益列表、兑换确认”命名。
使用墨刀MCP的 import_to_proto，将三页作为HTML页面列表导入。
按当前工具声明填写参数，不传本地路径或localhost地址代替HTML。
导入完成后返回原型链接和页面对应关系；如果返回错误，保留错误原因，
不要重复生成新页面或自行改成React/Vue工程。如果 HTML 来自墨刀 AI 自己的生成任务，先用 get_task_result 查询任务状态。完成后可使用本人任务 ID 或任务链接导入，不必把页面重新生成一遍；任务仍在运行时继续查询即可。
原型链接返回后，先打开确认项目与三张画布确实存在。需要让 Codex 辅助核对结构时，可以用 get_proto_details 先取得目录，再逐画布读取组件、文本和交互；这项能力只读，不会代替你在画布里修改内容。具体读取步骤见Codex 读取墨刀原型教程。
导入前后对照：哪些内容已经转过来，哪些还要补
不要用“看起来像”判断转换是否完成。以同一张权益确认页为对象，逐项对照源文件与原型，区分视觉、结构和行为。
| 导入前的 HTML | 导入后检查 | 下一步修改 |
|---|---|---|
| 咖啡券标题、800 积分 | 文字内容一致，能单独选择标题和积分文案 | 修正断行与文字层级；不要为改一个数字重新生成整页 |
| 会员卡、权益卡、操作区 | 容器与元素层次可理解，页面宽度与源文件相符 | 整理层级与命名，统一卡片间距 |
| “取消”指向权益列表 | 演示时是否进入正确的列表画布 | 目标缺失时，在原型中重新连接到列表 |
| JavaScript 切换成功/失败状态 | 是否有对应画布、弹层或交互状态 | 未还原时，把结果拆成明确状态并连接按钮 |
| 模拟积分扣减 | 成功结果是否表达扣减后 400 积分 | 修正演示文案；真实扣减规则记录在交互说明中 |
| 返回首页或再次兑换 | 返回路径是否保留一致的页面状态 | 明确返回后的状态，避免成功后又显示旧余额 |
墨刀会把可识别的 HTML 结构转换为容器、按钮、文本等组件。脚本里包含的网络请求、复杂运行时状态和第三方插件，需要看实际转换结果；没有转成原型交互的部分，可用页面跳转、弹层和状态画布表达。这样评审的是同一套业务规则，而不是假定浏览器代码已经全部移植。
常见导入问题：怎样复现，怎样定位
| 现象 | 先复现与检查 | 处理方法 |
|---|---|---|
| 只看到空白容器 | 打开原 HTML 源码，检查正文是否只有根节点，内容是否由框架运行后才渲染 | 让 Codex 另做含实际文字、按钮、布局的静态版本，不只复制工程入口 |
| 样式或图片缺失 | 暂时断开开发服务，再打开文件；检查外部 CSS、本地绝对路径与受登录保护资源 | 将必要 CSS 内联；图片使用你有权使用且导入服务可读取的资源方式，再试一页 |
| 三页只剩一页 | 检查是否把三份文档直接拼接，或实际只提交了 index.html | 拆成有名称的页面列表，或按入口逐页转换 |
| 文字能改，按钮不跳转 | 对照 page-map.md，查看源按钮是链接还是依赖脚本；检查原型中的目标画布 | 在画布补连接，并把取消、返回、失败后的去向一起补齐 |
| 外部 URL 被拒绝 | 确认调用里传的是网页地址，还是实际 HTML 文本 | 把有权使用的 HTML 内容交给工具；不要反复提交同一个外部地址 |
| 任务 ID 导入失败 | 核对是否本人任务、是否完成、产物是否为 HTML | 运行中就查询状态；React/Vue 任务另准备 HTML；保留原任务，不重复发起 |
| 整页只有一个图片对象 | 查看源 HTML 是否只有 img、canvas 或截图背景 | 要求使用独立文字与控件重建必要区域，或改走图片转原型再补结构 |
每次只修一个可复现的问题。比如样式丢失时，先用一页验证内联 CSS，再批量处理其他页面；不要同时更换全部布局、状态和文件组织方式，否则无法判断是哪项修改解决了问题。
进入画布后，怎样继续迭代而不打乱已确认流程
会员权益中心的第一轮调整顺序可以是：先统一页面名称，确认 1,200、800、400 三处积分关系；再整理共享的导航、权益卡和主按钮；随后连接确认、取消、成功与失败状态；最后统一字号、间距和窄屏布局。
需要继续用 AI 修改 HTML 时，在原生成任务上说明范围，例如：“只修改确认页的积分不足状态，保留其他两页和现有链接”。需要改已导入的原型时，在工作区编辑组件与交互，保留已经确认的版本。源 HTML 和画布不会因为同名就自动双向同步，重新导入前要确认保留哪一份修改。
请只修改会员权益确认页：
积分不足时显示“还差200积分”，主操作改成“查看积分获取方式”；
库存不足时显示“该权益已兑完”，主操作返回权益列表。
成功页保持“兑换成功，剩余400积分”。
不修改首页和列表布局，不改变取消与返回的目标。
列出本轮改动涉及的状态，便于与墨刀画布逐项对应。最终让评审人从首页独立完成兑换，再故意走一次失败和返回路径。页面结构不清楚时先调整组件；规则说不清楚时补交互说明文档；已经进入细节讨论时，可按AI 原型迭代方法缩小每轮修改范围。分享前可结合AI 原型评审清单走查主要任务。
如果材料来自一套已经运行的网站，而不只是新生成的 HTML，可先按代码转设计工作流整理范围和资源；只有页面截图时，则参考网页转设计稿的方法选择对应入口。
