Библиотека

Твой набор инструментов Vibe Coding. Гайды, промпты и советы для каждого инструмента в стеке.

▲

Начни с v0.dev — самый простой способ

Генерируй UI на естественном языке. Идеально для быстрого старта.

Открыть v0.dev

▲

v0.dev

AI-генерация UI. Проектируй и итерируй компоненты на естественном языке.

◐

Cursor IDE

AI-нативная IDE. Форк VS Code с встроенным агентом для вайб-кодинга.

◈

Claude Code

AI-ассистент для кодинга от Anthropic. Вдумчивая, тщательная генерация кода.

⚡

Supabase

Open source альтернатива Firebase. Мгновенные API, аутентификация и realtime.

▲

Vercel

Мгновенный деплой. Платформа для фронтенд-разработчиков.

⬡

GitHub

Хостинг кода и коллаборация. Контроль версий для твоих проектов.

Типичные ошибки новичков

Что ломает вайб-кодинг и как этого избежать

Размытое намерение

✗«Сделай мне классное приложение для задач»

✓Используй CRTC: Context → Role → Task → Constraints

Чёткий промпт = чёткий результат. AI угадывает то, что ты не сказал.

Смешивание Plan и Act Mode

✗«Продумай архитектуру и сразу реализуй всё»

✓Сначала план без кода, потом реализация по шагам

Разделяй мышление и действие. Один режим за раз.

Неатомарные задачи

✗«Сделай весь бэкенд»

✓Один промпт = одна фича / один модуль

Большие задачи → много скрытых допущений → хаос.

Слепое Accept All

✗Принимать весь код без ревью

✓Генерация = вайб, полировка = normal режим

AI — быстрый джун. Пишет много, требует жёсткого ревью.

Отравление контекста

✗Подсовывать модели весь код проекта

✓Только релевантные файлы, чистый контекст

Грязный контекст → грязный результат. Чисти перед генерацией.

AI Slop в дизайне

✗Inter/Roboto + фиолетовый градиент

✓Осмысленная палитра, типографика, вайб

Создай CONTEXT.md с дизайн-токенами и ссылайся на него.

Hackathon Patterns

Проверенные паттерны для победы на вайб-хакатонах

Persona Injection

#prompting

Задай AI конкретную роль эксперта для получения более качественных ответов.

Как применить:

→Начни промпт с 'Ты — senior разработчик с 10 годами опыта...'
→Укажи специализацию: 'эксперт по React и TypeScript'
→Добавь контекст: 'работающий над хакатон-проектом'

Пример:

Ты — senior full-stack разработчик, специализирующийся на Next.js и Supabase. Помоги мне спроектировать схему БД для трекера привычек.

Weaponized Hallucination

#creativity

Используй склонность AI к 'галлюцинациям' для генерации креативных идей.

Как применить:

→Попроси AI придумать несуществующие, но правдоподобные решения
→Используй для брейншторма и генерации идей
→Валидируй результаты перед реализацией

Пример:

Придумай 5 инновационных способов геймификации приложения для медитации, которых ещё не существует на рынке.

Context Stacking

#architecture

Накапливай контекст через серию промптов для сложных задач.

Как применить:

→Разбей большую задачу на этапы
→Каждый следующий промпт ссылается на предыдущий результат
→Сохраняй ключевые решения в отдельном файле

Пример:

Сначала: 'Спроектируй архитектуру'. Затем: 'На основе этой архитектуры создай схему БД'. Далее: 'Реализуй API для этой схемы'.

Demo-First Development

#strategy

Начни с того, что покажешь на демо, и работай назад.

Как применить:

→Запиши 60-секундный скрипт демо
→Определи 3 'вау-момента' для жюри
→Реализуй только то, что видно на демо

Пример:

Демо: 1) Показать проблему (10с), 2) Ввести данные (15с), 3) Получить AI-результат (20с), 4) Поделиться (15с).

Constraint-Driven Design

#prompting

Добавляй ограничения в промпты для более точных результатов.

Как применить:

→Укажи технологический стек явно
→Ограничь объём: 'максимум 50 строк кода'
→Запрети нежелательное: 'без внешних зависимостей'

Пример:

Создай компонент формы. Ограничения: React + TypeScript, shadcn/ui, без внешних библиотек валидации, максимум 40 строк.

Iterative Refinement

#workflow

Улучшай результат через серию коротких итераций.

Как применить:

→Получи первую версию быстро
→Попроси конкретные улучшения: 'добавь анимацию', 'улучши типы'
→Не пытайся получить идеал с первого раза

Пример:

v1: 'Создай кнопку'. v2: 'Добавь hover эффект'. v3: 'Сделай её доступной'. v4: 'Добавь loading state'.