前端 UI 开发

让 Codex 写前端最容易翻车的环节是「代码看起来对，但浏览器里错」。

从截图生成 UI

codex -i mockup.png "请按这张设计稿在 components/Settings.tsx 还原界面，保持现有设计系统，移动端要可用。"

视觉验收

• 启动开发服务器。
• 浏览器截图。
• 多 viewport（桌面 / 平板 / 移动）。
• 键盘可达、可聚焦。

常见提示词

• 指定设计系统。
• 指定组件库（如 shadcn / Radix / MUI）。
• 指定要做真实可用界面，而不是营销 demo 页。