场景定位
把截图、简短设计 brief 或参考站点转成现有项目里的响应式 UI。Codex 应复用仓库已有组件、tokens、路由和状态模式，并用 Playwright 在真实浏览器里对照截图迭代。
- 难度
- 中级
- 时间跨度
- 约 30-60 分钟
适合用于
- 从零创建新的前端项目
- 在现有代码库中根据截图实现已经设计好的页面、状态或流程
Skills & Plugins
相关工具
Starter Prompt
起步提示词
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.介绍
当你有截图、简短设计 brief 或几个视觉参考时，Codex 可以把它们转成响应式 UI，并且不忽略项目里已有的模式。
配合 Playwright skill，Codex 可以在真实浏览器里打开 app，在不同屏幕尺寸下把实现和截图对比，并持续调整布局或行为，直到结果更接近目标。
从参考材料开始
把你能提供的最清楚参考交给 Codex。一个截图足以处理窄任务；如果包含 desktop 和 mobile 布局、hover 或 selected 状态、empty 或 loading view，交付会更可靠。
参考材料不一定是完美设计稿。它们只需要让层级、间距和方向足够具体，让 Codex 不必猜测。
- 关键视口：desktop、tablet、mobile。
- 关键状态：default、hover、selected、empty、loading、error。
- 需要保留的产品规则：导航、权限、数据来源、已有组件约定。
明确交互和风格
你对预期交互模式和视觉风格越具体，结果越好。如果参考图里没有明显表达特殊风格，模型容易落到高频、通用的 UI 模式上。
更好的输入包括具体 inspiration、布局优先级、密度、边距、按钮状态、表单行为和哪些部分必须与截图一致。
准备设计系统
Codex 在目标 repo 已有清晰组件层时效果最好。它通常能自动使用现有组件和 design system，而不是从零再造一套。
如果项目不是标准栈，应该明确告诉 Codex 要复用哪些 primitives、tokens 在哪里、button/input/card/typography/icons 哪些实现是 canonical。
要求 Codex 把截图当成视觉目标，但把目标翻译成项目实际 utilities、component wrappers、color system、typography scale、spacing tokens、routing、state management 和 data-fetch patterns。
使用 Playwright
Playwright 很适合帮助 Codex 迭代 UI。它可以在真实浏览器中打开 app，把实现和你提供的截图对比，并调整布局或行为。
它也可以调整浏览器窗口尺寸，在不同断点下检查布局。
确保 Codex 启用了 Playwright interactive skill。对复杂布局、响应式状态和交互而言，只跑 build 通常不够。
迭代
第一版应该已经在方向上接近截图。复杂布局、交互或动画较多的 UI，通常需要几轮调整。
要求 Codex 对照截图检查实现，而不只是确认页面能构建。当参考和本地系统冲突时，应优先保留 repo 的 design-system tokens，只做必要的 spacing 或 sizing 调整来保留整体视觉。
如果一个截图没有说明状态差异，用补充截图或短说明澄清。
Prompt Library
建议提示词
对照截图修复
Use $playwright-interactive to compare the current page against these screenshots at desktop and mobile widths. List the visible differences, then fix spacing, hierarchy, responsive behavior, and interaction states while reusing the existing design system.补状态
Add the missing empty, loading, and selected states shown in the reference screenshots. Keep dimensions stable so the layout does not jump when state changes.