答案是必须在提示词中锚定真实技术栈、用户操作流程、UI组件库及DOM结构，例如「信审中台-v2.4」React+Ant Design表单，明确onBlur触发、Form.Item.help文案、Input.suffix图标及ant-form-item-explain-error选择器，嵌入真实日志与Console验证指令。
试想一个问题：当你在Microsoft Copilot中输入一段提示词，期望它生成一份表单交互说明，但最终得到的却是“用户填写后提交”“系统会进行校验”这类空洞套话，问题究竟出在哪里？
根本原因只有一个——提示词未能将表单的真实渲染环境、触发时机和失败反馈固定下来。换言之，你提供的信息颗粒度过于粗糙，Copilot只能按照其默认的“通用模板”敷衍了事。
那么，一份能让前端开发、测试人员快速理解校验逻辑、产品经理确认字段必填性的交互说明，需要遵循哪些步骤？
锚定真实表单载体与用户操作路径
第一步：在提示词开头明确声明表单所在系统及技术栈。例如这样写：「你是一名拥有3年金融SaaS经验的UX文档工程师，正在为「信审中台-v2.4」的React+Ant Design表单页面编写交互说明，该页面部署在Chrome 125+环境」。如果不指定技术栈，Copilot默认会按HTML原生表单逻辑输出，导致Ant Design特有的onFinishFailed钩子和formInstance.validateFields()调用时机被完全忽略。
第二步：用动词链清晰描述用户真实操作流程。例如：「用户点击【提交】按钮→触发表单校验→若身份证号格式错误→右侧红字提示“请输入18位有效身份证号”，光标自动聚焦到该输入框」。这里“光标自动聚焦”不能省略——它是Ant Design Form.Item的默认行为，但Copilot若未看到具体反馈动作，就会泛化为“显示错误提示”。
【必须包含至少一个真实UI组件库名称】，例如“Ant Design”“Element Plus”“MUI”，Copilot才能调取对应组件的props定义和事件流，否则它会虚构“onValidateError”这种不存在的回调名。
强制字段级反馈与具体UI元素绑定
方法一：对每个字段明确标注「触发条件+反馈位置+文案内容」三要素。
例如：“手机号字段→当用户离开输入框（onBlur）且值非11位数字时→在Input右侧Icon位置显示红色感叹号→下方Text区域显示‘手机号格式不正确’”。
注意：Copilot容易将“下方Text区域”误写为“下方提示框”，必须明确指定“Text组件”或“Form.Item.help属性”。
方法二：使用变量占位锁定错误状态来源。
在提示词末尾追加：“请基于以下变量输出：[校验触发点] = onBlur；[错误文案容器] = Form.Item.help；[图标位置] = Input.suffix。输出必须包含：①该字段校验失败时help属性的具体字符串值；②suffix中图标组件的type值（如‘exclamation-circle’）；③若用户连续两次输入错误，是否触发防抖重试机制（注明Ant Design文档章节号）。”
植入真实失败场景与可验证动作
① 粘贴一段真实报错日志片段：
“2026-07-12T10:22:17.482Z [credit-review-fe] WARN - Form validation failed on field ‘idCardNo’: value ‘11010119900307271’ → missing last digit → trigger help text ‘请输入18位有效身份证号’”
这一步不能删减时间戳和服务名——Copilot依靠“credit-review-fe”识别为前端服务，依靠“Form validation failed”锚定到Ant Design的onFinishFailed生命周期。
② 要求输出必须包含可执行验证指令：
“请输出3条可在浏览器Console中直接运行的验证命令，例如：document.querySelector(‘#idCardNo’).value = ‘11010119900307271’ → 触发blur → 检查document.querySelector(‘.ant-form-item-explain-error’).textContent是否等于指定文案”
③ 绑定真实DOM结构路径：
“所有CSS选择器必须基于当前页面实际class命名，例如‘ant-form-item-explain-error’而非‘error-tip’；若页面使用CSS-in-JS，请使用data-testid=‘idCardNo-error’定位”