那么,如何破解这种局面?
为提示词注入业务场景锚点
在描述功能之前,先加入一句真实的业务场景描述,例如:“这是电商后台的「已发货订单导出弹窗」,运营人员每天需导出500多单,导出按钮必须带防抖功能并禁用3秒”。一旦AI看到“运营每天导出500多单”,它就不会再给出一个仅带loading却无防抖的通用按钮;看到“已发货”这个状态限定,它也不会将status字段默认设为string而遗漏枚举约束。
这一步缺一不可。没有业务锚点的提示词,AI会默认按照框架文档里的“理想示例”生成代码,与你项目的实际需求相去甚远。
强制指定技术细节:至少两项
每次提问时,必须明确写出至少两项具体技术约束,缺少任何一项都不行。这里提供三种常见方法:
方法一:锁定UI库、版本及定制行为
“使用Ant Design v5.12.3,Button组件必须传入data-testid='export-btn',禁用状态下显示‘导出中…’而非‘Loading…’”
方法二:绑定已有代码路径与字段名
“复用src/utils/date-format.ts里的formatDate函数,表格时间列字段名必须是shipAt,不能使用createdAt或updatedAt”
方法三:限制类型定义来源
“Props接口必须继承OrderListProps(来自@types/order.d.ts),不允许新建同名接口,size字段只允许'sm'|'md',禁止'lg'”
从以上三种方式中任选两项,AI生成的内容就会拥有具体的形状,不再是一团模糊的模板。
融入项目特有的命名规则
第一步:打开项目根目录的.cursorrules文件,找到# 命名规范区块;第二步:把其中那一条“组件名=功能+模块+后缀”规则直接复制到提示词中,例如:“按.cursorrules第7行规则:导出弹窗组件名=Export + Shipment + Modal”;第三步:在提示词末尾加上一句硬性约束:“不接受ExportModal、ShipmentExportDialog等变体命名,只认ExportShipmentModal”。
这一步卡死命名,能直接减少约30%的返工。团队在Code Review时首先就会卡命名是否合规,而AI并不知道你上周刚开会对齐过这个规则。所以,务必让它知道。
利用截图与文字双输入构建唯一上下文
上传原型图截图时,不要只截取UI。用画笔在图上圈出三个关键区域并加编号标注:
- ① 标题栏右上角有“仅导出已发货订单”红字提示
- ② 表格首列是运单号,需支持点击复制
- ③ 导出按钮右侧有Tooltip说明“导出含物流轨迹的完整数据”
随后在文字提示中逐条对应写:“①标题文案必须严格等于‘仅导出已发货订单’,字体颜色#d32f2f;②运单号列需绑定onCopy事件,调用copyToClipboard工具函数;③Tooltip内容必须与图中③完全一致,不能简化为‘完整数据’”。
AI虽然没见过这张图,也读不到你手写的标注,但双输入叠加后,它生成的代码就只属于这个页面,无法套用到其他模块。这才是真正的“唯一上下文”。
