使用 AI 助手（Cursor、Copilot、Claude）快速构建功能 - 无需深入编码知识

使用 AI 辅助编码 ProductReady

致产品经理、设计师和非技术创始人：本指南向您展示如何使用 AI 编码助手来自定义 ProductReady，而无需成为开发人员。

什么是"Vibe Coding"？ 它是使用 AI 助手（如 GitHub Copilot、Cursor 或 Claude）通过用简单英语描述您想要的内容来编写代码。可以把它想象成随时待命的高级开发人员。

为什么这很重要

传统编码：学习语法 → 编写代码 → 调试 → 重复

AI 编码：描述您想要什么 → AI 编写代码 → 您审查 → 交付

示例："添加带头像上传的用户个人资料页面" → AI 在几分钟内生成整个功能。

入门指南

步骤 1：选择您的 AI 助手

Cursor - 最适合初学者和完整功能

下载 Cursor（免费试用）
打开 ProductReady 文件夹：File → Open Folder → kapps/apps/productready
按 Cmd+K（Mac）或 Ctrl+K（Windows）
开始输入您想要的内容！

为什么选择 Cursor？

理解您的整个代码库
可以同时编辑多个文件
具有用于复杂功能的 composer 模式
最佳 AI 模型（Claude、GPT-4）

GitHub Copilot - 如果您使用 VS Code，这是不错的选择

安装 VS Code
安装 GitHub Copilot 扩展
打开 ProductReady 文件夹
使用 Copilot Chat (Cmd+I)

局限性：

需要 GitHub 订阅（$10/月）
上下文感知能力不如 Cursor
更适合小编辑而非完整功能

Claude Desktop - 用于指导和规划

下载 Claude Desktop
使用 MCP（模型上下文协议）连接到您的代码
非常适合提问和获取指导

最适合：

在编码前规划功能
理解现有代码
故障排除错误

实际示例：您可以构建什么

示例 1：添加"项目"功能

您对 AI 的提示：

向 ProductReady 添加新的"项目"功能：

1. 创建项目数据库表，包含：
   - title（字符串）
   - description（文本）
   - status（枚举：active、archived、completed）
   - ownerId（指向 users 的外键）
   - createdAt、updatedAt

2. 创建 tRPC 路由：
   - projects.list（获取所有用户项目）
   - projects.create（创建新项目）
   - projects.update（更新项目）
   - projects.delete（软删除）

3. 在 /dashboard/projects 添加项目页面，包含：
   - 列表视图（表格或卡片）
   - 创建按钮
   - 编辑/删除操作

4. 使用现有设计系统（KUI 组件）

AI 将生成：

src/db/schema/projects.ts - 数据库架构
src/server/routers/projects.ts - API 路由
src/app/dashboard/projects/page.tsx - UI 页面
数据库迁移文件

耗时：使用 AI 2-5 分钟 vs. 手动 2-3 小时

示例 2：自定义落地页

您对 AI 的提示：

为我的 SaaS 产品"TaskFlow"自定义 ProductReady 落地页：

1. 更改英雄部分：
   - 标题："在一个地方管理团队任务"
   - 副标题："现代团队的简单、强大任务管理"
   - CTA："开始免费试用"

2. 添加 3 个功能卡片：
   - 实时协作
   - AI 驱动的任务优先级
   - 精美的仪表板

3. 更新为紫色主题：
   - Primary：#8B5CF6
   - Secondary：#A78BFA

4. 添加包含 3 个层级的定价部分：
   - 免费（0 用户）、入门版（$9/月）、专业版（$29/月）

AI 将生成：

更新的 src/app/(home)/page.tsx
src/app/global.css 中的新颜色 CSS 变量
带层级的定价组件

耗时：使用 AI 5-10 分钟 vs. 与设计师合作 1-2 天

示例 3：添加 Stripe 支付

您对 AI 的提示：

将 Stripe 订阅支付集成到 ProductReady：

1. 安装 Stripe SDK：pnpm add stripe @stripe/stripe-js

2. 创建 Stripe 结账会话 API：
   - 在 /api/checkout 创建 Hono 路由
   - 为月度订阅（$29）创建结账
   - 返回会话 URL

3. 在 /dashboard/billing 添加账单页面：
   - 显示当前订阅状态
   - "升级"按钮重定向到 Stripe
   - 处理成功/取消回调

4. 存储订阅数据：
   - 添加 subscriptions 表（userId、stripeSubscriptionId、status、currentPeriodEnd）
   - 在 webhook 事件时更新

5. 使用环境变量：
   - STRIPE_SECRET_KEY
   - STRIPE_PUBLISHABLE_KEY
   - STRIPE_WEBHOOK_SECRET

AI 将生成：

Stripe 集成代码
账单 UI 组件
Webhook 处理程序
数据库架构更新

耗时：使用 AI 10-15 分钟 vs. 手动 1-2 天

高效提示词模式

核心洞察：你提供的位置、UI定位和上下文越具体，AI 就越能理解你的意图并生成准确的代码。

当你提供清晰的空间和上下文信息时，AI 编码效果最佳。以下是三种经过验证的提示词模式：

模式 1：基于 UI 的提示词（位置 + 路由 + 定位）

修改 UI 元素时，务必指定：

目录：精确的应用/文件位置
路由：更改显示的 URL 路径
位置：页面上的视觉位置

模板：

目录: apps/XXX
路由: /dashboard/XXXX
位置: [具体 UI 位置]
修改: [要修改的内容]

示例 1 - 修改现有 UI 元素：

目录: apps/productready
路由: /dashboard/tasks
位置: 左上角边栏，任务列表上方
修改: 添加"按优先级筛选"下拉菜单，显示：全部、高、中、低
使用 KUI 现有的 Select 组件

示例 2 - 添加新组件：

目录: apps/productready
路由: /dashboard
位置: 主内容区域，欢迎消息下方
修改: 添加"快捷操作"卡片，包含 3 个按钮：
  - 创建任务（打开任务表单）
  - 邀请团队（打开邀请对话框）
  - 查看报告（导航到 /dashboard/reports）
使用 KUI 现有的 Card 和 Button 组件

示例 3 - 复杂 UI 流程：

目录: apps/productready
路由: /dashboard/settings/profile
位置: 右侧面板，"头像"部分下方
修改: 添加带预览的图片上传：
  1. 点击头像 → 打开文件选择器
  2. 选择图片 → 显示预览
  3. "保存"按钮更新头像
  4. 最大大小：2MB，格式：jpg、png、webp
  5. 验证失败时显示错误提示
遵循 features-upload.mdx 中的上传模式

为什么有效：AI 可以精确定位需要修改的位置以及要遵循的现有模式。

模式 2：基于测试的提示词（修复错误）

让 AI 通过提供命令输出来修复 linting、类型检查和测试错误。

模板：

目录: apps/XXX
命令: [linting/测试命令]
结果: [粘贴错误输出]
修复: [任何特定约束]

示例 1 - 类型错误：

目录: apps/productready
命令: pnpm typecheck
结果:
  src/components/TaskCard.tsx:23:15 - error TS2339: 
  Property 'priority' does not exist on type 'Task'
  
  src/components/TaskCard.tsx:45:20 - error TS2345: 
  Argument of type 'string' is not assignable to parameter of type 'TaskStatus'
  
修复: 添加缺失的类型并确保适当的类型安全

示例 2 - Lint 错误：

目录: apps/productready
命令: pnpm lint
结果:
  src/app/dashboard/page.tsx
    12:8   Warning: React Hook useEffect has a missing dependency
    23:15  Error: 'user' is possibly 'undefined'
    34:10  Error: Unexpected var, use let or const instead
    
修复: 遵循 React 最佳实践并解决所有警告

示例 3 - 测试失败：

目录: apps/productready
命令: pnpm test src/lib/utils.test.ts
结果:
  ✓ should format currency correctly
  ✕ should handle null dates (expected: "N/A", received: "Invalid Date")
  ✕ should parse task status (TypeError: Cannot read property 'toLowerCase' of undefined)
  
修复: 添加空值检查和适当的错误处理

为什么有效：AI 看到确切的错误上下文，可以应用针对性修复而不会破坏其他代码。

模式 3：基于方案的提示词（问题 + 目标）

描述你面临的问题以及你想要实现的目标。最适合功能请求和改进。

模板：

目录: apps/XXX
问题: [当前问题或限制]
目标: [期望结果]
约束: [任何要求或限制]

示例 1 - 性能问题：

目录: apps/productready
问题: /dashboard/tasks 页面在有 1000+ 任务时加载缓慢。
  当前一次获取所有任务并在单个列表中渲染它们。
目标: 实现分页或无限滚动以提高性能。
  初始加载 50 个任务，滚动到底部时加载更多。
约束: 
  - 保留现有筛选器（状态、优先级、分配人）
  - 保持搜索功能正常工作
  - 不要破坏现有任务卡片 UI

示例 2 - UX 改进：

目录: apps/productready
问题: 用户不断意外删除任务，因为删除按钮太容易点击（无确认）。
目标: 在删除任务前添加确认对话框。
  显示："确定要删除 '[任务标题]' 吗？此操作无法撤销。"
  按钮："取消"（默认聚焦）和"删除"（红色，破坏性）
约束:
  - 使用 KUI 现有的 Dialog 组件
  - 添加键盘快捷键：Escape 取消，Enter 确认
  - 成功删除后显示提示通知

示例 3 - 功能扩展：

目录: apps/productready
问题: 任务评论不支持 @提及，难以通知团队成员。
目标: 为任务评论添加 @提及功能：
  - 输入 "@" → 显示团队成员下拉列表
  - 选择成员 → 在评论中插入 @username
  - 被提及的用户收到应用内通知
  - 被提及的文本在评论中显示高亮
约束:
  - 如果可用，重用其他应用的现有提及模式
  - 在数据库中存储提及以进行通知跟踪
  - 支持每条评论多次提及

为什么有效：AI 理解上下文、用户意图和技术约束，从而设计出完整的解决方案。

提示最佳实践

✅ 好的提示

具体且结构化：

添加用户头像上传：
1. 更新 users 表：添加 avatarUrl 字段
2. 创建 /api/upload 端点（接受图片，最大 2MB）
3. 存储在 public/avatars/ 文件夹
4. 在设置页面添加上传按钮
5. 在仪表板标题显示头像

包含上下文：

我正在构建客户反馈工具。添加类似现有 Tasks 功能的"Feedback"功能，
但字段为：customerEmail、rating（1-5）、comment、category（bug/feature/other）

引用现有模式：

创建遵循与 Dashboard 相同布局的 Notifications 页面。
使用相同的侧边栏、标题和内容结构。显示带标记为已读功能的通知列表。

❌ 不好的提示

太模糊：

让它更好

缺少细节：

添加支付

（哪个支付提供商？您卖什么？月度还是一次性？）

不切实际：

构建像 Salesforce 一样的完整 CRM

（AI 无法构建整个应用 - 拆分成更小的功能）

分步指南：您的第一个 AI 功能

让我们一起构建一个"团队邀请"功能。

步骤 1：用简单英语规划

打开 Cursor/Copilot 并编写：

我想添加团队邀请功能：

用户应该能够：
1. 通过电子邮件邀请队友
2. 查看待处理的邀请（状态：pending、accepted、expired）
3. 取消邀请
4. 被邀请的用户收到带注册链接的电子邮件

我需要创建/修改哪些文件？

AI 会回复一个计划 - 首先审查它！

步骤 2：生成数据库架构

在 src/db/schema/invites.ts 中为邀请创建数据库架构：

字段：
- id（主键）
- email（字符串，索引）
- teamId（指向 users.id 的外键）
- invitedBy（指向 users.id 的外键）
- token（邀请链接的唯一字符串）
- status（枚举：pending、accepted、expired）
- expiresAt（时间戳）
- createdAt、updatedAt

使用 Drizzle ORM 语法，遵循 src/db/schema/users.ts 中的模式

步骤 3：创建 API 路由

在 src/server/routers/invites.ts 创建邀请的 tRPC 路由器：

路由：
1. invites.create - 发送邀请（输入：email），生成 token，返回邀请
2. invites.list - 获取所有用户发送的邀请
3. invites.cancel - 取消待处理的邀请（输入：inviteId）
4. invites.accept - 使用 token 接受邀请（输入：token）

遵循 src/server/routers/tasks.ts 中的模式
包含适当的身份验证检查

步骤 4：构建 UI

在 src/app/dashboard/invites/page.tsx 创建邀请页面：

布局：
- 标题："团队邀请"
- 按钮："邀请队友"（打开对话框）
- 表格显示：邮箱、状态、邀请日期、操作（取消按钮）
- 带电子邮件输入字段和发送按钮的对话框

使用现有 KUI 组件（Button、Dialog、Table）
调用 tRPC mutations：trpc.invites.create、trpc.invites.cancel
在操作时显示成功提示

步骤 5：测试

如何测试邀请功能？
1. 我需要什么测试数据？
2. 如何验证 token 生成？
3. 我应该编写单元测试吗？

AI 会指导您完成测试！

致产品经理：编写规格

使用 AI 将您的产品想法转化为开发人员（或 AI）可以实现的技术规格。

您的产品想法

产品功能：任务评论线程

用户应该能够：
- 向任何任务添加评论
- 回复评论（嵌套线程）
- @提及其他用户
- 编辑/删除自己的评论
- 在任务卡片上查看评论计数
- 被提及时收到通知

将其转化为技术规格，包含：
- 数据库架构
- API 端点
- 所需的 UI 组件
- 用户流程

AI 将输出完整的技术规格，您可以将其交给开发人员或用于自己生成代码！

致设计师：使用 AI 进行样式设计

更改颜色

将设计系统更新为青色/海洋主题：

主色：#0D9488（青色）
辅助色：#14B8A6
强调色：#06B6D4（青色）

更新 src/app/global.css 中的 CSS 变量
确保良好的可访问性对比度（WCAG AA）
保持深色模式变体

自定义组件

使仪表板卡片更现代：

- 添加微妙的悬停效果（提升 + 阴影）
- 增加圆角（从 8px 到 12px）
- 添加渐变背景（微妙）
- 增加内边距（更宽敞）

更新 src/components/ui/card.tsx 中的 Card 组件
使用 Tailwind 类

响应式设计

修复移动端的仪表板布局：

- 侧边栏应折叠成汉堡菜单
- 任务卡片应堆叠（不是网格）
- 在表格视图中隐藏不太重要的列
- 在移动端使按钮全宽

更新 src/app/dashboard/layout.tsx
使用 Tailwind 响应式类（sm:、md:、lg:）

常见陷阱

"AI 更改了错误的文件"

解决方案：对文件路径更加具体

❌ "更新按钮组件"
✅ "更新 src/components/ui/button.tsx"

"代码与现有样式不匹配"

解决方案：引用现有模式

遵循与 src/server/routers/tasks.ts 相同的模式
使用相同的错误处理和验证方法

"AI 建议安装新库"

解决方案：询问是否真的需要

我可以使用 package.json 中的现有库来做到这一点吗？
添加此依赖项的优缺点是什么？

高级：多文件功能

对于跨越多个文件的复杂功能，使用 Cursor Composer 模式：

按 Cmd+Shift+I（Composer 模式）
描述完整功能
AI 将一次修改多个文件
接受前审查更改

示例提示：

添加完整的分析仪表板：

1. 数据库：
   - 创建 analytics_events 表（event_type、user_id、metadata、timestamp）
   
2. API：
   - analytics.track - 记录事件
   - analytics.getStats - 获取聚合统计（DAU、MAU、events/day）
   
3. UI：
   - /dashboard/analytics 页面
   - 图表显示：每日活跃用户、事件计数、用户增长
   - 日期范围选择器（最近 7/30/90 天）
   
4. 组件：
   - 使用 Recharts 库制作图表
   - 创建可重用的 StatCard 组件
   
根据需要更新所有必要的文件并创建新文件。

AI 将一次性创建/修改 8-10 个文件！

快速参考：常用提示词模板

保存这些模板以便日常 AI 编码使用：

UI 更改

目录: apps/[应用名称]
路由: /[路由路径]
位置: [页面位置]
修改: [要修改的内容]

修复错误

目录: apps/[应用名称]
命令: pnpm [lint/typecheck/test]
结果: [粘贴错误输出]

新功能

目录: apps/[应用名称]
问题: [当前情况]
目标: [期望结果]
约束: [要求]

代码审查

审查 [文件路径] 中的更改：
- 检查类型安全问题
- 验证错误处理
- 确保代码风格一致
- 建议性能改进

重构

目录: apps/[应用名称]
文件: [文件路径]
当前: [描述当前实现]
重构为: [描述目标状态]
保持: [不应更改的内容]

学习资源

Cursor 文档：cursor.sh/docs
GitHub Copilot：github.com/features/copilot
提示工程：学习提示
ProductReady 示例：查看 /spec/ 文件夹了解真实产品规格

下一步

从小开始：自定义颜色或文本内容
构建一个功能：遵循上面的示例 1
迭代：要求 AI 改进它生成的内容
学习模式：研究 AI 编写的代码

记住：AI 是工具，不是魔法。您仍然需要：

✅ 运行前审查代码
✅ 彻底测试功能
✅ 了解代码的作用（让 AI 解释！）
✅ 版本控制（经常 git commit）

使用 AI 辅助编码 ProductReady

On this page