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

spinny:~/writing $ vim create-demo-claude-code-vibecoding.md

1~
2**Vibecoding**是一种全新的软件开发范式，程序员通过自然语言指令引导AI代理，让人工智能来编写实际的代码。这个术语由Andrej Karpathy（OpenAI联合创始人、前特斯拉AI总监）在2025年2月的一条著名推文中提出：_"有一种新的编码方式，我称之为vibecoding，你完全沉浸在氛围中，拥抱指数级增长，忘记代码的存在。"_
3~
4在本文中，我们将展示如何使用**Claude Code**作为AI代理、**Supabase**作为后端（数据库、认证、API）以及**Vercel**进行部署来构建一个完整的、可运行的演示 -  - 所有这些都完全利用这些服务的**免费套餐**。
5~
6## 1. 什么是Vibecoding以及为什么它具有革命性
7~
8Vibecoding代表了软件开发中的根本性范式转变。开发者不再逐行编写代码，而是：
9~
101. **描述**用自然语言表达想要的内容。
112. **AI代理**生成完整的代码。
123. **开发者**审查、测试和迭代。
13~
14### 为什么它有效
15~
16- **速度**：一个需要数天的项目可以在几小时内构建完成。
17- **可及性**：即使不是专业开发者也可以构建可运行的产品。
18- **快速迭代**：你可以更快地测试想法和转型。
19- **聚焦产品**：你专注于"做什么"而不是"怎么做"。
20~
21```mermaid
22flowchart LR
23    A[想法] --> B[自然语言提示]
24    B --> C[Claude Code生成代码]
25    C --> D[审查和测试]
26    D --> E[迭代]
27    E --> B
28    D --> F[部署到Vercel]
29```
30~
31### 何时使用Vibecoding
32~
33Vibecoding非常适合：
34~
35- **演示和MVP**：快速构建原型来验证想法。
36- **黑客马拉松**：在短短几个小时内创建一个可运行的产品。
37- **副业项目**：在不投入数周时间的情况下探索新技术。
38- **概念验证**：向利益相关者或投资者展示技术可行性。
39~
40> **警告：** Vibecoding非常适合演示和原型。对于具有高安全性和可扩展性要求的生产级应用程序，对生成的代码进行彻底审查仍然至关重要。
41~
42## 2. 技术栈：Claude Code + Supabase + Vercel
43~
44### Claude Code
45~
46Claude Code是Anthropic的AI编码代理。它直接在你的终端中运行，可以：
47~
48- 阅读和理解整个代码库。
49- 创建、修改和删除文件。
50- 执行终端命令。
51- 与API和外部服务交互。
52- 使用Git管理版本控制。
53- 自主迭代修复错误和bug。
54~
55```bash
56# Install Claude Code
57npm install -g @anthropic-ai/claude-code
58~
59# Start in a project directory
60cd my-project
61claude
62```
63~
64### Supabase（免费套餐）
65~
66Supabase是一个开源的Firebase替代方案，提供：
67~
68- **PostgreSQL数据库**：完整的关系型数据库。
69- **认证**：支持邮箱、Google、GitHub等方式登录。
70- **REST和实时API**：根据你的schema自动生成。
71- **存储**：用于文件和图片。
72- **Edge Functions**：无服务器函数。
73~
74免费套餐包括：
75~
76| 资源 | 免费限额 |
77|----------|-----------|
78| 数据库 | 500 MB |
79| 存储 | 1 GB |
80| 带宽 | 5 GB |
81| Edge Function调用 | 50万次/月 |
82| 已认证用户 | 无限制 |
83| 项目 | 2个活跃项目 |
84~
85### Vercel（免费套餐）
86~
87Vercel是Next.js应用程序的完美部署平台：
88~
89- 从GitHub**自动部署**。
90- 每个分支和PR都有**预览部署**。
91- **全球CDN**提供最佳性能。
92- 内置**无服务器函数**。
93- 免费**基础分析**。
94~
95免费套餐包括：
96~
97| 资源 | 免费限额 |
98|----------|-----------|
99| 带宽 | 100 GB/月 |
100| 无服务器函数执行 | 100 GB-hours/月 |
101| 构建 | 6,000分钟/月 |
102| 项目 | 无限制 |
103| 部署 | 无限制 |
104~
105## 3. 初始设置：准备环境
106~
107### 前置条件
108~
109在开始之前，确保你已经具备：
110~
111- 已安装**Node.js 18+**。
112- 已配置**Git**。
113- 一个**GitHub**账号。
114- 一个**Supabase**账号（在[supabase.com](https://supabase.com)免费注册）。
115- 一个**Vercel**账号（在[vercel.com](https://vercel.com)免费注册）。
116- 已安装**Claude Code**（`npm install -g @anthropic-ai/claude-code`）。
117~
118### 第一步：创建项目
119~
120打开终端并启动Claude Code：
121~
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126~
127现在你可以开始用自然语言给Claude Code下达指令：
128~
129```
130You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
131and shadcn/ui. Also initialize a Git repository.
132```
133~
134Claude Code会自动执行：
135~
136```bash
137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
138npx shadcn@latest init
139git init && git add . && git commit -m "Initial commit"
140```
141~
142### 第二步：配置Supabase
143~
1441. 前往[supabase.com](https://supabase.com)并创建一个新项目。
1452. 在 Settings > API 中记下**项目URL**和**anon key**。
1463. 回到终端中的Claude Code：
147~
148```
149You: Add Supabase to the project. Create a .env.local file with the variables
150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
151Supabase client with SSR support for Next.js App Router.
152```
153~
154Claude Code会创建完整的配置：
155~
156```typescript
157// src/lib/supabase/client.ts
158import { createBrowserClient } from '@supabase/ssr';
159~
160export function createClient() {
161  return createBrowserClient(
162    process.env.NEXT_PUBLIC_SUPABASE_URL!,
163    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
164  );
165}
166```
167~
168```typescript
169// src/lib/supabase/server.ts
170import { createServerClient } from '@supabase/ssr';
171import { cookies } from 'next/headers';
172~
173export async function createClient() {
174  const cookieStore = await cookies();
175~
176  return createServerClient(
177    process.env.NEXT_PUBLIC_SUPABASE_URL!,
178    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
179    {
180      cookies: {
181        getAll() {
182          return cookieStore.getAll();
183        },
184        setAll(cookiesToSet) {
185          cookiesToSet.forEach(({ name, value, options }) =>
186            cookieStore.set(name, value, options)
187          );
188        },
189      },
190    }
191  );
192}
193```
194~
195## 4. 构建演示：任务管理应用
196~
197让我们构建一个具体的演示：一个具有认证、完整CRUD和现代界面的**任务管理应用**。
198~
199### 定义数据库Schema
200~
201给Claude Code指令来创建schema：
202~
203```
204You: Create a SQL migration for Supabase with the following tables:
205~
2061. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
207   created_at
2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
209   to profiles), created_at
2103. tasks: id (uuid), title (text), description (text), status (enum:
211   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
212   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
213   created_at, updated_at
214~
215Enable Row Level Security on all tables and create appropriate policies.
216```
217~
218Claude Code会生成完整的迁移脚本：
219~
220```sql
221-- Create enum types
222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
224~
225-- Profiles table
226CREATE TABLE profiles (
227  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
228  username TEXT UNIQUE,
229  avatar_url TEXT,
230  created_at TIMESTAMPTZ DEFAULT NOW()
231);
232~
233-- Projects table
234CREATE TABLE projects (
235  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
236  name TEXT NOT NULL,
237  description TEXT,
238  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
239  created_at TIMESTAMPTZ DEFAULT NOW()
240);
241~
242-- Tasks table
243CREATE TABLE tasks (
244  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
245  title TEXT NOT NULL,
246  description TEXT,
247  status task_status DEFAULT 'todo',
248  priority task_priority DEFAULT 'medium',
249  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
250  assigned_to UUID REFERENCES profiles(id),
251  due_date TIMESTAMPTZ,
252  created_at TIMESTAMPTZ DEFAULT NOW(),
253  updated_at TIMESTAMPTZ DEFAULT NOW()
254);
255~
256-- Enable RLS
257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
260~
261-- Profiles policies
262CREATE POLICY "Users can view own profile"
263  ON profiles FOR SELECT USING (auth.uid() = id);
264CREATE POLICY "Users can update own profile"
265  ON profiles FOR UPDATE USING (auth.uid() = id);
266~
267-- Projects policies
268CREATE POLICY "Users can view own projects"
269  ON projects FOR SELECT USING (auth.uid() = owner_id);
270CREATE POLICY "Users can create projects"
271  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
272CREATE POLICY "Users can update own projects"
273  ON projects FOR UPDATE USING (auth.uid() = owner_id);
274CREATE POLICY "Users can delete own projects"
275  ON projects FOR DELETE USING (auth.uid() = owner_id);
276~
277-- Tasks policies
278CREATE POLICY "Users can view tasks in their projects"
279  ON tasks FOR SELECT USING (
280    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
281  );
282CREATE POLICY "Users can create tasks in their projects"
283  ON tasks FOR INSERT WITH CHECK (
284    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
285  );
286CREATE POLICY "Users can update tasks in their projects"
287  ON tasks FOR UPDATE USING (
288    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
289  );
290CREATE POLICY "Users can delete tasks in their projects"
291  ON tasks FOR DELETE USING (
292    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
293  );
294```
295~
296你可以直接从Supabase控制台（SQL编辑器）或通过CLI运行此迁移。
297~
298### 生成TypeScript类型
299~
300```
301You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts
302```
303~
304```bash
305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
306```
307~
308### 构建用户界面
309~
310现在是vibecoding最强大的部分。给Claude Code高层级的指令：
311~
312```
313You: Create a dashboard page for the task management app with:
314~
3151. Sidebar with navigation between projects
3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3173. Modal to create/edit tasks
3184. Header with user avatar and logout
3195. Modern design with shadcn/ui and Tailwind
320~
321Use data from Supabase with React Server Components where possible
322and Client Components only where interactivity is needed.
323```
324~
325Claude Code会逐个组件地构建整个界面。
326~
327### 添加认证
328~
329```
330You: Add a complete authentication system with:
331~
3321. Login page with email/password and GitHub login
3332. Registration page
3343. Middleware to protect authenticated routes
3354. Automatic redirect for unauthenticated users
3365. Automatic profile creation after registration
337```
338~
339Claude Code会配置Next.js中间件和认证页面：
340~
341```typescript
342// src/middleware.ts
343import { createServerClient } from '@supabase/ssr';
344import { NextResponse, type NextRequest } from 'next/server';
345~
346export async function middleware(request: NextRequest) {
347  let supabaseResponse = NextResponse.next({ request });
348~
349  const supabase = createServerClient(
350    process.env.NEXT_PUBLIC_SUPABASE_URL!,
351    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
352    {
353      cookies: {
354        getAll() {
355          return request.cookies.getAll();
356        },
357        setAll(cookiesToSet) {
358          cookiesToSet.forEach(({ name, value }) =>
359            request.cookies.set(name, value)
360          );
361          supabaseResponse = NextResponse.next({ request });
362          cookiesToSet.forEach(({ name, value, options }) =>
363            supabaseResponse.cookies.set(name, value, options)
364          );
365        },
366      },
367    }
368  );
369~
370  const { data: { user } } = await supabase.auth.getUser();
371~
372  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
373    const url = request.nextUrl.clone();
374    url.pathname = '/auth/login';
375    return NextResponse.redirect(url);
376  }
377~
378  return supabaseResponse;
379}
380~
381export const config = {
382  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
383};
384```
385~
386## 5. 高级Vibecoding模式
387~
388### 迭代式提示
389~
390有效vibecoding的秘诀是**迭代**。不要试图在一个提示中描述所有内容。分步进行：
391~
392```
393第1步: "创建带有头部和侧边栏的基础布局"
394第2步: "在侧边栏中添加项目列表和创建新项目的按钮"
395第3步: "在主区域创建看板视图"
396第4步: "在列之间添加拖拽功能"
397第5步: "实现创建新任务的模态框"
398第6步: "添加toast通知以提供用户反馈"
399```
400~
401> **提示：** 提示越具体、越有上下文，结果就越好。Claude Code可以访问整个代码库，因此它能够连贯地集成新功能。
402~
403### 错误处理
404~
405当某些东西不工作时（肯定会发生），你可以简单地说：
406~
407```
408You: I'm getting this error in the console: "TypeError: Cannot read property
409'map' of undefined" in the TaskList component. Fix it.
410```
411~
412Claude Code会分析代码，找出问题并修复它。
413~
414### 使用AI进行重构
415~
416```
417You: The Dashboard component has become too large. Split it into smaller,
418reusable components while maintaining the same functionality.
419```
420~
421### 测试
422~
423```
424You: Add tests with Vitest for utility functions and Playwright tests for
425the authentication and task creation flow.
426```
427~
428## 6. 部署到Vercel：从代码到全世界
429~
430### 第一步：推送到GitHub
431~
432```
433You: Create an appropriate .gitignore, commit everything, and push to a new
434GitHub repository called "my-demo-app".
435```
436~
437```bash
438git add .
439git commit -m "feat: complete task management demo"
440gh repo create my-demo-app --public --push --source=.
441```
442~
443### 第二步：连接Vercel
444~
4451. 前往[vercel.com](https://vercel.com)并点击"Add New Project"。
4462. 导入你刚创建的GitHub仓库。
4473. 添加环境变量：
448   - `NEXT_PUBLIC_SUPABASE_URL`
449   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4504. 点击"Deploy"。
451~
452```mermaid
453flowchart LR
454    A[GitHub推送] --> B[Vercel构建]
455    B --> C[自动部署]
456    C --> D[公共URL]
457    D --> E[全球CDN]
458```
459~
460### 第三步：配置自定义域名（可选）
461~
462Vercel提供一个免费的URL，如`my-demo-app.vercel.app`。对于自定义域名：
463~
464```
465You: Add the configuration for a custom domain in vercel.json
466```
467~
468### 预览部署
469~
470每次你在GitHub上打开一个Pull Request，Vercel会自动创建一个带有唯一URL的**预览部署**。非常适合在合并之前展示更改。
471~
472## 7. 优化你的演示
473~
474### 性能
475~
476```
477You: Optimize the app's performance:
4781. Add loading states with Suspense and skeletons
4792. Implement caching with Next.js unstable_cache
4803. Optimize images with next/image
4814. Add SEO metadata for each page
482```
483~
484### Supabase实时功能
485~
486在演示中总是令人印象深刻的一个功能是**实时同步**：
487~
488```
489You: Add realtime synchronization for tasks using Supabase Realtime.
490When a user updates a task, all other users should see the change
491in real time without refreshing.
492```
493~
494```typescript
495'use client';
496~
497import { useEffect, useState } from 'react';
498import { createClient } from '@/lib/supabase/client';
499import type { Task } from '@/types/database';
500~
501export function useRealtimeTasks(projectId: string) {
502  const [tasks, setTasks] = useState<Task[]>([]);
503  const supabase = createClient();
504~
505  useEffect(() => {
506    const channel = supabase
507      .channel('tasks-changes')
508      .on(
509        'postgres_changes',
510        {
511          event: '*',
512          schema: 'public',
513          table: 'tasks',
514          filter: `project_id=eq.${projectId}`,
515        },
516        (payload) => {
517          if (payload.eventType === 'INSERT') {
518            setTasks((prev) => [...prev, payload.new as Task]);
519          } else if (payload.eventType === 'UPDATE') {
520            setTasks((prev) =>
521              prev.map((t) =>
522                t.id === payload.new.id ? (payload.new as Task) : t
523              )
524            );
525          } else if (payload.eventType === 'DELETE') {
526            setTasks((prev) =>
527              prev.filter((t) => t.id !== payload.old.id)
528            );
529          }
530        }
531      )
532      .subscribe();
533~
534    return () => {
535      supabase.removeChannel(channel);
536    };
537  }, [projectId, supabase]);
538~
539  return tasks;
540}
541```
542~
543### 暗色模式
544~
545```
546You: Add dark mode support with a toggle in the header.
547Use Tailwind dark classes and save the preference in localStorage.
548```
549~
550## 8. 有效Vibecoding的最佳实践
551~
552### 1. 在提示中保持具体
553~
554```
555❌ "做一个漂亮的页面"
556✅ "创建一个落地页，包含一个紫蓝色渐变的hero区域、
557   一个带有3张图标卡片的功能区域，以及一个橙色的CTA按钮"
558```
559~
560### 2. 提供上下文
561~
562```
563❌ "添加认证"
564✅ "使用Supabase Auth添加认证。项目使用Next.js 15 App
565   Router和TypeScript。我想要邮箱/密码登录和GitHub OAuth。
566   使用@supabase/ssr的SSR模式"
567```
568~
569### 3. 小步迭代
570~
571不要试图在一个提示中构建所有东西。逐步推进：
572~
5731. 基础布局
5742. 一次一个功能
5753. 样式和打磨
5764. 错误处理
5775. 测试
578~
579### 4. 审查生成的代码
580~
581Vibecoding不意味着不阅读代码。始终审查：
582~
583- **安全性**：RLS策略、输入验证、数据清理。
584- **性能**：N+1查询、不必要的客户端组件。
585- **最佳实践**：项目结构、命名规范。
586~
587### 5. 策略性地使用Git
588~
589```
590You: Commit the changes with a descriptive message after each completed feature.
591```
592~
593这让你在出问题时可以回退。
594~
595## 9. 成本：真的全部免费吗？
596~
597以下是每项服务的成本明细：
598~
599| 服务 | 免费计划 | 何时付费 |
600|---------|-----------|-------------|
601| **Claude Code** | 需要Anthropic计划（起价$20/月）或API密钥 | 立即，但价值巨大 |
602| **Supabase** | 慷慨的免费套餐（2个项目，500MB数据库） | 超出免费套餐限制时 |
603| **Vercel** | 个人项目免费套餐 | 团队或商业用途 |
604| **GitHub** | 公共和私有仓库免费 | 企业功能 |
605~
606> **注意：** Claude Code需要订阅或API额度，但就开发速度而言，投资回报率非常高。对于一个演示或MVP，总成本大约在20美元左右。
607~
608### 免费AI替代方案
609~
610如果你想把成本降到绝对零，可以使用：
611~
612- **Cursor**（有限制的免费套餐）。
613- **GitHub Copilot**（对学生和开源免费）。
614- **Codeium/Windsurf**（慷慨的免费套餐）。
615~
616## 10. 从演示到产品：下一步
617~
618一旦你的演示上线了，以下是接下来的步骤：
619~
620```mermaid
621flowchart TD
622    A[上线的演示] --> B{用户反馈}
623    B --> C[产品迭代]
624    C --> D[产品市场契合度]
625    D --> E[扩展]
626    E --> F[Supabase Pro计划]
627    E --> G[Vercel Pro计划]
628    E --> H[自定义域名]
629```
630~
6311. **收集反馈**：与潜在用户分享演示并收集意见。
6322. **快速迭代**：使用vibecoding来实现用户要求的更改。
6333. **监控指标**：Vercel Analytics和Supabase控制台为你提供必要的数据。
6344. **按需扩展**：只有在验证了需求之后才升级到付费计划。
635~
636~
637## 结论
638~
639使用Claude Code、Supabase和Vercel进行Vibecoding是在创纪录的时间内构建演示和MVP的强大组合。过去需要数周开发时间的工作，现在只需几个小时就能完成，而且质量水平令人惊喜。
640~
641关键是以正确的心态来对待vibecoding：它不是"不懂编码"，而是用AI工具**放大你的能力**。你对底层技术（React、SQL、认证、部署）了解得越多，你就越能有效地引导AI代理实现期望的结果。
642~
643软件开发的未来已经到来，入门成本从未如此之低。创建你的演示，用真实用户验证它，构建下一个伟大的产品吧。
644~
645> **你的第一个演示清单：**
646>
647> - [x] Claude Code已安装并配置
648> - [x] Supabase项目已创建并设计好数据库schema
649> - [x] Next.js项目已使用shadcn/ui初始化
650> - [x] 认证已配置
651> - [x] 完整CRUD已实现
652> - [x] 现代且响应式的UI
653> - [x] 已部署到Vercel
654> - [x] 可分享的URL已准备好收集反馈
655~

NORMAL · create-demo-claude-code-vibecoding.md [readonly]655 lines · :q to close

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

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

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

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

101. **描述**用自然语言表达想要的内容。

112. **AI代理**生成完整的代码。

123. **开发者**审查、测试和迭代。

13~

14### 为什么它有效

15~

16- **速度**：一个需要数天的项目可以在几小时内构建完成。

17- **可及性**：即使不是专业开发者也可以构建可运行的产品。

18- **快速迭代**：你可以更快地测试想法和转型。

19- **聚焦产品**：你专注于"做什么"而不是"怎么做"。

20~

21```mermaid

22flowchart LR

23 A[想法] --> B[自然语言提示]

24 B --> C[Claude Code生成代码]

25 C --> D[审查和测试]

26 D --> E[迭代]

27 E --> B

28 D --> F[部署到Vercel]

29```

30~

31### 何时使用Vibecoding

32~

33Vibecoding非常适合：

34~

35- **演示和MVP**：快速构建原型来验证想法。

36- **黑客马拉松**：在短短几个小时内创建一个可运行的产品。

37- **副业项目**：在不投入数周时间的情况下探索新技术。

38- **概念验证**：向利益相关者或投资者展示技术可行性。

39~

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

41~

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

43~

44### Claude Code

45~

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

47~

48- 阅读和理解整个代码库。

49- 创建、修改和删除文件。

50- 执行终端命令。

51- 与API和外部服务交互。

52- 使用Git管理版本控制。

53- 自主迭代修复错误和bug。

54~

55```bash

56# Install Claude Code

57npm install -g @anthropic-ai/claude-code

58~

59# Start in a project directory

60cd my-project

61claude

62```

63~

64### Supabase（免费套餐）

65~

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

67~

68- **PostgreSQL数据库**：完整的关系型数据库。

69- **认证**：支持邮箱、Google、GitHub等方式登录。

70- **REST和实时API**：根据你的schema自动生成。

71- **存储**：用于文件和图片。

72- **Edge Functions**：无服务器函数。

73~

74免费套餐包括：

75~

76| 资源 | 免费限额 |

77|----------|-----------|

78| 数据库 | 500 MB |

79| 存储 | 1 GB |

80| 带宽 | 5 GB |

81| Edge Function调用 | 50万次/月 |

82| 已认证用户 | 无限制 |

83| 项目 | 2个活跃项目 |

84~

85### Vercel（免费套餐）

86~

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

88~

89- 从GitHub**自动部署**。

90- 每个分支和PR都有**预览部署**。

91- **全球CDN**提供最佳性能。

92- 内置**无服务器函数**。

93- 免费**基础分析**。

94~

95免费套餐包括：

96~

97| 资源 | 免费限额 |

98|----------|-----------|

99| 带宽 | 100 GB/月 |

100| 无服务器函数执行 | 100 GB-hours/月 |

101| 构建 | 6,000分钟/月 |

102| 项目 | 无限制 |

103| 部署 | 无限制 |

104~

105## 3. 初始设置：准备环境

106~

107### 前置条件

108~

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

110~

111- 已安装**Node.js 18+**。

112- 已配置**Git**。

113- 一个**GitHub**账号。

114- 一个**Supabase**账号（在[supabase.com](https://supabase.com)免费注册）。

115- 一个**Vercel**账号（在[vercel.com](https://vercel.com)免费注册）。

116- 已安装**Claude Code**（`npm install -g @anthropic-ai/claude-code`）。

117~

118### 第一步：创建项目

119~

120打开终端并启动Claude Code：

121~

122```bash

123mkdir my-demo-app && cd my-demo-app

124claude

125```

126~

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

128~

129```

130You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,

131and shadcn/ui. Also initialize a Git repository.

132```

133~

134Claude Code会自动执行：

135~

136```bash

137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir

138npx shadcn@latest init

139git init && git add . && git commit -m "Initial commit"

140```

141~

142### 第二步：配置Supabase

143~

1441. 前往[supabase.com](https://supabase.com)并创建一个新项目。

1452. 在 Settings > API 中记下**项目URL**和**anon key**。

1463. 回到终端中的Claude Code：

147~

148```

149You: Add Supabase to the project. Create a .env.local file with the variables

150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the

151Supabase client with SSR support for Next.js App Router.

152```

153~

154Claude Code会创建完整的配置：

155~

156```typescript

157// src/lib/supabase/client.ts

158import { createBrowserClient } from '@supabase/ssr';

159~

160export function createClient() {

161 return createBrowserClient(

162 process.env.NEXT_PUBLIC_SUPABASE_URL!,

163 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

164 );

165}

166```

167~

168```typescript

169// src/lib/supabase/server.ts

170import { createServerClient } from '@supabase/ssr';

171import { cookies } from 'next/headers';

172~

173export async function createClient() {

174 const cookieStore = await cookies();

175~

176 return createServerClient(

177 process.env.NEXT_PUBLIC_SUPABASE_URL!,

178 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,

179 {

180 cookies: {

181 getAll() {

182 return cookieStore.getAll();

183 },

184 setAll(cookiesToSet) {

185 cookiesToSet.forEach(({ name, value, options }) =>

186 cookieStore.set(name, value, options)

187 );

188 },

189 },

190 }

191 );

192}

193```

194~

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

196~

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

198~

199### 定义数据库Schema

200~

201给Claude Code指令来创建schema：

202~

203```

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

205~

2061. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),

207 created_at

2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK

209 to profiles), created_at

2103. tasks: id (uuid), title (text), description (text), status (enum:

211 todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,

212 FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),

213 created_at, updated_at

214~

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

216```

217~

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

219~

220```sql

221-- Create enum types

222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');

223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

224~

225-- Profiles table

226CREATE TABLE profiles (

227 id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,

228 username TEXT UNIQUE,

229 avatar_url TEXT,

230 created_at TIMESTAMPTZ DEFAULT NOW()

231);

232~

233-- Projects table

234CREATE TABLE projects (

235 id UUID DEFAULT gen_random_uuid() PRIMARY KEY,

236 name TEXT NOT NULL,

237 description TEXT,

238 owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,

239 created_at TIMESTAMPTZ DEFAULT NOW()

240);

241~

242-- Tasks table

243CREATE TABLE tasks (

244 id UUID DEFAULT gen_random_uuid() PRIMARY KEY,

245 title TEXT NOT NULL,

246 description TEXT,

247 status task_status DEFAULT 'todo',

248 priority task_priority DEFAULT 'medium',

249 project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,

250 assigned_to UUID REFERENCES profiles(id),

251 due_date TIMESTAMPTZ,

252 created_at TIMESTAMPTZ DEFAULT NOW(),

253 updated_at TIMESTAMPTZ DEFAULT NOW()

254);

255~

256-- Enable RLS

257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;

259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

260~

261-- Profiles policies

262CREATE POLICY "Users can view own profile"

263 ON profiles FOR SELECT USING (auth.uid() = id);

264CREATE POLICY "Users can update own profile"

265 ON profiles FOR UPDATE USING (auth.uid() = id);

266~

267-- Projects policies

268CREATE POLICY "Users can view own projects"

269 ON projects FOR SELECT USING (auth.uid() = owner_id);

270CREATE POLICY "Users can create projects"

271 ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);

272CREATE POLICY "Users can update own projects"

273 ON projects FOR UPDATE USING (auth.uid() = owner_id);

274CREATE POLICY "Users can delete own projects"

275 ON projects FOR DELETE USING (auth.uid() = owner_id);

276~

277-- Tasks policies

278CREATE POLICY "Users can view tasks in their projects"

279 ON tasks FOR SELECT USING (

280 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

281 );

282CREATE POLICY "Users can create tasks in their projects"

283 ON tasks FOR INSERT WITH CHECK (

284 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

285 );

286CREATE POLICY "Users can update tasks in their projects"

287 ON tasks FOR UPDATE USING (

288 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

289 );

290CREATE POLICY "Users can delete tasks in their projects"

291 ON tasks FOR DELETE USING (

292 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

293 );

294```

295~

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

297~

298### 生成TypeScript类型

299~

300```

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

302```

303~

304```bash

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

306```

307~

308### 构建用户界面

309~

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

311~

312```

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

314~

3151. Sidebar with navigation between projects

3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop

3173. Modal to create/edit tasks

3184. Header with user avatar and logout

3195. Modern design with shadcn/ui and Tailwind

320~

321Use data from Supabase with React Server Components where possible

322and Client Components only where interactivity is needed.

323```

324~

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

326~

327### 添加认证

328~

329```

330You: Add a complete authentication system with:

331~

3321. Login page with email/password and GitHub login

3332. Registration page

3343. Middleware to protect authenticated routes

3354. Automatic redirect for unauthenticated users

3365. Automatic profile creation after registration

337```

338~

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

340~

341```typescript

342// src/middleware.ts

343import { createServerClient } from '@supabase/ssr';

344import { NextResponse, type NextRequest } from 'next/server';

345~

346export async function middleware(request: NextRequest) {

347 let supabaseResponse = NextResponse.next({ request });

348~

349 const supabase = createServerClient(

350 process.env.NEXT_PUBLIC_SUPABASE_URL!,

351 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,

352 {

353 cookies: {

354 getAll() {

355 return request.cookies.getAll();

356 },

357 setAll(cookiesToSet) {

358 cookiesToSet.forEach(({ name, value }) =>

359 request.cookies.set(name, value)

360 );

361 supabaseResponse = NextResponse.next({ request });

362 cookiesToSet.forEach(({ name, value, options }) =>

363 supabaseResponse.cookies.set(name, value, options)

364 );

365 },

366 },

367 }

368 );

369~

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

371~

372 if (!user && !request.nextUrl.pathname.startsWith('/auth')) {

373 const url = request.nextUrl.clone();

374 url.pathname = '/auth/login';

375 return NextResponse.redirect(url);

376 }

377~

378 return supabaseResponse;

379}

380~

381export const config = {

382 matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],

383};

384```

385~

386## 5. 高级Vibecoding模式

387~

388### 迭代式提示

389~

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

391~

392```

393第1步: "创建带有头部和侧边栏的基础布局"

394第2步: "在侧边栏中添加项目列表和创建新项目的按钮"

395第3步: "在主区域创建看板视图"

396第4步: "在列之间添加拖拽功能"

397第5步: "实现创建新任务的模态框"

398第6步: "添加toast通知以提供用户反馈"

399```

400~

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

402~

403### 错误处理

404~

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

406~

407```

408You: I'm getting this error in the console: "TypeError: Cannot read property

409'map' of undefined" in the TaskList component. Fix it.

410```

411~

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

413~

414### 使用AI进行重构

415~

416```

417You: The Dashboard component has become too large. Split it into smaller,

418reusable components while maintaining the same functionality.

419```

420~

421### 测试

422~

423```

424You: Add tests with Vitest for utility functions and Playwright tests for

425the authentication and task creation flow.

426```

427~

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

429~

430### 第一步：推送到GitHub

431~

432```

433You: Create an appropriate .gitignore, commit everything, and push to a new

434GitHub repository called "my-demo-app".

435```

436~

437```bash

438git add .

439git commit -m "feat: complete task management demo"

440gh repo create my-demo-app --public --push --source=.

441```

442~

443### 第二步：连接Vercel

444~

4451. 前往[vercel.com](https://vercel.com)并点击"Add New Project"。

4462. 导入你刚创建的GitHub仓库。

4473. 添加环境变量：

448 - `NEXT_PUBLIC_SUPABASE_URL`

449 - `NEXT_PUBLIC_SUPABASE_ANON_KEY`

4504. 点击"Deploy"。

451~

452```mermaid

453flowchart LR

454 A[GitHub推送] --> B[Vercel构建]

455 B --> C[自动部署]

456 C --> D[公共URL]

457 D --> E[全球CDN]

458```

459~

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

461~

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

463~

464```

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

466```

467~

468### 预览部署

469~

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

471~

472## 7. 优化你的演示

473~

474### 性能

475~

476```

477You: Optimize the app's performance:

4781. Add loading states with Suspense and skeletons

4792. Implement caching with Next.js unstable_cache

4803. Optimize images with next/image

4814. Add SEO metadata for each page

482```

483~

484### Supabase实时功能

485~

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

487~

488```

489You: Add realtime synchronization for tasks using Supabase Realtime.

490When a user updates a task, all other users should see the change

491in real time without refreshing.

492```

493~

494```typescript

495'use client';

496~

497import { useEffect, useState } from 'react';

498import { createClient } from '@/lib/supabase/client';

499import type { Task } from '@/types/database';

500~

501export function useRealtimeTasks(projectId: string) {

502 const [tasks, setTasks] = useState<Task[]>([]);

503 const supabase = createClient();

504~

505 useEffect(() => {

506 const channel = supabase

507 .channel('tasks-changes')

508 .on(

509 'postgres_changes',

510 {

511 event: '*',

512 schema: 'public',

513 table: 'tasks',

514 filter: `project_id=eq.${projectId}`,

515 },

516 (payload) => {

517 if (payload.eventType === 'INSERT') {

518 setTasks((prev) => [...prev, payload.new as Task]);

519 } else if (payload.eventType === 'UPDATE') {

520 setTasks((prev) =>

521 prev.map((t) =>

522 t.id === payload.new.id ? (payload.new as Task) : t

523 )

524 );

525 } else if (payload.eventType === 'DELETE') {

526 setTasks((prev) =>

527 prev.filter((t) => t.id !== payload.old.id)

528 );

529 }

530 }

531 )

532 .subscribe();

533~

534 return () => {

535 supabase.removeChannel(channel);

536 };

537 }, [projectId, supabase]);

538~

539 return tasks;

540}

541```

542~

543### 暗色模式

544~

545```

546You: Add dark mode support with a toggle in the header.

547Use Tailwind dark classes and save the preference in localStorage.

548```

549~

550## 8. 有效Vibecoding的最佳实践

551~

552### 1. 在提示中保持具体

553~

554```

555❌ "做一个漂亮的页面"

556✅ "创建一个落地页，包含一个紫蓝色渐变的hero区域、

557 一个带有3张图标卡片的功能区域，以及一个橙色的CTA按钮"

558```

559~

560### 2. 提供上下文

561~

562```

563❌ "添加认证"

564✅ "使用Supabase Auth添加认证。项目使用Next.js 15 App

565 Router和TypeScript。我想要邮箱/密码登录和GitHub OAuth。

566 使用@supabase/ssr的SSR模式"

567```

568~

569### 3. 小步迭代

570~

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

572~

5731. 基础布局

5742. 一次一个功能

5753. 样式和打磨

5764. 错误处理

5775. 测试

578~

579### 4. 审查生成的代码

580~

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

582~

583- **安全性**：RLS策略、输入验证、数据清理。

584- **性能**：N+1查询、不必要的客户端组件。

585- **最佳实践**：项目结构、命名规范。

586~

587### 5. 策略性地使用Git

588~

589```

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

591```

592~

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

594~

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

596~

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

598~

599| 服务 | 免费计划 | 何时付费 |

600|---------|-----------|-------------|

601| **Claude Code** | 需要Anthropic计划（起价$20/月）或API密钥 | 立即，但价值巨大 |

602| **Supabase** | 慷慨的免费套餐（2个项目，500MB数据库） | 超出免费套餐限制时 |

603| **Vercel** | 个人项目免费套餐 | 团队或商业用途 |

604| **GitHub** | 公共和私有仓库免费 | 企业功能 |

605~

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

607~

608### 免费AI替代方案

609~

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

611~

612- **Cursor**（有限制的免费套餐）。

613- **GitHub Copilot**（对学生和开源免费）。

614- **Codeium/Windsurf**（慷慨的免费套餐）。

615~

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

617~

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

619~

620```mermaid

621flowchart TD

622 A[上线的演示] --> B{用户反馈}

623 B --> C[产品迭代]

624 C --> D[产品市场契合度]

625 D --> E[扩展]

626 E --> F[Supabase Pro计划]

627 E --> G[Vercel Pro计划]

628 E --> H[自定义域名]

629```

630~

6311. **收集反馈**：与潜在用户分享演示并收集意见。

6322. **快速迭代**：使用vibecoding来实现用户要求的更改。

6333. **监控指标**：Vercel Analytics和Supabase控制台为你提供必要的数据。

6344. **按需扩展**：只有在验证了需求之后才升级到付费计划。

635~

636~

637## 结论

638~

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

640~

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

642~

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

644~

645> **你的第一个演示清单：**

646>

647> - [x] Claude Code已安装并配置

648> - [x] Supabase项目已创建并设计好数据库schema

649> - [x] Next.js项目已使用shadcn/ui初始化

650> - [x] 认证已配置

651> - [x] 完整CRUD已实现

652> - [x] 现代且响应式的UI

653> - [x] 已部署到Vercel

654> - [x] 可分享的URL已准备好收集反馈

655~