用 Codex 从截图还原响应式页面

把截图变成可运行、可检查、能适配移动端的前端实现。

官方概览

当你有截图、简短设计说明，或一些可作为灵感的参考图时，Codex 可以把它们转换成响应式 UI，同时不忽略项目里已经建立好的模式。

配合 Playwright skill，Codex 可以在真实浏览器里打开应用，在不同屏幕尺寸下把实现结果和截图对比，并持续调整布局或交互，直到更接近目标。

从参考资料开始

把你手里最清楚的 UI 参考资料交给 Codex。对于一个窄范围任务，一张截图可能已经足够；如果能提供桌面和移动端布局、悬停或选中状态、空状态和加载状态，交接质量会更好。

这些参考资料不必是完美的设计交付物。它们只需要把预期的层级、间距和方向表达得足够具体，让 Codex 不必凭空猜测。

明确交互和风格

你对预期交互模式和视觉风格说得越具体，结果越好。模型通常会默认使用高频模式和常见风格；如果参考资料没有清楚表达你想要别的方向，UI 可能会显得普通。

提供更多参考或更具体的说明，通常能让最终 UI 更有辨识度，也更贴近你的产品语境。

准备设计系统

当目标仓库已经有清晰的组件层时，Codex 的效果最好。它可以自动使用现有组件和设计系统，而不是从头重建。

如果你的技术栈不是标准结构，最好告诉 Codex 要复用哪些基础组件、token 在哪里、项目里按钮、输入框、卡片、字体和图标的规范是什么。

如果是在已有代码库里实现页面，Codex 很可能会自己理解组件和设计系统的用法；但如果是从零开始，明确说明会更稳。

把截图当成视觉目标，但要求 Codex 转译到项目真实的工具类、组件封装、颜色系统、字体阶梯、间距 token、路由、状态管理和数据获取模式中。
用 Playwright 在真实浏览器里检查不同断点，而不是只验证构建通过。
第一版通常应该方向接近；复杂布局、交互或动画较多时，应预期会有几轮调整。

官方 Starter Prompt 中文翻译

请根据我提供的截图和说明，把这个 UI 实现在当前项目中，并把这些材料作为真实依据。

要求：
- 复用现有设计系统组件和 token。
- 把截图转换成这个仓库已有的工具类和组件模式，不要另起一套并行系统。
- 尽量贴近截图中的间距、布局、层级和响应式行为。
- 遵守仓库已有的路由、状态管理和数据获取模式。
- 让页面同时适配桌面端和移动端。
- 如果截图中的某个细节不明确，选择仍然符合整体方向的最简单实现，并简短说明这个假设。

验证：
- 对照提供的截图检查最终 UI 的观感和行为。
- 使用 $playwright-interactive 检查 UI 是否匹配参考图，并按需要迭代，直到结果足够接近。