AI如何辅助做前端页面？需求、组件、响应式与设计还原

直接回答：AI辅助做前端页面，应该从需求状态→组件树→数据与交互→响应式→视觉还原→可访问性→浏览器验收顺序推进。先让AI写清页面状态和验收标准，再生成代码，通常比“照这张图做一个页面”稳定得多。

第一步：把截图或需求翻译成页面规范

• 页面目标和主要用户；
• 模块顺序与层级；
• 组件状态：默认、loading、empty、error、success；
• 交互：点击、筛选、表单、弹窗、导航；
• 移动端如何折叠或重排。

第二步：先设计组件树

React官方强调状态结构和组件之间状态共享。^[1] 让AI先列“哪些是纯展示组件、哪些持有状态、哪些数据由父层统一管理”，能减少后面重复状态和难以同步的问题。

第三步：明确状态，而不是让AI凭感觉加useState

React建议根据UI可能处于的不同状态来设计交互，再由输入触发状态变化。^[2] 对表单、搜索、异步请求，先列状态机比先写JSX更稳。

第四步：响应式写成规则

MDN把响应式设计定义为让布局、内容和性能适应不同设备尺寸与能力。^[3] 不要只说“适配手机”，而要给断点行为：侧栏何时收起、卡片几列、表格如何滚动、字号和间距最低值。

第五步：设计还原要建立视觉验收表

第六步：可访问性必须单独验收

MDN指出Web可访问性包括让不同能力、设备和辅助技术用户都能访问内容；原生HTML语义、键盘操作、文本替代和视觉对比都属于基础。^[4]

第七步：让AI看真实页面继续迭代

前端代理可以运行开发服务器、浏览器测试或截图比较时，效果会明显优于只看源代码。OpenAI Codex官方用例也包含前端UI修改和浏览器内构建/测试场景。^[5] 每轮只修一类偏差，例如先布局，再字体，再交互。

推荐提示词

先不要写代码。
根据需求/设计稿输出：
1. 页面模块与组件树；
2. 所有UI状态；
3. 响应式规则（desktop/tablet/mobile）；
4. 设计token：颜色、字号、间距、圆角；
5. 可访问性要求；
6. 验收截图清单。
确认后再分组件实现，每轮只改一个视觉问题。

参考来源

1. React Docs：Managing State（核验于 2026-08-08）
2. React Docs：Reacting to Input with State（核验于 2026-08-08）
3. MDN：Responsive web design（核验于 2026-08-08）
4. MDN：Web Accessibility（核验于 2026-08-08）
5. OpenAI Developers：Codex front-end use cases（核验于 2026-08-08）

更新记录

• 2026-08-08：核验React、MDN与Codex前端相关官方资料。