使用最好的模型 Claude-4、GPT-5、GLM-4.5 等
使用 Cursor 可以添加 rules 来控制代码风格、架构、领域知识等。例如：
# Project Instructions
## Code Style
- Use TypeScript for all new files
- Prefer functional components in React
- Use snake_case for database columns
## Architecture
- Follow the repository pattern
- Keep business logic in service layers
提高 Prompt 质量
- 明确性：避免模糊描述，使用精确的需求表达。
- 约束性：指定技术栈、库、代码风格。
- 结构性：分步骤描述预期结果，而不是一次性抛出复杂请求。
- 复用性：将高质量 Prompt 模板化，用于团队内部共享。
及时开启新对话，避免上下文污染与膨胀
尽量分阶段对话，每完成一个功能模块，开启新的对话，每个对话聚焦单一任务。
Agent 模式优先于 Chat 模式
Chat 模式适合零散问答。Agent 模式通过设定“目标”，让 AI 按照开发者预期完成独立任务。
将高质量代码指定为模板
创建一个用户个人资料卡片组件。请严格遵循在 src/templates/components/UserCard.tsx 中的代码风格。需要：
- 相同的技术栈： 使用 TypeScript、Tailwind CSS 。
- 相同的结构： 包含头像、姓名、职称和一个关注按钮。
- 相同的样式模式： 使用模板中的 card-hover 和 text-gradient 工具类来实现悬浮效果和文字渐变。
Figma MCP 分块完成开发
推荐 「分块拆解 - 独立生成 - 最终组装」 的方式
对话一：开发导航栏 (Navbar)
Prompt： “开发一个 Dashboard。首先，请根据 Figma 设计（附链接）中的 Navbar 组件，帮我生成一个导航栏。它应该包含 Logo、主导航链接（首页、数据、设置）和用户头像下拉菜单。使用 Next.js 和 Shadcn/ui 组件库。请将组件命名为 DashboardNavbar。”
对话二：开发侧边栏 (Sidebar)
Prompt： “继续开发同一个 Dashboard。现在请根据 Figma 设计（同上链接）中的 Sidebar 部分，生成一个侧边栏组件。它包含二级导航链接和折叠功能。技术栈是 Next.js 和 Shadcn/ui。组件命名为 DashboardSidebar。”
对话三：开发数据卡片 (DataCard)
Prompt： “现在开发 Dashboard 主内容区的核心组件。请根据 Figma 设计（同上链接）中的 Data Card，生成一个可复用的数据卡片组件。它应包含标题、数值和趋势指标。使用 Tailwind CSS 样式。组件命名为 DataCard。”
对话四：组装页面
Prompt： “现在我将组装完整的 Dashboard 页面。我已经有了以下组件：
@/components/dashboard/DashboardNavbar
@/components/dashboard/DashboardSidebar
@/components/dashboard/DataCard
请创建一个 app/dashboard/page.tsx 文件，将这些组件布局到页面中。布局结构参考 Figma 设计（附链接）的整体框架。侧边栏固定在最左侧，导航栏在最顶部，主内容区滚动。”
指定技术栈
Next.js + Vercel AI SDK 组合为 Vibe Coding 提供了理想的技术基座。
-
Next.js：作为 React 框架，其内置的文件路由、SSR/SSG 渲染策略、API Routes 等功能，为 Vibe Coding 提供了 “无需设计即合规” 的项目结构。开发者无需纠结路由设计、工程配置，可直接聚焦业务逻辑。
-
Vercel AI SDK：包含@ai-sdk/openai、@ai-sdk/react（v1.2.9+）及核心ai包，提供了与 OpenAI、Anthropic 等大模型的标准化对接能力，支持流式响应、提示词管理、模型切换等功能，是实现 “AI 辅助 Vibe Coding” 的核心工具。
-
组件库选型：如 Tailwind UI、Shadcn/UI，通过预设的设计系统和组件 API，避免 Vibe Coding 中因样式混乱、组件复用性差导致的代码冗余。
Review AI 生成的代码
案例
在当前目录下创建一个打工人效率工具项目，要求
1、使用 Next.js 技术栈
2、UI 库使用 shadcn/ui
3、添加 Vercel ai、ai-sdk/openai、@ai-sdk/react 依赖
4、功能主要有周报生成工具、绩效自评生成工具等
5、整体布局为左中右，左侧为sidebar，中间为配置输入区域，右侧使用Vercel SDK流式输出结果
