面试官：“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.ts（zod 验证规则） - constants.ts（错误信息常量） - 最后给一个使用示例

这个 Prompt 的关键在于把每个细节都定死了，AI 照着抄就行，没有发挥空间就不会出幺蛾子。

扩展知识

为什么推荐 React Hook Form

传统的受控组件写法，每个字段都要 useState，每次输入都触发 setState，组件就会重新渲染。5 个字段的表单，用户打一个字就要渲染 5 遍，字段多了性能很难看。

React Hook Form 用的是非受控组件，通过 ref 直接读取 DOM 的值，只在提交或校验时才收集数据。同样 5 个字段，用户打字时组件压根不重渲染，性能差距能到 10 倍以上。

而且受控组件写起来很啰嗦，每个字段都要写 value、onChange、错误状态，代码量轻松翻倍。React Hook Form 用 register 一行搞定，代码干净很多。

验证库选型对比

现在新项目基本都用 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 压缩后 8KB，Formik 要 12KB。API 上，React Hook Form 的 register 比 Formik 的 Field 组件更简洁。唯一 Formik 还有点优势的是社区资料多一些，毕竟出来得早，但 React Hook Form 现在文档也很完善了，上手不难。

篇幅有限，更多 AI 大模型 相关面试题可以进入面试鸭进行查阅。