简介

当你手头有截图、简短的设计简报或几张用于寻找灵感的参考图时，Codex 能将它们转化为响应式 UI，同时兼顾项目中已有的既定模式。

借助 Playwright 技能，Codex 可以在真实浏览器中打开应用，将实现效果与你的截图在不同屏幕尺寸下进行对比，并不断迭代布局或交互行为，直到结果更接近预期目标。

从参考图开始

为 Codex 提供你手头最清晰的 UI 参考图。单张截图可能足以完成简单的任务，但如果你能提供多种状态（例如桌面端和移动端布局、悬停或选中状态，以及任何重要的空白或加载视图），交接效果会更好。

这些参考图不需要是极其完美的设计交付物，它们只需让预期的层级、间距和方向足够具体明确，以免 Codex 盲目猜测。

具体明确

你对预期的交互模式和想要的效果风格描述得越具体，最终结果就越好。模型往往会倾向于使用高频的常见模式和样式，如果从参考图中看不出你想要别具一格的设计，生成的 UI 可能会显得千篇一律。你提供的输入越多（无论是更多的参考灵感还是更具体的指令），就越有希望得到令人眼前一亮的 UI。

准备设计系统

当目标代码库已经具备清晰的组件层时，Codex 的表现最佳。Codex 可以自动使用你现有的组件和设计系统，而不是从头开始重建。

如果你认为有必要（即如果你使用的不是标准技术栈），请向 Codex 明确指定要复用的基础组件、token 所在的位置，以及代码库中关于按钮、输入框、卡片、排版和图标的规范标准。

如果你是在现有代码库基础上开发，Codex 很可能会自行理解如何使用你的组件和设计系统；但如果你是从零开始，最好明确给出说明。

要求 Codex 将截图作为视觉目标，但需将该目标转化为项目实际使用的工具类、组件封装、颜色系统、排版比例、间距 token、路由、状态管理以及数据获取模式。

善用 Playwright

Playwright 是一款帮助 Codex 迭代 UI 的绝佳工具。借助它，Codex 可以在真实浏览器中打开应用，将实现效果与你提供的截图进行对比，并对布局或交互行为进行迭代。

它可以调整浏览器窗口至不同的屏幕尺寸，并检查不同断点下的布局情况。

请确保你在 Codex 中已启用 Playwright interactive 技能。有关更多详情，请参阅 技能文档.

迭代

第一版实现应当在整体方向上与截图保持接近。对于复杂的布局、交互或包含大量动画的 UI，预计需要进行几轮调整。

要求 Codex 将实现效果与截图进行对比，而不仅仅是检查页面能否正常构建。当出现冲突时，应优先使用代码库设计系统的 token，仅进行必要的最小间距或尺寸调整，以保持设计的整体外观。

如果有助于阐明单张图片中不够明显的各种状态，可以使用额外的截图或简短备注进行补充。

建议的后续提示词