Как создать демо с Claude Code: Вайбкодинг с Supabase и Vercel

Вайбкодинг - это новая парадигма разработки программного обеспечения, где программист направляет AI-агента через инструкции на естественном языке, позволяя искусственному интеллекту писать реальный код. Термин был придуман Андреем Карпати (сооснователем OpenAI и бывшим директором по ИИ в Tesla) в знаменитом твите от февраля 2025 года: «Появился новый вид программирования, который я называю вайбкодинг, где вы полностью отдаётесь вайбу, принимаете экспоненциальный рост и забываете, что код вообще существует.»

В этой статье мы рассмотрим, как создать полноценное работающее демо с помощью Claude Code в качестве AI-агента, Supabase в качестве бэкенда (база данных, аутентификация, API) и Vercel для деплоя - используя исключительно бесплатные тарифы этих сервисов.

1. Что такое вайбкодинг и почему он революционен

Вайбкодинг представляет фундаментальный сдвиг парадигмы в разработке ПО. Вместо написания кода строка за строкой разработчик:

1. Описывает желаемое на естественном языке.
2. AI-агент генерирует полный код.
3. Разработчик проверяет, тестирует и итерирует.

Почему это работает

• Скорость: проект, на который ушли бы дни, можно создать за часы.
• Доступность: даже неопытные разработчики могут создавать работающие продукты.
• Быстрая итерация: можно тестировать идеи и менять направление гораздо быстрее.
• Фокус на продукте: вы концентрируетесь на что вместо как.

Когда использовать вайбкодинг

Вайбкодинг идеально подходит для:

• Демо и MVP: быстрое создание прототипа для валидации идеи.
• Хакатонов: создание работающего продукта всего за несколько часов.
• Пет-проектов: изучение новых технологий без вложения недель.
• Proof of Concept: демонстрация технической осуществимости заинтересованным сторонам или инвесторам.

Предупреждение: Вайбкодинг отлично подходит для демо и прототипов. Для приложений производственного уровня с высокими требованиями к безопасности и масштабируемости тщательная проверка сгенерированного кода по-прежнему необходима.

2. Технологический стек: Claude Code + Supabase + Vercel

Claude Code

Claude Code - это AI-агент для кодирования от Anthropic. Он работает прямо в вашем терминале и может:

• Читать и понимать всю кодовую базу.
• Создавать, изменять и удалять файлы.
• Выполнять команды терминала.
• Взаимодействовать с API и внешними сервисами.
• Управлять версионированием с Git.
• Автономно итерировать над ошибками и багами.

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

# Start in a project directory
cd my-project
claude

Supabase (бесплатный тариф)

Supabase - это альтернатива Firebase с открытым исходным кодом, которая предлагает:

• База данных PostgreSQL: полноценная реляционная база данных.
• Аутентификация: вход через email, Google, GitHub и т.д.
• REST и Realtime API: автоматически генерируются из вашей схемы.
• Хранилище: для файлов и изображений.
• Edge Functions: серверлесс-функции.

Бесплатный тариф включает:

Ресурс	Бесплатный лимит
База данных	500 МБ
Хранилище	1 ГБ
Пропускная способность	5 ГБ
Вызовы Edge Function	500K/месяц
Аутентифицированные пользователи	Безлимитно
Проекты	2 активных проекта

Vercel (бесплатный тариф)

Vercel - идеальная платформа для деплоя приложений Next.js:

• Автоматический деплой из GitHub.
• Превью-деплои для каждой ветки и PR.
• Глобальный CDN для оптимальной производительности.
• Serverless Functions включены.
• Базовая аналитика бесплатно.

Бесплатный тариф включает:

Ресурс	Бесплатный лимит
Пропускная способность	100 ГБ/месяц
Выполнение Serverless Function	100 ГБ-часов/месяц
Сборки	6 000 минут/месяц
Проекты	Безлимитно
Деплои	Безлимитно

3. Начальная настройка: подготовка окружения

Предварительные требования

Перед началом убедитесь, что у вас есть:

• Node.js 18+ установлен.
• Git настроен.
• Аккаунт на GitHub.
• Аккаунт на Supabase (бесплатно на supabase.com).
• Аккаунт на Vercel (бесплатно на vercel.com).
• Claude Code установлен (npm install -g @anthropic-ai/claude-code).

Шаг 1: Создайте проект

Откройте терминал и запустите 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"

Шаг 2: Настройте Supabase

1. Перейдите на supabase.com и создайте новый проект.
2. Запишите URL проекта и anon key из Settings > API.
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 и современным интерфейсом.

Определение схемы базы данных

Дайте Claude Code инструкции для создания схемы:

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 Editor) или через 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

Создание пользовательского интерфейса

Теперь наступает самая мощная часть вайбкодинга. Дайте 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 настроит middleware 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. Продвинутые паттерны вайбкодинга

Итеративный промптинг

Секрет эффективного вайбкодинга - итерация. Не пытайтесь описать всё в одном промпте. Двигайтесь поэтапно:

Step 1: "Create the base layout with header and sidebar"
Step 2: "Add the project list in the sidebar with a button to create new ones"
Step 3: "Create the Kanban view in the main area"
Step 4: "Add drag & drop between columns"
Step 5: "Implement the modal to create new tasks"
Step 6: "Add toast notifications for user feedback"

Совет: Чем конкретнее и контекстуальнее промпт, тем лучше результат. 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 проанализирует код, найдёт проблему и исправит её.

Рефакторинг с помощью ИИ

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: от кода к миру

Шаг 1: Push на 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=.

Шаг 2: Подключите Vercel

1. Перейдите на vercel.com и нажмите «Add New Project».
2. Импортируйте только что созданный репозиторий GitHub.
3. Добавьте переменные окружения:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Нажмите «Deploy».

Шаг 3: Настройка кастомного домена (необязательно)

Vercel предоставляет бесплатный URL вида my-demo-app.vercel.app. Для кастомного домена:

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

Превью-деплои

Каждый раз, когда вы открываете Pull Request на GitHub, 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. Лучшие практики эффективного вайбкодинга

1. Будьте конкретны в промптах

❌ "Make a nice page"
✅ "Create a landing page with a hero section with a purple-blue gradient,
   a features section with 3 cards with icons, and an orange CTA button"

2. Предоставляйте контекст

❌ "Add authentication"
✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
   Router with TypeScript. I want email/password login and OAuth with GitHub.
   Use the SSR pattern with @supabase/ssr"

3. Итерируйте маленькими шагами

Не пытайтесь построить всё в одном промпте. Двигайтесь постепенно:

1. Базовый макет
2. По одной функции за раз
3. Стилизация и полировка
4. Обработка ошибок
5. Тестирование

4. Проверяйте сгенерированный код

Вайбкодинг не означает, что код читать не нужно. Всегда проверяйте:

• Безопасность: политики 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 проекта, 500 МБ БД)	При превышении лимитов
Vercel	Бесплатный тариф для личных проектов	Для команд или коммерческого использования
GitHub	Бесплатно для публичных и приватных репо	Корпоративные функции

Примечание: Claude Code требует подписки или API-кредитов, но возврат инвестиций в плане скорости разработки экстраординарен. Для демо или MVP общая стоимость составляет около $20.

Бесплатные альтернативы ИИ

Если вы хотите свести расходы к абсолютному нулю, можно использовать:

• Cursor (бесплатный тариф с ограничениями).
• GitHub Copilot (бесплатно для студентов и open source).
• Codeium/Windsurf (щедрый бесплатный тариф).

10. От демо к продукту: следующие шаги

Когда ваше демо запущено, вот как двигаться дальше:

1. Собирайте обратную связь: делитесь демо с потенциальными пользователями и собирайте мнения.
2. Итерируйте быстро: используйте вайбкодинг для реализации запрошенных изменений.
3. Отслеживайте метрики: Vercel Analytics и Supabase Dashboard дают необходимые данные.
4. Масштабируйте по необходимости: переходите на платные планы только после подтверждения спроса.

Заключение

Вайбкодинг с Claude Code, Supabase и Vercel представляет мощную комбинацию для создания демо и MVP в рекордные сроки. То, что раньше занимало недели разработки, теперь можно сделать за несколько часов с удивительно высоким качеством.

Ключ в том, чтобы подходить к вайбкодингу с правильным настроем: речь не о том, чтобы «не уметь программировать», а о том, чтобы усилить свои возможности с помощью инструментов ИИ. Чем больше вы знаете о базовых технологиях (React, SQL, аутентификация, деплой), тем эффективнее будете направлять AI-агента к желаемому результату.

Будущее разработки программного обеспечения уже здесь, и порог входа никогда не был таким низким. Создайте своё демо, проверьте его с реальными пользователями и постройте следующий великий продукт.

Чек-лист для вашего первого демо:

• Claude Code установлен и настроен
• Проект Supabase создан со схемой базы данных
• Проект Next.js инициализирован с shadcn/ui
• Аутентификация настроена
• Полный CRUD реализован
• Современный и адаптивный UI
• Задеплоено на Vercel
• URL для обратной связи готов к распространению