原文核对：2026-10-13 · 中文正文 · 英文提示词与演示
场景定位
让 Codex 将截图和设计说明转成符合仓库设计系统的代码，再使用 Playwright 在不同屏幕尺寸下与参考图比较，持续调整布局和交互。
- 难度
- 中级
- 时间跨度
- 1 小时
适合用于
- 从零创建前端项目。
- 在现有代码库中根据截图实现已设计好的页面或流程。
相关工具
在真实浏览器中打开应用，验证实现，并迭代布局和行为。
Playwright ↗起步提示词
英文原文 · 可复制后按实际材料修改
Implement this UI in the current project using the screenshots and notes I provide as the source of truth.
Requirements:
- Reuse the existing design system components and tokens.
- Translate the screenshots into this repo's utilities and component patterns instead of inventing a parallel system.
- Match spacing, layout, hierarchy, and responsive behavior closely.
- Respect the repo's routing, state, and data-fetch patterns.
- Make the page responsive on desktop and mobile.
- If any screenshot detail is ambiguous, choose the simplest implementation that still matches the overall direction and note the assumption briefly.
Validation:
- Compare the finished UI against the provided screenshots for both look and behavior.
- Use $playwright-interactive to check that the UI matches the references and iterate as needed until it does.简介
有了截图、简短设计说明或几份灵感参考，Codex 可以把它们转成响应式 UI，同时遵循项目已有的模式。
借助 Playwright 技能，Codex 可以在真实浏览器中打开应用，在不同屏幕尺寸下对照截图，并反复调整布局与交互，使实现更接近目标。
从参考材料开始
提供能最清楚表达目标 UI 的参考。小任务可能只需一张截图；但补充桌面和移动布局、悬停或选中状态、重要的空状态和加载界面，可以让交接更完整。
参考材料不必是完善的设计资源，只需足够明确地表达层级、间距和方向，让 Codex 不必猜测。
把要求写具体
对交互模式和风格的描述越明确，结果通常越好。模型往往默认采用常见模式和风格；如果参考没有表达不同意图，UI 可能显得普通。提供更多参考或更具体的说明，更有助于得到有特色的界面。
准备设计系统
当仓库已有清晰的组件层时，Codex 的效果更好。它可以直接使用现有组件和设计系统，无需从头重建。
必要时，尤其使用非标准技术栈时，应说明要复用哪些基础组件、设计变量在哪里，以及按钮、输入框、卡片、字体和图标应遵循哪些规范实现。
在现有代码库中，Codex 通常能自行理解组件和设计系统的用法；如果从零开始，最好明确说明。
让 Codex 把截图作为视觉目标，并使用项目实际的工具类、组件封装、色彩系统、字号层级、间距变量、路由、状态管理和数据获取模式来实现。
使用 Playwright
Playwright 能帮助 Codex 迭代 UI。它可以在真实浏览器中打开应用、与提供的截图比较，并调整布局或交互。
它还可以改变浏览器窗口尺寸，检查不同断点下的布局。
确保 Codex 已启用 Playwright interactive 技能。详见技能文档。
迭代
第一版的整体方向应已经接近截图。复杂布局、交互或大量动画的 UI 通常需要多轮调整。
要求 Codex 实际对照截图检查实现，而不仅仅确认页面能构建。遇到冲突时，应优先使用仓库设计系统的变量，仅做保持整体视觉所必需的最小间距或尺寸调整。
如果单张图无法说明某些状态，可以补充截图或简短说明。
后续提示词示例
官方提示词
英文原文 · 可复制后按实际材料修改
[current implementation image] [reference image]
This doesn't look right. Make sure to implement something that matches closely the reference:
[if needed, specify what is different]展开英文原文对照
Use Codex to translate screenshots and design briefs into code that matches the repo's design system, then use Playwright to compare the implementation to your references for different screen sizes and iterate until it looks right.
Introduction
When you have screenshots, a short design brief, or a few references for inspiration, Codex can turn those into responsive UI without ignoring the patterns already established in your project.
With the Playwright skill, Codex can open the app in a real browser, compare the implementation to your screenshots for different screen sizes, and iterate on layout or behavior until the result is closer to the target.
Start from references
Give Codex the clearest references you have for the UI you want. A single screenshot can be enough for a narrow task, but the handoff gets better when you include multiple states such as desktop and mobile layouts, hover or selected states, and any empty or loading views that matter.
The references do not need to be perfect design assets. They just need to make the intended hierarchy, spacing, and direction concrete enough that Codex is not guessing.
Be specific
The more specific you are about the expected interaction patterns and the style you want, the better the result will be. The model tends to default to high-frequency patterns and style so if it’s not clear from your references that you want something else, the UI might look generic. The more input you give, be it more reference inspiration or more specific instructions, the more you can expect to have a UI that stands out.
Prepare the design system
Codex works best when the target repo already has a clear component layer. Codex can automatically use your existing component and design system instead of recreating them from scratch.
If necessary, such as when you’re not using a standard stack, specify to Codex which primitives to reuse, where your tokens live, and what the repo considers canonical for buttons, inputs, cards, typography, and icons.
If you’re starting from an existing codebase, Codex will likely understand on its own how to use your components and design system, but if starting from scratch, it’s a good idea to be explicit.
Ask Codex to treat the screenshots as a visual target but to translate that target into the project’s actual utilities, component wrappers, color system, typography scale, spacing tokens, routing, state management, and data-fetch patterns.
Leverage Playwright
Playwright is a great tool to help Codex iterate on the UI. With it, Codex can open the app in a real browser, compare the implementation to the screenshots you provided, and iterate on layout or behavior.
It can resize the browser window to different screen sizes and check the layout at different breakpoints.
Make sure you have the Playwright interactive skill enabled in Codex. For more details, see the skills documentation.
Iterate
The first pass should already be directionally close to the screenshots. For complex layouts, interactions, or animation-heavy UI, expect a few rounds of adjustment.
Ask Codex to compare the implementation back to the screenshots, not just whether the page builds. When conflicts come up, it should prefer the repo’s design-system tokens and only make minimal spacing or sizing adjustments needed to preserve the overall look of the design.
Use additional screenshots or short notes if they help clarify states that are not clear from one image.
Suggested follow-up prompt
官方提示词
英文原文 · 可复制后按实际材料修改
[current implementation image] [reference image]
This doesn't look right. Make sure to implement something that matches closely the reference:
[if needed, specify what is different]