React 组件开发不能只按截图生成 JSX。先明确 props、状态、加载与错误分支，再让 Cursor 在现有设计系统内修改，能减少重复组件和样式漂移。
开始前先准备什么
先找到相邻组件、样式变量和现有测试，写清要复用的组件以及禁止修改的公共接口。
再从项目真实配置确认 React 版本、路由、样式方案、测试工具和启动命令。一个组件至少要写清输入 props、谁持有状态、事件回调、数据为空或失败时显示什么。只有截图而没有这些约束，Agent 很容易做出“看起来像”但接不上业务的数据结构。
建议先在纸面列一张状态表：默认、加载、空数据、错误、禁用分别由什么输入触发，以及每种状态允许的操作。状态表比“做得现代一点”更能约束实现。
实际操作步骤
- 定义组件契约：把需求拆成可见状态：默认、加载、空数据、错误和禁用，并列出必要 props。事件只写业务需要的，例如
onRetry，不要先暴露一堆未使用配置。 - 绑定现有模式：让 Agent 阅读同目录组件、设计变量和测试，再给修改计划与文件清单。确认没有新建重复按钮、另起样式系统或新增无关依赖。
- 小步实现：先完成静态结构和状态分支，再接事件。每一步都看 diff，防止为一个组件改动公共 API。
- 打开真实页面：实现后启动项目已有开发服务器，用 Browser 打开准确路由。Cursor Browser 能读取页面、控制台和网络信息，但仍应限制在本地或测试环境。
- 覆盖交互与回归：逐项点击，检查键盘操作、焦点顺序、窄屏布局、控制台错误和失败请求，并运行组件测试及生产构建。
可直接交给 Agent 的需求样例
请在现有设计系统中实现 UserListState 组件。
输入：status 为 loading | empty | error，errorMessage 可选，onRetry 为回调。
要求：复用现有 Button 和间距变量；error 状态显示重试按钮；loading 状态不可触发重试。
范围：先找同目录模式，只修改组件及其测试；不要新增依赖，不要改接口请求。
验收：三种状态可单独渲染，Tab 能聚焦重试按钮，点击只调用一次 onRetry，现有测试和构建通过。
先返回计划和预计文件，等确认后再改。该样例是演示输入，不代表任何具体仓库已有这些组件。Agent 的计划应指出复用对象、文件位置和测试方法；如果它找不到现有 Button，应明确说明并询问，而不是臆造导入路径。
怎样验证结果
通过标准是五种状态可复现、控制台无新增错误、相关测试通过，diff 没有无关格式化。
手工检查时，先用固定测试数据切换每个状态，再把视口缩到项目支持的最小宽度。键盘只用 Tab、Shift+Tab、Enter 或 Space 完成核心操作；检查焦点是否可见。控制台无错误只是最低条件，还要确认网络请求数量、按钮重复点击和错误重试符合预期。最后运行仓库既有的 lint、测试或 build 命令，记录真实结果。
常见错误
- 不要把截图文字硬编码进业务数据。
- 不要绕开现有设计系统新造按钮。
- 只看桌面宽屏会漏掉响应式问题。
适用边界
截图只能表达部分视觉要求，真实业务数据、权限和可访问性仍需单独验证。
Browser 中的本地页面无法代表生产端的鉴权、缓存、CDN 和真实数据规模。涉及通用组件或设计变量时，应把影响页面列入回归范围；否则一个局部视觉修复可能影响全站。
相关问答
没有组件测试怎么办？
先补一个能验证核心交互的最小测试，并保留手工浏览器检查记录。
可以让 Agent 自动改全站样式吗？
应拆成小范围组件改动，每批核对视觉与回归风险。
资料与适用范围
本文根据 2026 年 10 月 1 日核验的 官方资料 1、官方资料 2 整理。示例流程未在你的设备、账号或仓库中实测，界面、方案、权限和项目命令应以当前环境为准。
Ai菜鸟网。发布者：AI小管家，转载请注明出处：https://www.alyyhw.com/32601.html
