用Cursor可一键生成带类型定义和样式的React组件，支持结构化提示词创建、上下文重构、分步添加Hook及VisualEditor可视化调整。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用自然语言一句话生成可用的React组件，避免手动创建文件、写基础结构、补类型定义、配样式路径等重复劳动，直接进入业务逻辑开发阶段。
用结构化提示词生成完整组件
在编辑器空白处或新文件中，按下 Cmd+K（Mac）或 Ctrl+K（Windows） 唤出AI命令面板，输入带技术栈、行为、约束的完整描述。
示例提示词：“用 React + TypeScript + Tailwind CSS 写一个响应式用户资料卡片组件，显示头像、昵称、会员等级徽章、关注按钮；支持暗黑模式；使用 shadcn/ui 的 Avatar 和 Badge；所有 props 类型需完整标注。”
这一步操作起来很简单，直接把提示词粘贴进去回车就行。Cursor 会自动生成 .tsx 文件、导入语句、Props 接口、JSX 结构和适配暗色模式的 className。
【必须指定技术栈和 UI 库】 否则 AI 可能用原生 div + class 写样式，或引入不兼容的第三方组件，后续要花时间重写。
基于现有组件快速重构
方法一：聚焦单个文件，用 @ 符号让 AI 精准理解上下文
将光标停在 src/components/UserCard.tsx 文件内，输入：“@src/components/UserCard.tsx 把点击关注按钮的逻辑改成调用 useMutation 发起 PATCH /api/follow，并在成功后更新本地 followStatus 状态。”
方法二：跨文件联动修改
选中组件中某段逻辑 → 右键 → “Ask Cursor about this selection” → 追加指令：“同时更新对应的 Jest 测试文件，确保 mock API 调用并断言 mutation 触发。”
注意：测试文件名必须与组件名严格匹配（如 UserCard.test.tsx），否则 AI 可能新建错误路径的测试文件。
分步生成带 Hook 的交互组件
第一步：先让 AI 生成基础骨架和类型定义
输入：“生成一个 React 函数组件，名为 SearchBar，接收 onSearch: (query: string) => void 和 placeholder?: string 两个 props，返回一个带输入框和搜索图标的 JSX 结构。”
第二步：追加状态与副作用逻辑
在刚生成的文件中，光标置于组件末尾，输入：“添加 useState 管理 query 输入值，用 useEffect 实现防抖搜索：输入停止 300ms 后触发 onSearch。”
第三步：注入可复用 Hook
输入：“把防抖逻辑抽成自定义 Hook useDebouncedCallback，放在 src/hooks/useDebouncedCallback.ts，然后在 SearchBar 中引用它。”
这三步不能合并成一句指令——AI 在单次响应中容易混淆“生成组件”和“抽离 Hook”的边界，导致代码散落在错误位置或类型缺失。
用 VisualEditor 实时调整布局与样式
打开已生成的组件文件，在编辑器右上角点击 “Open in Visual Editor” 按钮。
拖拽调整头像尺寸 → 点击右侧 Props 面板修改 avatarSize prop 值 → 滚动到暗色模式预览区，观察徽章颜色是否自动适配。
若发现 Tailwind 类未生效，检查是否遗漏了 dark: 前缀，例如应写 dark:bg-secondary 而非 bg-secondary。
修改完成后，点击 “Sync to Code” 将视觉变更同步回 .tsx 文件，Cursor 会精准插入或替换 className 字符串，不碰其他逻辑。
