用cursor写前端页面时，需在提示词中加入业务锚点、强制技术细节、项目命名规则和截图+文字双输入，才能避免ai生成千篇一律的代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor写前端页面时，提示词一模一样就容易让AI反复生成雷同结构、相似命名、千篇一律的组件，比如所有按钮都叫PrimaryButton、所有列表都用useQuery+Table、所有表单都带Formik——这不是AI懒，是你没给它“差异化指令”。
给提示词加业务锚点
在描述功能前，先塞一句真实业务场景，例如：“这是电商后台的「已发货订单导出弹窗」，运营每天要导出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”
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
方法三：限制类型定义来源
“Props接口必须继承OrderListProps（来自@types/order.d.ts），不允许新建同名接口，size字段只允许'sm'|'md'，禁止'lg'”
注入项目特有命名规则
第一步：打开项目根目录的.cursorrules文件，找到# 命名规范区块
第二步：把里面那条“组件名=功能+模块+后缀”规则直接抄进提示词，例如：“按.cursorrules第7行规则：导出弹窗组件名=Export + Shipment + Modal”
第三步：在提示词末尾加一句：“不接受ExportModal、ShipmentExportDialog等变体命名，只认ExportShipmentModal”
这一步卡死命名，能直接砍掉30%的返工——因为团队Code Review时第一眼就卡命名不合规，AI却不知道你上周刚开会对齐过这个规则。
用截图+文字双输入制造唯一上下文
上传原型图截图时，不要只截UI，用画笔在图上圈出三个关键区域并加编号标注：
① 标题栏右上角有“仅导出已发货订单”红字提示
② 表格首列是运单号，需支持点击复制
③ 导出按钮右侧有Tooltip说明“导出含物流轨迹的完整数据”
然后在文字提示里逐条对应写：“①标题文案必须严格等于‘仅导出已发货订单’，字体颜色#d32f2f；②运单号列需绑定onCopy事件，调用copyToClipboard工具函数；③Tooltip内容必须与图中③完全一致，不能简化为‘完整数据’”
AI没见过这张图，也读不到你手写的标注——但双输入叠加后，它生成的代码就只属于这个页面，没法套用到其他模块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
