image-to-code

图像转代码

你的任务是将视觉目标图像转化为高质量、可交互的网站或 Web 应用。

关键覆盖规则

• 继续之前，请参阅插件路由器 $index。
• 遵循 $critical-overrides。

用户上下文

开始之前，请加载 $user-context，并在本地 shell 可用时运行其预检脚本。

在相关情况下，使用保存的产品 URL、Figma 文件、屏幕截图、参考图像、代码库路径、Storybook、设计令牌、设计系统、品牌素材、组件参考、浏览器偏好设置和分享目标作为参考依据。

不要检查所有已保存的参考资料。只检查当前任务所需的内容。

[IMPORTANT] 在 ChatGPT Work Mode 中预览原型

启动 sites-preview 不等于完成验证。验证需要在云端浏览器中打开 http://terminal.local:4173/，检查渲染后的页面、测试主要交互、检查浏览器控制台错误，并通过设计 QA。

不要用 HTTP 健康检查、构建成功、预览服务状态或部署成功来代替浏览器验证。如果无法使用云端浏览器，请报告验证受阻。

在 ChatGPT Work Mode 中进行本地原型验证和设计 QA：

1. 如有需要，请安装依赖。项目必须有 npm dev 脚本。
2. sites-preview 会运行 npm run dev -- --host 0.0.0.0 --port 4173 --strictPort。dev 脚本必须接受这些标志。
3. 对于 Vite 或 Vinext 项目，使用 "dev": "vite"。不要使用 vinext dev。配置 Vite 时，设置 server.host: "0.0.0.0" 和 server.allowedHosts: ["terminal.local"]。
4. 在网站根目录运行 sites-preview start "$PWD"。
5. 在云端浏览器中打开 http://terminal.local:4173/。不要使用 localhost、127.0.0.1、0.0.0.0、HTTPS 或其他端口。
6. 报告完成前，请验证渲染后的网站及其主要交互。
7. 永远不要向用户提及 terminal.local 或输出该 URL。使用 @Sites 部署一个检查点，并且只向用户提供已部署检查点的 URL。

移动端原型

对于移动应用或手机原型，除非用户指定设备，否则请在 390 × 844 的尺寸下构建并验证。使用初始模板的 .mobile-prototype 封装元素。不要在应用外壳上使用 min-height: 100vh。应用界面必须限制在 390 × 844 的画面内。每个屏幕都必须适配 390px 宽度，不得出现水平滚动、文字裁切、控件裁切或主要操作超出屏幕的情况。

工作流

关键：这不是指南，而是必须完成的检查清单。

1. 除非你已有选定的图像、屏幕截图、模型图或 Image Gen 结果可供重现，否则不要开始。仅有文字简报并不足够。

2. 在开始构建前，确定确切选定的视觉目标。

   • 如果用户选定了编号的 $ideate 选项，请使用最近一组创意构思中按顺序显示的第 N 个生成图像结果。不要使用原始概念规划顺序或 Image Gen 提示词提交顺序。
   • 只有当 $ideate 中的概念名称列表明确按照图像的显示顺序排列时，才使用该列表。
   • 生成图像结果 ID、选定的图像附件、屏幕截图、模型图或 Figma 画板的优先级高于单纯的序号。有确切引用时，应优先使用。
   • 如果无法明确确定选定的结果，请在开始实现前停下来，请用户说明概念名称，或重新附上／选择图像。绝不要猜测并构建相近的选项。

3. 将确定的图像视为需要重现的设计。

4. 如果提供的设计是移动端视口，就构建移动应用。如果不明确，则默认构建桌面应用。

5. 查看参考设计，列出设计中的所有图像资源，并使用 Image Gen 工具为每项资源单独生成图像。放大查看，确保捕捉到每一项需要生成的资源。

   示例包括：

   • 主视觉图像，包括全幅图像背景
   • 特色文章配图
   • 缩略图
   • 装饰性插图
   • 纹理和背景图案
   • 徽标
   • 产品图像
   • 头像

   规则：

   • 关键规则：绝不要用自定义 div 艺术、CSS 艺术、内联 SVG、手工绘制的 SVG、HTML 元素绘图、div/span 形状、CSS 绘图、渐变、表情符号或文本字形来替代真实的图标和图像资源。图像应使用内置的 Image Gen 工具，图标应使用最接近的图标库。
   • 如果文字属于图像资源的一部分，就将其保留在图像资源中。例如，全幅主视觉图像、标牌、海报、包装、店面、文章插图，以及文字属于视觉内容本身的插图。除非原图明确显示可编辑的 UI 文字叠加在图像上，否则不要裁剪背景图像，再用透明文字框、HTML、CSS 或单独的叠加层重新创建这些文字。
   • 如果参考设计暗示了定制视觉内容，不要使用通用占位内容。
   • 生成的资源必须与参考模型图采用相同的艺术指导、调色板、渲染风格和设计语言。
   • 内置的 Image Gen 工具不支持透明图像；需要透明背景时，请对生成的资源进行后期处理。

并行制作素材

完成参考素材的编目和测量后，在主 Agent 搭建应用结构的同时，最多启动 3 个素材子 Agent。

每次给每个子 Agent 分配一项栅格素材任务，并提供参考裁剪图、精确尺寸、焦点、风格、输出路径和使用该素材的组件。素材子 Agent 只负责生成、检查、保存素材并报告素材路径。它们不得编辑源代码、运行浏览器或部署。

优先处理首屏关键素材，然后让 Agent 接着制作辅助素材。不要委派标准 UI 图标或已提供的品牌 Logo。

6. 定义页面的所有版块。仔细测量布局、元素之间的间距，以及元素本身的尺寸和占用空间。

7. 查找与目标设计匹配的免费字体。

8. 查找与目标设计匹配的免费图标库。不要默认使用 Lucide 图标。请搜索最合适的图标库。

   规则：

   • 关键规则：不得创建自定义内联 SVG、手绘 SVG、HTML 元素绘图、div/span 形状、CSS 绘图、渐变、Emoji 或文本字符图形。请使用内置的 Image Gen 工具生成素材，并为图标选用最匹配的图标库。

9. 从 local-prototype-preflight 开始构建应用。除非用户要求静态模型、完整的生产环境行为或其他范围，否则应让应用或网站具备实际功能，包括：

   • 可用的导航、链接、选项卡、菜单和主要 CTA。
   • 主体验中展示的可用输入框、筛选器、开关、选择项和表单。
   • 可见的 UI 状态：悬停、焦点、选中、打开/关闭、加载、空状态，以及相关的成功状态。
   • 如果产品包含主要任务、转化路径或用户旅程，应确保从开始到结束均可正常运行。

   核心体验之外的控件可以仅作视觉展示。除非用户要求，否则不要构建身份验证、持久化、后端/API 调用、集成或穷尽所有边缘情况。

   规则：

   • 继续之前，先将生成的所有图片素材放到对应位置。再强调一次，继续之前必须替换所有占位符，包括 CSS/SVG 占位符。
   • 核心体验中的控件不得仅作为静态装饰。除非用户要求，否则不要新建页面或路由。

10. 运行本地应用。

11. 根据 $index 中的浏览器选择规则，截取本地应用。

12. 将 design-qa 作为阻断式构建门槛运行。

    步骤：

    • 撰写 QA 报告前，打开参考图片和最新的原型截图。
    • 对比相同视口和相同交互状态。如果两者不匹配，请先截取缺失的视图。
    • 将 QA 报告保存为项目根目录下的 design-qa.md。
    • 修复 P0/P1/P2 问题，重新截取应用并重复以上步骤，直到 QA 报告显示 final result: passed。
    • 不要为 P3 细节反复迭代。将剩余的 P3 问题作为后续迭代说明。
    • 如果无法获取源图、原型截图或进行视觉对比，请停止。design-qa.md 必须写明 final result: blocked。
    • 只有在 design-qa.md 存在且写明 final result: passed 时，才能交付。

13. 交付应用或网站。

    • 只有在 design-qa 通过后才能交付。
    • 保持原型在本地运行。
    • 在 Codex Desktop 中，提供可点击的本地 URL。在 ChatGPT Work Mode 中，使用 @Sites 部署一个检查点，并且只提供其部署 URL；绝不要输出 terminal.local。
    • 提供原型链接后，使用 critical-overrides.md 中的共享构建交接说明。不要添加其他完成消息。
    • 加入 critical-overrides 中的构建后迭代和分享提示。