简介

如果您有屏幕截图、简短的设计简报或一些灵感参考，Codex 可以在遵循项目既有模式的前提下，将这些素材转化为响应式 UI。

使用 Playwright 技能时，Codex 可以在真实浏览器中打开应用，针对不同屏幕尺寸将实现效果与您的屏幕截图进行比较，并迭代调整布局或行为，直至结果更接近目标。

从参考素材入手

请向 Codex 提供最清晰、最能体现目标 UI 的参考素材。对于范围较小的任务，一张截图可能就足够；但如果您能提供多种状态，例如桌面端和移动端布局、悬停或选中状态，以及重要的空状态或加载视图，设计交接会更顺畅。

这些参考素材不必是完美的设计交付物，只需足够具体地呈现预期的层级结构、间距和设计方向，让 Codex 无需自行猜测。

说明具体要求

您对预期的交互模式和目标样式说明得越具体，结果就会越好。 模型往往会默认采用常见的模式和样式，因此，如果参考素材没有明确体现您想要不同的效果，UI 可能会显得千篇一律。 您提供的信息越多——无论是更多灵感素材，还是更具体的指令——就越有可能得到别具一格的 UI。

准备设计系统

当目标代码仓库已有清晰的组件层时，Codex 的效果最佳。Codex 可以自动使用现有的组件和设计系统，而不必从头重新创建。

必要时，例如未使用标准技术栈时，请明确告诉 Codex 要复用哪些基础组件、Token 位于何处，以及代码仓库中按钮、输入框、卡片、排版和图标的标准实现是什么。

如果从现有代码库着手，Codex 很可能会自行理解如何使用您的组件和设计系统；但如果从零开始，最好明确说明这些信息。

请让 Codex 将屏幕截图视为视觉目标，但要使用项目实际采用的工具类、组件封装、色彩系统、字号层级、间距 Token、路由、状态管理和数据获取模式来实现这一目标。

利用 Playwright

Playwright 非常适合帮助 Codex 迭代 UI。Codex 可以使用 Playwright 在真实浏览器中打开应用，将实现效果与您提供的截图进行比较，并迭代调整布局或行为。

它可以针对不同屏幕尺寸调整浏览器窗口大小，并检查各个断点下的布局。

请确保已在 Codex 中启用 Playwright 交互式技能。有关更多详细信息，请参阅技能文档。

迭代

首次实现从整体方向上就应与截图比较接近。对于布局复杂、交互复杂或包含大量动画的 UI，预计还需要进行几轮调整。

请让 Codex 对照截图检查实现效果，而不只是确认页面能否构建。出现冲突时，应优先采用代码仓库的设计系统 Token，并且只对间距或尺寸做必要的最小幅度调整，以保持设计的整体视觉效果。

如果某些状态无法从一张图片中清楚看出，请使用更多截图或简短说明加以澄清。

建议的后续提示词