概览
使用 Codex 将截图和设计说明转化为符合仓库设计系统的代码，然后使用 Playwright 在不同屏幕尺寸下将实现结果与你的参考图进行比较，并持续迭代直到效果正确。
适合场景
- 从零开始创建新的前端项目
- 在现有代码库中，根据截图实现已经设计好的页面或流程
起始提示词
根据我提供的截图和说明，在当前项目中实现这个 UI，并将它们作为唯一可信依据。 要求： - 复用现有的设计系统组件和 token。 - 将截图转化为此仓库的工具类和组件模式，而不是另起一套平行系统。 - 尽可能准确匹配间距、布局、层级和响应式行为。 - 遵循仓库现有的路由、状态管理和数据获取模式。 - 让页面在桌面端和移动端都具备响应式效果。 - 如果截图中的任何细节有歧义，选择最简单但仍符合整体方向的实现方式，并简要说明你的假设。 验证： - 将完成后的 UI 与提供的截图在外观和行为两方面进行比较。 - 使用 $playwright-interactive 检查 UI 是否与参考图一致，并根据需要持续迭代，直到匹配。
建议推理强度：中
简介
当你有截图、一份简短的设计说明，或一些用于启发灵感的参考资料时，Codex 可以将它们转化为响应式 UI，同时不会忽视项目中已经建立的模式。
借助 Playwright skill，Codex 可以在真实浏览器中打开应用，针对不同屏幕尺寸将实现结果与你的截图进行比较，并持续调整布局或行为，直到结果更接近目标。
从参考资料开始
把你手头最清晰的 UI 参考资料交给 Codex。对于范围较小的任务，一张截图可能就足够了；但如果你能提供多个状态，例如桌面端和移动端布局、悬停态或选中态，以及任何重要的空状态或加载视图，交付效果通常会更好。
这些参考资料不需要是完美的设计交付物。它们只需要足够清楚地体现预期的层级、间距和整体方向，让 Codex 不必靠猜测来完成。
明确具体
你对预期的交互模式和想要的风格描述得越具体，结果通常就越好。 模型往往会默认采用高频的模式和风格，因此如果你的参考资料没有明显表明你想要的是别的效果，UI 可能看起来会比较通用。 你提供的输入越多，无论是更多灵感参考还是更具体的说明，你就越有可能得到一个更有辨识度的 UI。
准备设计系统
当目标仓库已经有清晰的组件层时，Codex 的效果最佳。Codex 可以自动使用你现有的组件和设计系统，而不是从头重新创建它们。
如果你认为有必要（例如你使用的不是标准技术栈），可以明确告诉 Codex 应复用哪些基础组件、token 存放在哪里，以及仓库中对于按钮、输入框、卡片、排版和图标的规范定义是什么。
如果你是从现有代码库开始，Codex 很可能会自行理解如何使用你的组件和设计系统；但如果是从零开始，明确说明通常是个好主意。
你可以要求 Codex 将截图视为视觉目标，但要把这个目标转化为项目实际使用的工具类、组件封装、配色系统、排版比例、间距 token、路由、状态管理和数据获取模式。
利用 Playwright
Playwright 是帮助 Codex 迭代 UI 的优秀工具。借助它，Codex 可以在真实浏览器中打开应用，将实现结果与你提供的截图进行比较，并迭代调整布局或行为。
它还可以将浏览器窗口调整为不同屏幕尺寸，并检查不同断点下的布局。
请确保你已经在 Codex 中启用了 Playwright interactive skill。更多详情请参阅技能文档。
迭代
第一次实现通常就应该在方向上接近截图。对于复杂布局、交互或动画较多的 UI，预计还需要进行几轮调整。
让 Codex 将实现结果回过头来与截图进行比较，而不只是检查页面能否成功构建。当出现冲突时，它应优先遵循仓库的设计系统 token，只在维持设计整体观感所必需的情况下，对间距或尺寸做最小幅度的调整。
如果额外的截图或简短说明能够帮助澄清单张图片中不明显的状态，也可以补充提供。