使用Claude Code创建演示：用Supabase和Vercel进行Vibecoding

Vibecoding是一种全新的软件开发范式，程序员通过自然语言指令引导AI代理，让人工智能来编写实际的代码。这个术语由Andrej Karpathy（OpenAI联合创始人、前特斯拉AI总监）在2025年2月的一条著名推文中提出："有一种新的编码方式，我称之为vibecoding，你完全沉浸在氛围中，拥抱指数级增长，忘记代码的存在。"

在本文中，我们将展示如何使用Claude Code作为AI代理、Supabase作为后端（数据库、认证、API）以及Vercel进行部署来构建一个完整的、可运行的演示——所有这些都完全利用这些服务的免费套餐。

1. 什么是Vibecoding以及为什么它具有革命性

Vibecoding代表了软件开发中的根本性范式转变。开发者不再逐行编写代码，而是：

1. 描述用自然语言表达想要的内容。
2. AI代理生成完整的代码。
3. 开发者审查、测试和迭代。

为什么它有效

• 速度：一个需要数天的项目可以在几小时内构建完成。
• 可及性：即使不是专业开发者也可以构建可运行的产品。
• 快速迭代：你可以更快地测试想法和转型。
• 聚焦产品：你专注于"做什么"而不是"怎么做"。

何时使用Vibecoding

Vibecoding非常适合：

• 演示和MVP：快速构建原型来验证想法。
• 黑客马拉松：在短短几个小时内创建一个可运行的产品。
• 副业项目：在不投入数周时间的情况下探索新技术。
• 概念验证：向利益相关者或投资者展示技术可行性。

警告： Vibecoding非常适合演示和原型。对于具有高安全性和可扩展性要求的生产级应用程序，对生成的代码进行彻底审查仍然至关重要。

2. 技术栈：Claude Code + Supabase + Vercel

Claude Code

Claude Code是Anthropic的AI编码代理。它直接在你的终端中运行，可以：

• 阅读和理解整个代码库。
• 创建、修改和删除文件。
• 执行终端命令。
• 与API和外部服务交互。
• 使用Git管理版本控制。
• 自主迭代修复错误和bug。

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start in a project directory
cd my-project
claude

Supabase（免费套餐）

Supabase是一个开源的Firebase替代方案，提供：

• PostgreSQL数据库：完整的关系型数据库。
• 认证：支持邮箱、Google、GitHub等方式登录。
• REST和实时API：根据你的schema自动生成。
• 存储：用于文件和图片。
• Edge Functions：无服务器函数。

免费套餐包括：

| 资源 | 免费限额 | |----------|-----------| | 数据库 | 500 MB | | 存储 | 1 GB | | 带宽 | 5 GB | | Edge Function调用 | 50万次/月 | | 已认证用户 | 无限制 | | 项目 | 2个活跃项目 |

Vercel（免费套餐）

Vercel是Next.js应用程序的完美部署平台：

• 从GitHub自动部署。
• 每个分支和PR都有预览部署。
• 全球CDN提供最佳性能。
• 内置无服务器函数。
• 免费基础分析。

免费套餐包括：

| 资源 | 免费限额 | |----------|-----------| | 带宽 | 100 GB/月 | | 无服务器函数执行 | 100 GB-hours/月 | | 构建 | 6,000分钟/月 | | 项目 | 无限制 | | 部署 | 无限制 |

3. 初始设置：准备环境

前置条件

在开始之前，确保你已经具备：

• 已安装Node.js 18+。
• 已配置Git。
• 一个GitHub账号。
• 一个Supabase账号（在supabase.com免费注册）。
• 一个Vercel账号（在vercel.com免费注册）。
• 已安装Claude Code（npm install -g @anthropic-ai/claude-code）。

第一步：创建项目

打开终端并启动Claude Code：

mkdir my-demo-app && cd my-demo-app
claude

现在你可以开始用自然语言给Claude Code下达指令：

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

Claude Code会自动执行：

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

第二步：配置Supabase

1. 前往supabase.com并创建一个新项目。
2. 在 Settings > API 中记下项目URL和anon key。
3. 回到终端中的Claude Code：

You: Add Supabase to the project. Create a .env.local file with the variables
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
Supabase client with SSR support for Next.js App Router.

Claude Code会创建完整的配置：

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. 构建演示：任务管理应用

让我们构建一个具体的演示：一个具有认证、完整CRUD和现代界面的任务管理应用。

定义数据库Schema

给Claude Code指令来创建schema：

You: Create a SQL migration for Supabase with the following tables:

1. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   to profiles), created_at
3. tasks: id (uuid), title (text), description (text), status (enum:
   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
   created_at, updated_at

Enable Row Level Security on all tables and create appropriate policies.

Claude Code会生成完整的迁移脚本：

-- Create enum types
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Projects table
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Profiles policies
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Projects policies
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Tasks policies
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

你可以直接从Supabase控制台（SQL编辑器）或通过CLI运行此迁移。

生成TypeScript类型

You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

构建用户界面

现在是vibecoding最强大的部分。给Claude Code高层级的指令：

You: Create a dashboard page for the task management app with:

1. Sidebar with navigation between projects
2. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3. Modal to create/edit tasks
4. Header with user avatar and logout
5. Modern design with shadcn/ui and Tailwind

Use data from Supabase with React Server Components where possible
and Client Components only where interactivity is needed.

Claude Code会逐个组件地构建整个界面。

添加认证

You: Add a complete authentication system with:

1. Login page with email/password and GitHub login
2. Registration page
3. Middleware to protect authenticated routes
4. Automatic redirect for unauthenticated users
5. Automatic profile creation after registration

Claude Code会配置Next.js中间件和认证页面：

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. 高级Vibecoding模式

迭代式提示

有效vibecoding的秘诀是迭代。不要试图在一个提示中描述所有内容。分步进行：

第1步: "创建带有头部和侧边栏的基础布局"
第2步: "在侧边栏中添加项目列表和创建新项目的按钮"
第3步: "在主区域创建看板视图"
第4步: "在列之间添加拖拽功能"
第5步: "实现创建新任务的模态框"
第6步: "添加toast通知以提供用户反馈"

提示： 提示越具体、越有上下文，结果就越好。Claude Code可以访问整个代码库，因此它能够连贯地集成新功能。

错误处理

当某些东西不工作时（肯定会发生），你可以简单地说：

You: I'm getting this error in the console: "TypeError: Cannot read property
'map' of undefined" in the TaskList component. Fix it.

Claude Code会分析代码，找出问题并修复它。

使用AI进行重构

You: The Dashboard component has become too large. Split it into smaller,
reusable components while maintaining the same functionality.

测试

You: Add tests with Vitest for utility functions and Playwright tests for
the authentication and task creation flow.

6. 部署到Vercel：从代码到全世界

第一步：推送到GitHub

You: Create an appropriate .gitignore, commit everything, and push to a new
GitHub repository called "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

第二步：连接Vercel

1. 前往vercel.com并点击"Add New Project"。
2. 导入你刚创建的GitHub仓库。
3. 添加环境变量：
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. 点击"Deploy"。

第三步：配置自定义域名（可选）

Vercel提供一个免费的URL，如my-demo-app.vercel.app。对于自定义域名：

You: Add the configuration for a custom domain in vercel.json

预览部署

每次你在GitHub上打开一个Pull Request，Vercel会自动创建一个带有唯一URL的预览部署。非常适合在合并之前展示更改。

7. 优化你的演示

性能

You: Optimize the app's performance:
1. Add loading states with Suspense and skeletons
2. Implement caching with Next.js unstable_cache
3. Optimize images with next/image
4. Add SEO metadata for each page

Supabase实时功能

在演示中总是令人印象深刻的一个功能是实时同步：

You: Add realtime synchronization for tasks using Supabase Realtime.
When a user updates a task, all other users should see the change
in real time without refreshing.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

暗色模式

You: Add dark mode support with a toggle in the header.
Use Tailwind dark classes and save the preference in localStorage.

8. 有效Vibecoding的最佳实践

1. 在提示中保持具体

❌ "做一个漂亮的页面"
✅ "创建一个落地页，包含一个紫蓝色渐变的hero区域、
   一个带有3张图标卡片的功能区域，以及一个橙色的CTA按钮"

2. 提供上下文

❌ "添加认证"
✅ "使用Supabase Auth添加认证。项目使用Next.js 15 App
   Router和TypeScript。我想要邮箱/密码登录和GitHub OAuth。
   使用@supabase/ssr的SSR模式"

3. 小步迭代

不要试图在一个提示中构建所有东西。逐步推进：

1. 基础布局
2. 一次一个功能
3. 样式和打磨
4. 错误处理
5. 测试

4. 审查生成的代码

Vibecoding不意味着不阅读代码。始终审查：

• 安全性：RLS策略、输入验证、数据清理。
• 性能：N+1查询、不必要的客户端组件。
• 最佳实践：项目结构、命名规范。

5. 策略性地使用Git

You: Commit the changes with a descriptive message after each completed feature.

这让你在出问题时可以回退。

9. 成本：真的全部免费吗？

以下是每项服务的成本明细：

| 服务 | 免费计划 | 何时付费 | |---------|-----------|-------------| | Claude Code | 需要Anthropic计划（起价$20/月）或API密钥 | 立即，但价值巨大 | | Supabase | 慷慨的免费套餐（2个项目，500MB数据库） | 超出免费套餐限制时 | | Vercel | 个人项目免费套餐 | 团队或商业用途 | | GitHub | 公共和私有仓库免费 | 企业功能 |

注意： Claude Code需要订阅或API额度，但就开发速度而言，投资回报率非常高。对于一个演示或MVP，总成本大约在20美元左右。

免费AI替代方案

如果你想把成本降到绝对零，可以使用：

• Cursor（有限制的免费套餐）。
• GitHub Copilot（对学生和开源免费）。
• Codeium/Windsurf（慷慨的免费套餐）。

10. 从演示到产品：下一步

一旦你的演示上线了，以下是接下来的步骤：

1. 收集反馈：与潜在用户分享演示并收集意见。
2. 快速迭代：使用vibecoding来实现用户要求的更改。
3. 监控指标：Vercel Analytics和Supabase控制台为你提供必要的数据。
4. 按需扩展：只有在验证了需求之后才升级到付费计划。

结论

使用Claude Code、Supabase和Vercel进行Vibecoding是在创纪录的时间内构建演示和MVP的强大组合。过去需要数周开发时间的工作，现在只需几个小时就能完成，而且质量水平令人惊喜。

关键是以正确的心态来对待vibecoding：它不是"不懂编码"，而是用AI工具放大你的能力。你对底层技术（React、SQL、认证、部署）了解得越多，你就越能有效地引导AI代理实现期望的结果。

软件开发的未来已经到来，入门成本从未如此之低。创建你的演示，用真实用户验证它，构建下一个伟大的产品吧。

你的第一个演示清单：

• [x] Claude Code已安装并配置
• [x] Supabase项目已创建并设计好数据库schema
• [x] Next.js项目已使用shadcn/ui初始化
• [x] 认证已配置
• [x] 完整CRUD已实现
• [x] 现代且响应式的UI
• [x] 已部署到Vercel
• [x] 可分享的URL已准备好收集反馈