面试官：“AI 写 React 表单，你怎么提需求？” 我：“让它生成代码。” 面试官：“那验证、错误提示和上下文约束呢？”

先写清楚验收标准AI 写代码确实快了。但代码写出来以后为什么还是很难进生产CircleCI 今年那份《2026 State of Software Delivery》里有个挺刺眼的数字。他们分析了 2800 多万次 CI/CD workflow。结果发现AI 确实让开发活动变多了feature branch 的吞吐提升了。但到了 main branch也就是代码真要进主干、进生产的地方吞吐反而下降了。CircleCI 的说法很直接现在最卡的地方已经挪到代码写完以后。卡在 review、validation、integration、recovery。AI 能把代码吐出来。但它离合并、测试、上线还有一段路。出了问题怎么退回也还是人的活。这正好接到今天这道面试题。面试官让你设计一个 Prompt让大模型生成 React 表单组件。很多人一看到题目就会写“写一个注册表单字段有用户名、邮箱、密码。”这个 Prompt 太松了。这更像把需求扔给 AI然后希望它自己懂你。真正能在项目里用的 Prompt要写得像一份小型需求文档。重点不在长短在边界。比如 React 表单这种东西页面长什么样通常不难。真正容易出问题的地方更细。比如校验规则写散了错误提示不统一重复提交没挡住密码确认也没跟着变。页面看着能跑线上一用就露馅。这些你不写AI 也许会补但补出来的是它自己的习惯。一次用 useState下一次换 Formik这次把 schema 单独拆出来下次又把校验塞回组件里。这就是 AI 生成代码最麻烦的地方它经常写得“看起来能跑”。项目里最怕这种代码。因为粗看没问题。真正麻烦的 bug会在联动、边界、状态恢复和错误提示里慢慢冒出来。所以今天这篇的重点很简单让 AI 写代码之前先把验收标准写出来。……今天鸭鸭和大家分享一道 AI 大模型面试题。【假设需要让大模型生成一个React表单组件代码请设计一个包含上下文约束的Prompt需包含数据验证、错误提示等要求 】回答重点让大模型生成一个能直接用的 React 表单组件Prompt 不能只写功能名。要提前把上下文约束说清楚比如字段有哪些、校验怎么做、错误提示放在哪里、生成代码按什么规范组织。直接上一个实战级的 Prompt 示例用 React 18 TypeScript React Hook Form 写一个用户注册表单组件。 字段清单 - 用户名必填2-10 个字符只能包含字母数字下划线 - 邮箱必填标准邮箱格式 - 密码必填8-20 位至少包含一个大写、一个小写、一个数字 - 确认密码必填必须和密码字段一致 - 手机号选填11 位数字1 开头 验证行为 - 每个字段失焦时触发校验不要边打字边校验 - 错误提示红色小字显示在对应输入框正下方 - 密码强度用三段式进度条展示弱/中/强 - 确认密码字段只在密码字段有值后才启用 提交逻辑 - 任一必填字段未通过校验时提交按钮 disabled 且置灰 - 点击提交后按钮变成 loading 状态显示「提交中...」 - 请求完成前禁止重复点击 - 成功后调用 onSuccess 回调并清空表单失败后保留已填内容 代码要求 - 用函数组件 hooks不用 class 组件 - 类型定义单独放一个 types.ts 文件 - 验证规则用 zod schema 定义不要散落在组件里 - 错误信息统一放 constants.ts支持国际化替换 - 样式用 Tailwind CSS响应式适配移动端 - 关键逻辑加注释特别是正则表达式要写清楚匹配什么 输出格式 - RegisterForm.tsx主组件 - types.ts类型定义 - schema.tszod 验证规则 - constants.ts错误信息常量 - 最后给一个使用示例这个 Prompt 的关键在于把每个细节都定死了AI 照着抄就行没有发挥空间就不会出幺蛾子。扩展知识为什么推荐 React Hook Form传统的受控组件写法每个字段都要 useState每次输入都触发 setState组件就会重新渲染。5 个字段的表单用户打一个字就要渲染 5 遍字段多了性能很难看。React Hook Form 用的是非受控组件通过 ref 直接读取 DOM 的值只在提交或校验时才收集数据。同样 5 个字段用户打字时组件压根不重渲染性能差距能到 10 倍以上。而且受控组件写起来很啰嗦每个字段都要写 value、onChange、错误状态代码量轻松翻倍。React Hook Form 用 register 一行搞定代码干净很多。验证库选型对比维度zodyupjoi包体积12KB22KB140KBTypeScript 支持原生类型推导完美需要额外配置类型支持较弱API 风格链式调用更现代链式调用配置对象式错误信息定制简单直接需要额外配置比较麻烦生态整合React Hook Form 官方推荐社区主流主要用在 Node 端运行时校验支持支持支持现在新项目基本都用 zod跟 TypeScript 配合是最好的定义一个 schema 就能同时得到运行时校验和类型定义不用写两遍。写 Prompt 容易忽略的坑很多人写 Prompt 只关注主流程边界情况完全不提。AI 默认是不会处理这些的你不说它就不做。比如用户名前后带空格不 trim 的话会存进数据库后面登录的时候就对不上了。这种细节要在 Prompt 里明确写出来。分步生成 vs 一次性生成复杂表单不建议一个 Prompt 全搞定。更稳的做法是把生成过程拆开。先让 AI 生成类型定义和验证 schema确认字段和规则没问题。然后基于这份 schema 生成组件骨架和基础交互。等逻辑跑通了再补样式和性能优化。这样每一步都能检查出问题也好定位。一口气全塞进去AI 经常顾此失彼验证规则对了但交互逻辑不对或者交互对了但样式乱七八糟。面试官追问提问表单字段多了以后 Prompt 会很长怎么组织才能让 AI 不漏东西回答用结构化格式来组织比如 Markdown 表格或者 YAML 风格的缩进。每个字段单独一个 block里面写清名称、类型、必填性、校验规则和错误提示。AI 对结构化数据的理解能力比纯文本强很多漏东西的概率会低不少。末尾也可以补一句请先复述你理解到的 N 个字段要求再生成代码。这样能让 AI 先对齐需求。提问如果验证逻辑很复杂比如字段之间有联动关系Prompt 该怎么写回答联动关系要单独拎出来写清楚不要混在字段定义里。比如当用户类型选择企业时公司名称和营业执照号变成必填。这种就单独一段描述。还可以用伪代码或者流程图来表达例如 userType 为 company 时companyName.required true。越复杂的逻辑越要写得明确别指望 AI 能猜出你的意图。提问生成的代码跑起来有 bug怎么通过改 Prompt 来修回答把 bug 现象描述清楚喂回去。比如你可以直接反馈确认密码字段校验有问题密码字段清空后再填确认密码校验不会触发请确保密码字段变化时会重新校验确认密码字段。本质上就是把你 debug 的思路用自然语言写出来。如果 bug 很隐蔽可以把出问题的代码段贴回去让 AI 重点看那一块。提问React Hook Form 和 Formik 你更推荐哪个为什么回答现在新项目肯定选 React Hook Form。性能上React Hook Form 是非受控组件重渲染次数少很多官方 benchmark 显示能快 2-3 倍。体积上React Hook Form 压缩后 8KBFormik 要 12KB。API 上React Hook Form 的 register 比 Formik 的 Field 组件更简洁。唯一 Formik 还有点优势的是社区资料多一些毕竟出来得早但 React Hook Form 现在文档也很完善了上手不难。篇幅有限更多 AI 大模型 相关面试题可以进入面试鸭进行查阅。