闪学it-Vibe Coding全栈开发实战训练营-已完结 · 共152课时

前端实战：让 AI 帮你写出能用的 React 页面（关注用户名）
很多人对 AI 写前端抱有幻想：说一句话，一个漂亮的 React 页面就自动出现了。现实是，AI 能大幅加速，但它写出的页面能不能用，取决于你会不会带。真正高效的用法，不是让它“帮我写个页面”，而是把它当成一个手速极快、但需要你定方向的前端搭档。下面用一个“订单列表页”为例，拆解从需求到可交付的实战流程。

第一步，把模糊需求变成具体约束。不要只说“做一个订单列表”，而要说明：给谁看、展示哪些字段、支持哪些操作、数据从哪来、要不要分页、要不要筛选、移动端优先还是桌面端优先。例如：运营人员查看订单，字段包括订单号、用户、金额、状态、时间；支持按状态筛选、按时间排序、分页；数据来自 REST API；适配手机和电脑。约束越具体，AI 越不会跑偏。

第二步，让 AI 先出组件树和状态设计，而不是直接写代码。你可以要求它列出页面结构：顶部筛选栏、统计卡片、订单表格、分页器、空状态、加载态、错误提示。再让它说明状态放在哪里：筛选条件、当前页、排序字段、数据列表、加载状态、错误信息。这一步能暴露很多问题。比如它可能把筛选状态放在表格组件内部，导致分页时丢失条件。提前调整，比写完再改便宜得多。

第三步，从最小可用页面开始。先让 AI 生成静态布局，用假数据填充，不接 API、不加复杂交互。你亲自在浏览器里看：布局是否合理、字段是否齐全、移动端是否拥挤。这个阶段的目标是“能看”，而不是“能用”。确认结构后，再进入下一步。

第四步，逐步接入状态和事件。让 AI 实现筛选、排序、分页、加载、错误处理。每加一个功能，就自己点一遍。遇到问题，用自然语言描述：点击筛选后列表没刷新、分页时筛选条件丢失、加载状态一直不消失。把操作步骤、期望结果、实际结果一起给它。AI 通常能给出几种可能原因，你选改动最小的方案。不要一次让它重写整个页面。

第五步，处理样式与响应式。AI 可以给出 CSS 方案、布局建议、断点设置。但你要决定视觉风格：间距、圆角、阴影、主色、字体。不要让它自由发挥，否则每个组件风格都不一致。可以让它先给两三个方案，你选一个，再统一应用。移动端要重点检查：表格是否横向滚动、按钮是否够大、筛选栏是否折叠。

第六步，补测试和边界。能用的页面必须处理空状态、加载失败、无权限、数据超长、网络慢。让 AI 为关键交互写测试：筛选、排序、分页、错误重试。测试不是形式，而是你以后敢改代码的底气。同时检查无障碍：按钮有标签、图片有替代文本、键盘可操作。

第七步，代码审查与重构。AI 生成的代码可能冗余、过时、依赖膨胀。你要检查：是否用了废弃 API、是否有不必要的重渲染、是否把敏感信息写进前端、是否引入了过大的库。让它解释关键逻辑，再决定是否简化。不要因为“能跑”就放过。

第八步，文档与协作。让 AI 写组件说明、Props 含义、API 对接方式、运行步骤。这样同事接手时不用猜。如果项目多人协作，还要统一代码风格和提交规范。

常见坑有：过度依赖 AI 导致看不懂代码；版本不匹配，比如 React 18 的写法混入旧模式；依赖越装越多，包体积失控；安全问题，比如直接把用户输入渲染成 HTML；性能问题，比如每次输入都请求接口。解决办法是：你懂核心概念，AI 只负责实现；锁定版本；定期清理依赖；审查安全；加防抖和缓存。

总结一下，让 AI 写出能用的 React 页面，流程是：具体需求、组件与状态设计、最小静态版、逐步接交互、统一样式、补边界测试、审查重构、写文档。AI 是加速器，不是替代品。你越清楚要什么，它越能帮你把想法稳稳落成页面。

本作品采用《CC 协议》，转载必须注明作者和本文链接