在 cursor 中开发前端组件需让 ai 精准理解项目规范：通过 .cursorrules 文件指定 request.ts 方法签名，拖入 figma 链接或截图辅助设计还原，用 cmd/ctrl+k 选中已有组件复用 props 和 slot 约定，确保代码与项目体系一致。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在 Cursor 中开发前端组件时，必须让 AI 看到你项目里真实的工具函数、样式规范、接口定义和组件约定，否则它会凭空捏造 request.ts 里的方法名、写错 Pinia store 的 action 名、或者把 scoped 样式写成全局 class——这些错误在联调时集中爆发，改起来比重写还费劲。
让 Cursor 主动读取 src/utils/request.ts
第一步：打开项目根目录，在空白处右键 → 新建文件 → 命名为 【.cursorrules】（注意开头是英文点号，不可遗漏）。
第二步：在 .cursorrules 文件中，用纯文本写入这一行：
“涉及 HTTP 请求时，严格参考 @src/utils/request.ts 中的 useRequest 和 createApi 方法签名”。
第三步：保存文件后，重启 Cursor 或执行 Cmd/Ctrl + Shift + L 开启新对话。此时再问“封装一个用户列表组件，调用 /api/users 接口”，AI 就会自动读取 request.ts 文件内容，生成的代码里 useRequest 调用方式、参数结构、错误处理逻辑全部与你项目一致。
⚠️ 注意：不要把 request.ts 全文粘贴进 .cursorrules。Cursor 会按路径自动抓取最新代码，粘贴会导致规则过期且体积膨胀，触发上下文截断。
引用设计稿或 Figma 页面结构
方法一：直接拖拽 Figma Web 页面 URL 到 Cursor 聊天框
打开 Figma 设计稿 → 复制浏览器地址栏完整链接（含 ?node-id=xxx）→ 在 Cursor 的 Cmd/Ctrl + L 对话框中粘贴 → 回车。AI 会解析页面层级、组件命名、间距字号等视觉信息，生成匹配的设计还原代码。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
方法二：上传本地截图或 Sketch 文件
点击对话框左下角「?」图标 → 选择 PNG/JPEG/Sketch 文件 → 等待解析完成（通常 3～5 秒）。AI 会识别按钮位置、表单字段数量、卡片布局方向，但不会读取文字内容——所以标题文案仍需你在 Prompt 中明确说明。
这一步操作起来很简单，直接把文件拖进去就行。但务必确保截图中关键区域无遮挡，比如弹窗被其他窗口盖住，AI 就无法识别其内部结构。
复用已有组件逻辑与 Props 约定
① 打开你要参考的源组件文件，例如 src/components/DataTable.vue；
② 选中整个 <script setup> 区域 → 按 Cmd/Ctrl + K；<br>③ 输入指令：“基于这个表格组件，新建一个带导出功能的订单列表组件”；<br>④ AI 会保留原有 props 结构（如 data、columns）、事件命名（如 @row-click）、插槽定义（#header、#empty），只在逻辑层叠加 exportCSV 方法和对应按钮。</script>
这样做能避免 Props 名称不一致导致父组件传参失效，也能防止 slot 名拼错引发内容不渲染。如果你跳过这步直接让 AI “新建一个表格组件”，它大概率会用 rows/columns 而不是 data/columns，和你项目现有体系脱节。
⑤ 生成后，检查新组件中是否出现 【defineProps({ data: { type: Array, required: true } })】 ——这是 Composition API 的标准写法，若看到 defineProps() 这类泛型写法，说明 AI 没对齐你项目中已有的类型约束风格，需手动修正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
