☕️ 5 Технологий для вайбкодинга

Поймал себя на мысли, что большая часть канала - это посты, где простыми словами нетехнарям рассказываются технические вещи. Получается такой своего рода альманах вайбкодера))

Что ж, продолжим эту серию постов на тему «что нужно знать, чтобы вайбкодить».

Сегодня про самый практичный выбор — набор инструментов, в котором модели уверенно пишут код, а вы — уверенно его читаете.

Идея простая: чем популярнее технология, тем больше качественного кода по ней лежит в интернете, тем лучше модель её выучила. И наоборот — как только уходите в экзотику, начинаются выдумки про несуществующие возможности, устаревший синтаксис и «так было в старой версии».

Вот лучший рабочий набор: Next.js, TypeScript, Tailwind, Prisma и Postgres. Пятёрка, которая закрывает весь проект — и то, что видит пользователь в браузере, и серверную часть с базой данных.

Коротко:
— Next.js — фреймворк для веб-приложений. В одном проекте уживаются страницы, которые рендерятся в браузере, и серверная логика, которая отвечает на запросы. Модели знают его наизусть, включая свежие версии с серверными компонентами
— TypeScript — это JavaScript с системой типов. Вы заранее описываете, какие данные где используются, и если модель придумала несуществующее поле или передала число вместо строки — компилятор ругается ещё до запуска. Буквально страховка от выдумок нейросети
— Tailwind — css-библиотека готовых классов для оформления. Вместо отдельных файлов стилей вы пишете прямо в разметке: bg-slate-900, text-center, px-4. Модель такие конструкции составляет стабильно и не воюет с каскадами CSS
— Prisma — это ORM (Object-Relational Mapping, ORM), посредник между кодом и базой данных. Вы описываете таблицы и связи в одном файле schema.prisma, а Prisma генерирует типизированные методы для запросов. Модели работают с ней увереннее, чем с сырым SQL — структура даёт им опору
— Postgres — реляционная база данных с открытым кодом, дефолт индустрии. Поднимается за пару минут на Neon или Supabase, там же бесплатный тариф и готовая строка подключения

Чего избегать, если хочется жизни без мучений:

— Редкие фреймворки и свежие беты — модель либо их не знает, либо путает версии API
— Самописный CSS без дизайн-системы — модель будет ломать отступы в каждом втором изменении
— Нереляционные базы (MongoDB и такие) просто потому что «схема гибче». Если у вас данные со связями — пользователи, их заказы, позиции в заказе — берите Postgres, не плодите сущности
— Внутренние инструменты и «удобные обёртки» своей команды — для модели это чёрный ящик, она будет гадать и выдумывать API

С чего начать (попросите агента сделать всё за вас😉):
— Поставьте Node.js — это среда, в которой всё запускается. Создайте проект одной командой: npx create-next-app@latest с флагами TypeScript и Tailwind
— Заведите Postgres на Neon или Supabase — бесплатный тариф, строка подключения готова через минуту
— Подключите Prisma, опишите модели в schema.prisma, запустите миграцию — таблицы создадутся сами
— Выложите проект в интернет через Vercel: подключаете GitHub, пушите в main, обновление на сайте едет само

Листайте карточки — там всё то же самое, только коротко и по полочкам.

#vibecoding #dev #tips

☕️ Команда, два репо (фронт и бэк), три разных агента: как не утонуть в хаосе

Пытаемся настроить совместную разработку с AI-агентами — для команды, где у каждого свой инструмент: кто на Claude Code, кто на Codex, кто на Cursor. Два репозитория, фронт и бэк. Задача — чтобы агенты хорошо навигировались по коду, писали правильно с первого раза и жгли минимум токенов.

Минимальный джентельменский

— AGENTS.md как единый источник правды. Это «README для агентов», открытый стандарт, который читают Codex, Cursor, Copilot и другие. Claude Code исторически читает CLAUDE.md, но его легко подружить через одну строчку @AGENTS.md. Правило: один файл, всё остальное на него только ссылается. Никаких четырёх копий инструкций, которые неизбежно разойдутся.

— Короткий файл вместо энциклопедии. Раздутый AGENTS.md работает хуже короткого: LLM игнорирует половину, Codex вообще обрезает по лимиту. Держите до 150–200 строк. Архитектуру выносите в docs/ — агент подгрузит, когда понадобится.

— Навигируемая структура. На реальной кодовой базе агент тратит большую часть токенов не на написание кода, а на попытки его понять. Имя файла должно честно говорить, что внутри: booking.repository.ts лучше, чем utils/data.ts. Грамотный context engineering снижает расход токенов в 5–6 раз на одной и той же задаче.

— Contract-first для фронта и бэка. Договоритесь о формате данных до того, как писать код. Контракт API (файл openapi.yaml) — это список: какие запросы есть, какие поля приходят в ответ и какого они типа. Сначала команда фиксирует этот список, и только потом фронт и бэк пишут код — каждый под него. Из контракта автоматически собираются типы (фронт сразу знает структуру ответа), заглушки-моки (фронт работает, пока бэка ещё нет) и тесты, которые проверяют, что код не разошёлся с договорённостью. Бонус для агента: он не сможет обратиться к полю, которого нет в контракте, — среда подсветит ошибку сразу.

— Git worktrees для параллельных агентов. Если запустить двух агентов в одной папке с кодом, они начнут мешать друг другу: один перезаписывает файл, который правит второй, оба одновременно лезут в служебные файлы Git и спотыкаются. Хуже всего, что происходит это без явных ошибок — просто часть работы тихо теряется. Worktree — встроенная в Git штука: одной командой вы даёте каждому агенту отдельную папку и свою ветку. Агенты работают рядом, но не пересекаются, а результаты сводятся вместе уже на этапе мёржа — штатно и под контролем.

С чего начать
— завести AGENTS.md в корне каждого репо — руками, коротко
— связать CLAUDE.md и правила Cursor через симлинк или @-импорт
— вынести контракт API в отдельный репо, запретить править сгенерированный код
— для параллельной работы — worktrees, изолировать БД и порты

И принцип, который держит всё живым:

Каждая ошибка, которую агент совершил дважды, должна превратиться в строчку AGENTS.md или в проверку в CI.

Эффективная разработка с агентами — это не «умные промпты», а инфраструктура. Агентам нужна та же дисциплина, что и людям: единый источник правды, чёткие контракты, изоляция параллельной работы. Разница в том, что агенты создают хаос быстрее — и цена отсутствия процесса выше.


#agents #claude #vibecoding #tips