我是如何用 Cursor 在一个周末构建了 AI 旅行规划器的

背景

两个月前，我在计划一次旅行时发现，现有的旅行规划工具要么太死板，要么太泛泛。我想：如果有一个 AI 能够理解我的偏好、预算和时间限制，帮我生成一个个性化行程，会是什么样？

更重要的一个想法是：我能用 AI 本身来构建这个 AI 工具吗？

这成为了我 Vibe Coding 之旅的第一个实验。

Vibe Coding 是什么

如果你还不熟悉这个词，Vibe Coding 指的是——

不直接编写代码，而是通过描述你想要的东西（prompt engineering），让 AI 生成代码。你的角色从"打字员"转变为"导演"——你描述愿景，AI 实现细节。

核心工作流：

描述目标：用自然语言告诉 AI 你要什么
审查输出：检查 AI 生成的代码是否符合预期
提供反馈：指出问题，要求改进
迭代循环：重复上述过程直到满意

技术选型（由 Cursor 建议）

当我向 Cursor 描述了我的想法后，它建议了以下技术栈：

// AI 推荐的技术栈
const techStack = {
  framework: "Next.js 14 + App Router",
  styling: "Tailwind CSS + shadcn/ui",
  ai: "OpenAI API (GPT-4o)",
  database: "Supabase (Postgres)",
  auth: "NextAuth.js",
  deployment: "Vercel",
};

我几乎没有修改这个建议——它正是我会自己选择的技术栈。

实际过程

Day 1 (周六)

上午 (2h)：用 Cursor 生成项目脚手架，包含基础路由和布局
下午 (3h)：实现 AI 对话接口，接入 OpenAI API
晚上 (2h)：构建行程展示组件，支持拖拽排序

Day 2 (周日)

上午 (2h)：添加 Supabase 数据持久化
下午 (2h)：完善 UI，添加动画和响应式适配
晚上 (1h)：部署到 Vercel，配置自定义域名

总计：~12 小时，其中约 90% 的代码由 AI 生成。

关键收获

1. Prompt 的精确度决定代码质量

模糊的描述 → 模糊的代码。以下是我总结的有效 prompt 模式：

❌ "帮我做一个登录页面"
✅ "创建一个登录页面，包含邮箱和密码字段，使用 shadcn/ui 组件，
   表单验证用 zod，提交后调用 /api/auth/login，错误信息显示
   在表单顶部，加载状态时禁用按钮"

2. 上下文是稀缺资源

AI 模型的上下文窗口有限。我学会了在需要时只提供相关文件的片段，而不是把整个项目都扔进去。

3. 你仍然需要懂代码

这是我最大的感悟。Vibe Coding 不是"不会编程也能做产品"——它是"会编程的人能更快做产品"。你需要能：

判断 AI 生成的代码质量
发现逻辑错误
理解架构决策
调试运行时问题

结论

Vibe Coding 是一个放大器，不是替代品。它能让我 10x 更快地构建——但我仍然需要编程知识来指导这个过程。

这个站点本身就是用 Vibe Coding 构建的。接下来的文章中，我会分享更多实验、工具横评和方法论总结。

你有 Vibe Coding 的经验吗？欢迎在 GitHub 上联系我讨论。