spinny:~/writing $ vim create-demo-claude-code-vibecoding.md
1~2**Вайбкодинг** - это новая парадигма разработки программного обеспечения, где программист направляет AI-агента через инструкции на естественном языке, позволяя искусственному интеллекту писать реальный код. Термин был придуман Андреем Карпати (сооснователем OpenAI и бывшим директором по ИИ в Tesla) в знаменитом твите от февраля 2025 года: _«Появился новый вид программирования, который я называю вайбкодинг, где вы полностью отдаётесь вайбу, принимаете экспоненциальный рост и забываете, что код вообще существует.»_3~4В этой статье мы рассмотрим, как создать полноценное работающее демо с помощью **Claude Code** в качестве AI-агента, **Supabase** в качестве бэкенда (база данных, аутентификация, API) и **Vercel** для деплоя - используя исключительно **бесплатные тарифы** этих сервисов.5~6## 1. Что такое вайбкодинг и почему он революционен7~8Вайбкодинг представляет фундаментальный сдвиг парадигмы в разработке ПО. Вместо написания кода строка за строкой разработчик:9~101. **Описывает** желаемое на естественном языке.112. **AI-агент** генерирует полный код.123. **Разработчик** проверяет, тестирует и итерирует.13~14### Почему это работает15~16- **Скорость**: проект, на который ушли бы дни, можно создать за часы.17- **Доступность**: даже неопытные разработчики могут создавать работающие продукты.18- **Быстрая итерация**: можно тестировать идеи и менять направление гораздо быстрее.19- **Фокус на продукте**: вы концентрируетесь на _что_ вместо _как_.20~21```mermaid22flowchart LR23 A[Idea] --> B[Natural language prompt]24 B --> C[Claude Code generates code]25 C --> D[Review and test]26 D --> E[Iteration]27 E --> B28 D --> F[Deploy to Vercel]29```30~31### Когда использовать вайбкодинг32~33Вайбкодинг идеально подходит для:34~35- **Демо и MVP**: быстрое создание прототипа для валидации идеи.36- **Хакатонов**: создание работающего продукта всего за несколько часов.37- **Пет-проектов**: изучение новых технологий без вложения недель.38- **Proof of Concept**: демонстрация технической осуществимости заинтересованным сторонам или инвесторам.39~40> **Предупреждение:** Вайбкодинг отлично подходит для демо и прототипов. Для приложений производственного уровня с высокими требованиями к безопасности и масштабируемости тщательная проверка сгенерированного кода по-прежнему необходима.41~42## 2. Технологический стек: Claude Code + Supabase + Vercel43~44### Claude Code45~46Claude Code - это AI-агент для кодирования от Anthropic. Он работает прямо в вашем терминале и может:47~48- Читать и понимать всю кодовую базу.49- Создавать, изменять и удалять файлы.50- Выполнять команды терминала.51- Взаимодействовать с API и внешними сервисами.52- Управлять версионированием с Git.53- Автономно итерировать над ошибками и багами.54~55```bash56# Install Claude Code57npm install -g @anthropic-ai/claude-code58~59# Start in a project directory60cd my-project61claude62```63~64### Supabase (бесплатный тариф)65~66Supabase - это альтернатива Firebase с открытым исходным кодом, которая предлагает:67~68- **База данных PostgreSQL**: полноценная реляционная база данных.69- **Аутентификация**: вход через email, Google, GitHub и т.д.70- **REST и Realtime API**: автоматически генерируются из вашей схемы.71- **Хранилище**: для файлов и изображений.72- **Edge Functions**: серверлесс-функции.73~74Бесплатный тариф включает:75~76| Ресурс | Бесплатный лимит |77|----------|-----------|78| База данных | 500 МБ |79| Хранилище | 1 ГБ |80| Пропускная способность | 5 ГБ |81| Вызовы Edge Function | 500K/месяц |82| Аутентифицированные пользователи | Безлимитно |83| Проекты | 2 активных проекта |84~85### Vercel (бесплатный тариф)86~87Vercel - идеальная платформа для деплоя приложений Next.js:88~89- **Автоматический деплой** из GitHub.90- **Превью-деплои** для каждой ветки и PR.91- **Глобальный CDN** для оптимальной производительности.92- **Serverless Functions** включены.93- **Базовая аналитика** бесплатно.94~95Бесплатный тариф включает:96~97| Ресурс | Бесплатный лимит |98|----------|-----------|99| Пропускная способность | 100 ГБ/месяц |100| Выполнение Serverless Function | 100 ГБ-часов/месяц |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### Шаг 1: Создайте проект119~120Откройте терминал и запустите Claude Code:121~122```bash123mkdir my-demo-app && cd my-demo-app124claude125```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```bash137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir138npx shadcn@latest init139git init && git add . && git commit -m "Initial commit"140```141~142### Шаг 2: Настройте Supabase143~1441. Перейдите на [supabase.com](https://supabase.com) и создайте новый проект.1452. Запишите **URL проекта** и **anon key** из Settings > API.1463. Вернитесь в терминал с Claude Code:147~148```149You: Add Supabase to the project. Create a .env.local file with the variables150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the151Supabase client with SSR support for Next.js App Router.152```153~154Claude Code создаст полную конфигурацию:155~156```typescript157// src/lib/supabase/client.ts158import { 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```typescript169// src/lib/supabase/server.ts170import { 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### Определение схемы базы данных200~201Дайте Claude Code инструкции для создания схемы: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_at2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK209 to profiles), created_at2103. 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_at214~215Enable Row Level Security on all tables and create appropriate policies.216```217~218Claude Code сгенерирует полную миграцию:219~220```sql221-- Create enum types222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');224~225-- Profiles table226CREATE 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 table234CREATE 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 table243CREATE 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 RLS257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;260~261-- Profiles policies262CREATE 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 policies268CREATE 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 policies278CREATE 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 Editor) или через CLI.297~298### Генерация типов TypeScript299~300```301You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts302```303~304```bash305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts306```307~308### Создание пользовательского интерфейса309~310Теперь наступает самая мощная часть вайбкодинга. Дайте Claude Code инструкции высокого уровня:311~312```313You: Create a dashboard page for the task management app with:314~3151. Sidebar with navigation between projects3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop3173. Modal to create/edit tasks3184. Header with user avatar and logout3195. Modern design with shadcn/ui and Tailwind320~321Use data from Supabase with React Server Components where possible322and 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 login3332. Registration page3343. Middleware to protect authenticated routes3354. Automatic redirect for unauthenticated users3365. Automatic profile creation after registration337```338~339Claude Code настроит middleware Next.js и страницы аутентификации:340~341```typescript342// src/middleware.ts343import { 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. Продвинутые паттерны вайбкодинга387~388### Итеративный промптинг389~390Секрет эффективного вайбкодинга - **итерация**. Не пытайтесь описать всё в одном промпте. Двигайтесь поэтапно:391~392```393Step 1: "Create the base layout with header and sidebar"394Step 2: "Add the project list in the sidebar with a button to create new ones"395Step 3: "Create the Kanban view in the main area"396Step 4: "Add drag & drop between columns"397Step 5: "Implement the modal to create new tasks"398Step 6: "Add toast notifications for user feedback"399```400~401> **Совет:** Чем конкретнее и контекстуальнее промпт, тем лучше результат. Claude Code имеет доступ ко всей кодовой базе, поэтому может согласованно интегрировать новые функции.402~403### Обработка ошибок404~405Когда что-то не работает (а это случится), вы можете просто сказать:406~407```408You: I'm getting this error in the console: "TypeError: Cannot read property409'map' of undefined" in the TaskList component. Fix it.410```411~412Claude Code проанализирует код, найдёт проблему и исправит её.413~414### Рефакторинг с помощью ИИ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 for425the authentication and task creation flow.426```427~428## 6. Деплой на Vercel: от кода к миру429~430### Шаг 1: Push на GitHub431~432```433You: Create an appropriate .gitignore, commit everything, and push to a new434GitHub repository called "my-demo-app".435```436~437```bash438git add .439git commit -m "feat: complete task management demo"440gh repo create my-demo-app --public --push --source=.441```442~443### Шаг 2: Подключите Vercel444~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```mermaid453flowchart LR454 A[GitHub Push] --> B[Vercel Build]455 B --> C[Automatic Deploy]456 C --> D[Public URL]457 D --> E[Global CDN]458```459~460### Шаг 3: Настройка кастомного домена (необязательно)461~462Vercel предоставляет бесплатный URL вида `my-demo-app.vercel.app`. Для кастомного домена:463~464```465You: Add the configuration for a custom domain in vercel.json466```467~468### Превью-деплои469~470Каждый раз, когда вы открываете Pull Request на GitHub, Vercel автоматически создаёт **превью-деплой** с уникальным URL. Идеально для демонстрации изменений перед мержем.471~472## 7. Оптимизации для вашего демо473~474### Производительность475~476```477You: Optimize the app's performance:4781. Add loading states with Suspense and skeletons4792. Implement caching with Next.js unstable_cache4803. Optimize images with next/image4814. Add SEO metadata for each page482```483~484### Реалтайм с Supabase485~486Функция, которая всегда впечатляет в демо - это **реалтайм**:487~488```489You: Add realtime synchronization for tasks using Supabase Realtime.490When a user updates a task, all other users should see the change491in real time without refreshing.492```493~494```typescript495'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 = supabase507 .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) : t523 )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. Лучшие практики эффективного вайбкодинга551~552### 1. Будьте конкретны в промптах553~554```555❌ "Make a nice page"556✅ "Create a landing page with a hero section with a purple-blue gradient,557 a features section with 3 cards with icons, and an orange CTA button"558```559~560### 2. Предоставляйте контекст561~562```563❌ "Add authentication"564✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App565 Router with TypeScript. I want email/password login and OAuth with GitHub.566 Use the SSR pattern with @supabase/ssr"567```568~569### 3. Итерируйте маленькими шагами570~571Не пытайтесь построить всё в одном промпте. Двигайтесь постепенно:572~5731. Базовый макет5742. По одной функции за раз5753. Стилизация и полировка5764. Обработка ошибок5775. Тестирование578~579### 4. Проверяйте сгенерированный код580~581Вайбкодинг не означает, что код читать не нужно. Всегда проверяйте: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 проекта, 500 МБ БД) | При превышении лимитов |603| **Vercel** | Бесплатный тариф для личных проектов | Для команд или коммерческого использования |604| **GitHub** | Бесплатно для публичных и приватных репо | Корпоративные функции |605~606> **Примечание:** Claude Code требует подписки или API-кредитов, но возврат инвестиций в плане скорости разработки экстраординарен. Для демо или MVP общая стоимость составляет около $20.607~608### Бесплатные альтернативы ИИ609~610Если вы хотите свести расходы к абсолютному нулю, можно использовать:611~612- **Cursor** (бесплатный тариф с ограничениями).613- **GitHub Copilot** (бесплатно для студентов и open source).614- **Codeium/Windsurf** (щедрый бесплатный тариф).615~616## 10. От демо к продукту: следующие шаги617~618Когда ваше демо запущено, вот как двигаться дальше:619~620```mermaid621flowchart TD622 A[Live Demo] --> B{User Feedback}623 B --> C[Product Iteration]624 C --> D[Product-Market Fit]625 D --> E[Scaling]626 E --> F[Supabase Pro Plan]627 E --> G[Vercel Pro Plan]628 E --> H[Custom Domain]629```630~6311. **Собирайте обратную связь**: делитесь демо с потенциальными пользователями и собирайте мнения.6322. **Итерируйте быстро**: используйте вайбкодинг для реализации запрошенных изменений.6333. **Отслеживайте метрики**: Vercel Analytics и Supabase Dashboard дают необходимые данные.6344. **Масштабируйте по необходимости**: переходите на платные планы только после подтверждения спроса.635~636~637## Заключение638~639Вайбкодинг с Claude Code, Supabase и Vercel представляет мощную комбинацию для создания демо и MVP в рекордные сроки. То, что раньше занимало недели разработки, теперь можно сделать за несколько часов с удивительно высоким качеством.640~641Ключ в том, чтобы подходить к вайбкодингу с правильным настроем: речь не о том, чтобы «не уметь программировать», а о том, чтобы **усилить свои возможности** с помощью инструментов ИИ. Чем больше вы знаете о базовых технологиях (React, SQL, аутентификация, деплой), тем эффективнее будете направлять AI-агента к желаемому результату.642~643Будущее разработки программного обеспечения уже здесь, и порог входа никогда не был таким низким. Создайте своё демо, проверьте его с реальными пользователями и постройте следующий великий продукт.644~645> **Чек-лист для вашего первого демо:**646>647> - [x] Claude Code установлен и настроен648> - [x] Проект Supabase создан со схемой базы данных649> - [x] Проект Next.js инициализирован с shadcn/ui650> - [x] Аутентификация настроена651> - [x] Полный CRUD реализован652> - [x] Современный и адаптивный UI653> - [x] Задеплоено на Vercel654> - [x] URL для обратной связи готов к распространению655~
NORMAL · create-demo-claude-code-vibecoding.md [readonly]655 lines · :q to close