构建响应式前端界面
本页根据 OpenAI 官方
Codex use cases页面重新整理，核对时间为2026-03-30。这里保留原文的任务边界、推荐技能和工作流重点，但改写成更适合课程、工作坊和机构授课的中文版本。
官方原始定位
- 官方标题：
构建响应式前端界面 - 官方难度：
Intermediate - 官方预估时长：
1h - 官方核心说明：把截图、设计简报和视觉参考翻译成贴合仓库设计系统的前端代码，并用浏览器做视觉核验。
这节课最适合哪些人
- 从零开始搭一个新前端页面或新专题页
- 根据截图在已有代码库里实现某个页面或某段流程
- 需要移动端和桌面端都稳定还原的教学或交付项目
课上应该带学员理解什么
- 这一类任务的关键不是“生成页面”，而是“根据视觉目标逐轮逼近”
- Codex 最容易犯的错，是没有参考图时默认走高频、保守、普通的界面风格
- 如果仓库已经有设计系统，讲师要训练学员把参考图翻译成项目自己的组件体系
官方强调的工作流
- 先给 Codex 足够清晰的视觉参考，最好包含桌面端和移动端，以及关键状态
- 明确告诉它要复用哪些现有组件、颜色、排版、路由和数据获取模式
- 第一轮先做结构和层级，第二轮再修间距、细节和响应式
- 每次都用 Playwright 在真实浏览器里回看，对照参考图继续调整
课堂演示顺序
- 先让学员观察参考图，自己说出层级、留白、组件和断点
- 再把参考图和要求一起交给 Codex，让它先输出页面结构
- 确认结构后再开始写代码，并规定每轮必须回到浏览器验证
- 最后做一轮“当前实现 vs 参考图”对比，让学员亲自指出差异并追问 Codex 修正
推荐技能与插件
- Playwright：在真实浏览器里检查断点、布局、交互和行为，而不是只看代码
- 现有设计系统：优先复用仓库里的组件、token、排版和状态模式
- 多张参考图：把桌面、移动、悬停、空状态等都当成输入，减少模型猜测
课堂版起手提示词
text
请根据我提供的截图和说明，在当前项目里实现这个界面。
要求：
1. 截图和说明是视觉真相来源
2. 复用当前仓库已有的设计系统组件和 token
3. 不要另起一套平行组件体系
4. 尽量还原层级、间距、布局和响应式行为
5. 保持与仓库现有路由、状态管理和数据获取模式一致
6. 先实现结构，再通过浏览器检查继续微调课堂验收与交付物
- 一版可运行的响应式页面
- 一份桌面端 / 移动端视觉检查清单
- 一份说明页面中哪些地方严格跟参考图、哪些地方遵循仓库规范的对照说明
讲师讲这节课时最容易踩的坑
- 把“先结构、后细节、再浏览器回看”的节奏讲透，比只展示最终代码更重要
- 如果学员的参考图不够明确，故意让他们体验一次“AI 猜错”的后果，会更有记忆点
- 这节课非常适合配合 Figma、Stitch、参考截图一起上