面经策

假设需要让大模型生成一个 React 表单组件代码，请设计一个包含上下文约束的 Prompt（需包含数据验证、错误提示等要求） ​

  • 标签：大模型

🏛 业务架构师 ​

带上下文约束的组件生成 Prompt，核心是把"隐性上下文显性化"。我的模板骨架：

text
# 角色
你是高级 React 工程师，技术栈：React 18 + TypeScript + Ant Design + react-hook-form。

# 项目上下文（必须兼容）
- 现有工具函数 `useRequest`（src/hooks/useRequest.ts）负责请求与 loading
- 接口约定：POST /api/order/create，入参 OrderCreateDTO，返回 { code, data }
- 团队规范：函数组件、禁止 any、错误提示统一用 message.error

# 任务
生成订单创建表单组件 OrderCreateForm：
字段：商品名(必填)、数量(必填,正整数,≤999)、备注(选填,≤200字)

# 验证与交互要求
- 失焦校验 + 提交时整单校验，错误信息显示在字段下方
- 提交中按钮 loading，成功后 message.success 并 reset 表单
- 接口报错时展示后端 message

# 输出
完整组件代码 + 关键设计说明（3条以内）

关键技巧：上下文约束（已有 hook、接口约定、团队规范）单列一段并声明"必须兼容"，否则 AI 会自造轮子；验证规则写成业务语言再让它翻译成代码；限定输出减少废话。沉淀价值：把"项目上下文"段落抽成团队级常量片段，所有组件生成 Prompt 共享——上下文维护一次，复用百次，这是提示工程资产管理的基本功。

🏗 系统架构师 ​

设计带上下文约束的 React 表单组件生成 Prompt，我的模板分五个区块，并说明每块解决什么工程问题：

text
# 角色
你是资深 React 工程师，输出单个 TSX 组件文件。

# 项目上下文（生成代码必须兼容）
- 技术栈：React 18 + TypeScript + Ant Design 5；
- 状态：使用项目的 useAppForm hook（签名见下），不要自造状态方案；
- 类型：用户实体 UserForm 在 @/types 已定义，直接 import。

# 功能需求
1. 注册表单：用户名（3-20 字符，唯一性异步校验）、密码（≥8 位含数字）、确认密码（一致性校验）；
2. 字段级错误实时显示，提交时整体验证，失败聚焦第一个错误字段；
3. 提交成功调用 props.onSubmit(values)，组件本身不发请求。

# 输出契约
- 只输出一个 ```tsx 代码块；
- 含 2 个使用示例注释；不新增依赖。

关键设计决策：一是上下文约束块是灵魂——把项目已有类型、hook、UI 库显式注入，否则模型生成"教科书代码"与工程现实冲突（这是 AI 生成代码不可用的头号原因）；二是异步校验等复杂行为要明示触发时机（blur 时触发而非每次输入），否则实现漂移；三是组件职责边界（"不发请求，只 emit"）保证架构分层不被 AI 破坏；四是输出后必须过 tsc --noEmit + ESLint + 组件测试三道闸，报错回喂自动修复，形成生成-验证闭环。

💻 全栈开发专家 ​

设计这种 Prompt 的诀窍是上下文约束前置 + 验证规则显式化，我给一个实际在用的模板：

text
# 上下文（约束条件）
- 技术栈：React 18 + TypeScript + react-hook-form + zod
- 项目已有 src/api/user.ts 提供 updateUser API，不要重复实现
- 目标浏览器：Chrome 100+，可用原生 API
- 代码规范：函数组件 + hooks，禁用 class 组件和 any

# 任务
实现 UserSettingForm.tsx：用户资料编辑表单。

# 数据验证（用 zod schema 定义，逐字段给出规则）
- nickname: 2-16 字，必填
- email: 必填且合法，支持 .com/.cn 后缀
- birthday: 选填，不得晚于今天

# 错误提示要求
- 校验失败时字段下方红字提示，具体文案为：
  「昵称需为2-16个字符」「请输入正确的邮箱地址」「生日不能晚于今天」
- 提交中按钮 loading 且禁用，防重复提交

# 输出
完整 tsx 代码 + 对应 zod schema，不写测试不写故事说明。

几个关键设计：1) 上下文约束放最前面，模型对前置指令服从度更高；2) 验证规则用「字段: 规则」列表逐条给，比自然语言段落可靠；3) 错误文案原文给出，避免模型自己发挥；4) 声明已有依赖防止重复造轮子。生成后跑 tsc --noEmit + 手工过一遍边界用例（空值、超长、非法格式），AI 代码的 bug 集中在边界条件。