用 CodeBuddy 写 React 前端组件，效率较高的一条路径是：把需求描述清楚让它出初稿，再沿着 props、状态、样式三个层次逐轮修改，最后跑起来验证入库。CodeBuddy 是腾讯推出的 AI 编程助手，支持对话式生成与修改代码，具体功能以官方最新版本为准。这篇按一个组件从无到可用的顺序，给一套可照做的流程。
生成前的需求描述怎么写
描述质量决定初稿质量。一次像样的需求描述包含四点：组件职责（一个带搜索与分页的用户列表）、props 清单（列表数据、加载状态、回调函数）、交互行为（输入防抖、点击行高亮）、技术约束（React 函数组件、TypeScript、指定某个 UI 库）。约束写得越明确，AI 越不容易自由发挥出你不想要的实现，返工次数明显减少。拿不准约束怎么写，就把自己口头向同事交代任务的话整理成四段，基本就是合格的描述。
从初稿到可用的第一轮修改
拿到初稿先别急着用，跑一遍看行为：渲染是否报错、空数据时的表现、极端长文本是否撑破布局。把看到的问题逐条描述给 AI，一轮解决一类，比如先修渲染错误，再补边界状态。混在一起提问容易让 AI 改了东墙漏了西墙，分轮提交是保持代码稳定的关键习惯。每轮改完保存一次能运行的版本，出问题随时回退，这比任何技巧都保命。
props 与类型的最小调整
组件要复用，props 设计是核心。常见调整包括：把写死的数据改成 props 传入、为回调补上类型定义、给可选配置加默认值。让 AI 做这类改动时，把调用方代码也发给它，它能同步改好调用处的传参，避免组件改完页面报错。类型定义补齐后，编辑器的自动提示会让后续开发顺滑很多。props 命名跟着团队既有习惯走，AI 会顺着你的命名风格往下写，风格统一从这几行定义开始。
状态接入与事件处理
接真实数据时，把现有状态管理方式告诉 AI：用组件内 useState 还是全局状态库，请求怎么发、加载与错误态怎么处理。事件处理方面，防抖、节流这类性能细节直接写进要求。改完让 AI 复述一遍数据流向：数据从哪来、经过哪些状态、在哪渲染，复述没错基本就接对了。复述这步看似多余，实际是成本很低的交叉验证，能提前暴露它理解偏差的位置。
样式与响应式的两轮调整
样式调整分两轮：先对齐视觉规范——间距、字号、配色按团队设计规范逐项说明；再做响应式，明确断点与小屏下的布局变化。样式返工最琐碎，把设计稿的数值直接抄给 AI，比描述感觉高效得多。收尾时让 AI 补一份简短的使用说明，包含 props 说明与一个调用示例，放进团队组件库里，下个人拿来就能用。组件的寿命取决于文档，三分钟的说明换来团队复用，这笔账划算。
CodeBuddy 生成的 React 组件想长期复用，要按什么顺序整理？
- 生成代码里有些写法团队没见过，能放心用吗？：关键组件建议人工过一遍逻辑再合入，看不懂的部分让 AI 逐段解释，确认无误再进主干。
- 多个组件长得像，能让 AI 抽公共组件吗？：可以，把几个组件一起发给它，要求提取共性与差异点，再生成通用组件与各处调用示例。
- 换了 UI 库组件要重写吗？：让 AI 做迁移改造是强项，把新旧库的组件对应关系说明白，它能批量改写并标出需要人工确认的位置。
