第十一节 Codex skills：精细化建构前端设计
提示词模板
代码块
Markdown
请根据我提供的截图和说明，在当前项目中实现该界面，以这些截图和说明为唯一依据。
要求：
- 复用现有的设计系统组件与原子设计体系中的通用元素。
- 将截图中的设计转化为本仓库的实用工具与组件模式，而非另行构建一套平行的系统。
- 在间距、布局、层级结构及响应式行为等方面尽量保持一致。
- 遵循本仓库的路由、状态管理及数据获取模式。
- 确保页面在桌面端与移动端均具备良好的响应性。
- 如遇截图细节存在歧义，请选择最简洁且符合整体设计方向的实现方案，并简要注明相关假设。
验证方式：
- 对比最终实现的界面与所提供的截图，确保外观与交互行为均相符。
- 使用 $playwright-interactive 检查界面是否与参考一致，必要时持续迭代直至完全匹配。
简介
当您手头有截图、一份简短的设计说明，或几份灵感参考时，Codex 能够将它们转化为响应式 UI，同时不会忽视您项目中已有的设计规范。借助 Playwright 技能，Codex 能够在真实浏览器中打开应用，针对不同屏幕尺寸将实现效果与您的截图进行比对，并不断迭代布局或行为，直至结果更接近目标。
从参考文献入手
准备设计系统
Codex 在目标代码库已具备清晰的组件层级时效果最佳。Codex 可以自动复用您现有的组件与设计系统，而无需从头重新构建。
•
如果您认为有必要（例如，您未使用标准组件库），请向 Codex 明确指定要复用的原语、您的代币所在位置，以及该代码仓库对按钮、输入框、卡片、排版和图标等组件的规范定义。
•
如果您是从现有代码库开始，Codex 很有可能能够自行理解如何使用您的组件和设计系统；但如果是从零开始，则最好明确说明。
请让 Codex 将这些截图视为视觉目标，但同时将其转化为项目实际使用的组件库、组件封装、色彩体系、字体排版层级、间距规范、路由方案、状态管理以及数据获取模式。
利用 Playwright
Playwright 是一款出色的工具，可帮助 Codex 不断优化用户界面。借助它，Codex 能够在真实浏览器中打开应用，将实现效果与您提供的截图进行对比，并针对布局或交互行为持续迭代。
它可以将浏览器窗口调整为不同的屏幕尺寸，并在不同的断点处检查布局。
请确保已在 Codex 中启用 Playwright 交互式技能。有关更多详细信息，请参阅技能文档.
迭代
第一轮设计应已与效果图在方向上基本一致。对于复杂的布局、交互或动画丰富的界面，预计需要经过几轮调整。
请让 Codex 将实现与截图进行对比，而不仅仅是验证页面是否能正常构建。当出现冲突时，应优先采用仓库中的设计系统令牌，并仅进行必要的、最小化的间距或尺寸调整，以确保整体设计风格的一致性。
如果仅凭一张图片难以明确某些状态，可使用额外的截图或简短说明加以澄清。
建议的后续提示
代码块
Haskell
【当前实现效果图】 【参考效果图】
这看起来不太对。请确保实现的内容与参考图保持高度一致：
【如有需要，可说明具体差异】