Код на вайбах

Сегодня OpenAI запустила Frontier - платформу, где компании могут создавать, деплоить и менеджить AI-агентов. Не ботов. Не ассистентов. Именно «AI coworkers» - так написано в официальном блоге.

Посмотрел, почитал и выглядит интересным. У каждого агента будет своя идеентичность, разрешения, компетенции и т.д. Прям как у настоящего работника, обещает OpenAI.

По сути, OpenAI строит операционную систему для enterprise, куда втыкаются любые AI-агенты. Единый контекст бизнеса, единый execution environment, единая система оценки и оптимизации.

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

• Introducing OpenAI Frontier
• OpenAI Frontier

400 часов вайбкодинга: инструменты, ошибки, деплой за $5

https://www.youtube.com/watch?v=lRGxl6uA72g

В первой части я объяснил, что такое вайбкодинг. Теперь покажу, как я реально работаю: мой стек, мои инструменты, мои ошибки. Всё из Telegram Mini App, который я собирал 400 часов в Claude Code.

Что внутри:
— Мой стек и почему именно он. Объясняю каждый выбор простым языком.
— Дизайн-система и готовые блоки. 5 модулей = 70% любого проекта готово. Собрал один раз - использую в каждом новом проекте.
— Тестирование с AI. Пирамида: unit, integration, e2e. AI генерирует 10 тестов за секунды. Час на тесты = 10 часов сэкономленного дебага.
— MCP-плагины: Serena, Context7, Sentry, Playwright. Мой конфиг + как подключить.
— Skills - модули знаний для Claude: superpowers, blader. Как создать свой skill. Мои грабли и советы.
— Railway - деплой за $5/мес. 650+ темплейтов, логи, работа с окружениями и домен с БД из коробки.
— Реальность vs Ожидания. Сколько времени реально нужно. Почему вайбкодер, который не понимает код - потратит неделю там, где опытный починит за час.

Каждый инструмент объяснён так, чтобы понял человек без опыта. Аналогии, сравнения, конкретные шаги. Без воды.

Смотри до конца, чтобы понять где и как LLM тебя обманывает и пишет код с багами. 🫢

P.S. Презентация из видео в первом комментарии

Привет, сегодня в 18:15 на Youtube будет прямая трансляция - особенно подойдет под вопросы и уточнения по материалу трансляции.

Если-что запись и всё всё будет самособой. На скриншоте кусочек из презентации, по которой сегодня будем идти, буду ждать и до встречи! :)

Моя кухня вайбкодера: 400 часов опыта | MCP, Skills, AI-команда

Первое видео было "что такое вайбкодинг". Это - "как я его готовлю". После 400 часов в Claude Code у меня сформировался сетап, но не тот, что в красивых демках, а тот, что реально работает.

Про стек:
• Почему Zustand, а не Redux. Почему эти технологии. Не потому что модно - потому что AI с ними дружит лучше.

Про переиспользуемость
• Что тащить из проекта в проект. Компоненты, хуки, конфиги. Один раз сделал - везде работает.

Про тесты
• Claude любит "улучшать" код. Без тестов это русская рулетка. С тестами - спокойный сон.

Про MCP-плагины
• Моя шестёрка: Serena, Playwright, Context7, Sentry, Brave Search, Supabase. Что делает каждый и для чего мне они?

Про "день сурка"
• Каждый чат - Claude забывает кто ты. Надоело писать "веди себя как X разработчик". Projects, CLAUDE.md, Subagents - как настроить один раз и забыть.

Про Skills
• Папка, которую Claude читает до ответа. Мало кто знает. Меняет всё.

Кому смотреть:
1. Уже пробовал AI для кода, хочешь глубже
2. Слышал про MCP, но не понимаешь зачем
3. Устал копипастить одни и те же промпты
4. Хочешь понять как выглядит "прокачанный" вайбкодинг

🗓️ Когда: 4 февраля в 18:15 по МСК
⏳ Продолжительность: Порядка 70 минут
📍 Где: Youtube
🔋 Запись будет

Стек, который AI понимает с полуслова

Опыт в программировании научил меня одному, половина успеха проекта - правильный стек. Не модный. Не хайповый. А для наших нужд тот, на котором AI обучен лучше всего.

Если слово "стек" пока не знакомое - не страшно. Это просто набор инструментов, которыми ты собираешь проект.

Как конструктор: база данных + сервер + интерфейс + всякое между ними. Запомни слово и спроси у Claude "что такое технический стек и зачем он нужен" - он объяснит под твой уровень.

1. React 18 - №1 по популярности. Claude и GPT видели миллионы примеров. Я просто пишу "сделай компонент карточки" и получаю рабочий код, а не франкенштейна.

2. TypeScript - AI видит типы и меньше галлюцинирует. Лично у меня показал себя лучше аналогов, т.к. П1 - много примеров.

3. Vite - Hot Module Replacement. Написал промпт, получил код, увидел результат. Быстрый фидбек-луп = быстрый вайбкодинг.

4. Tailwind - стили прямо в разметке. AI не надо прыгать между файлами. Один контекст = меньше ошибок. Настоящее сокровище и лучше, чем просто CSS.

5. Zustand - 10 строк стейт-менеджмента против 50 на Redux. Меньше бойлерплейта = меньше места для багов AI.

6. Framer Motion - декларативные анимации. Описываешь что хочешь, а не как. Идеально для промптов.

7. NestJS - структура из коробки. AI любит паттерны, аут их много и они консистентные.

8. Prisma - type-safe ORM. Схема как единый источник правды. AI точно знает, какие поля есть, чтобы не было галлюцинаций и лишних полей.

9. PostgreSQL - классика. Документации море, примеров море, мой AI справляется отлично.

10. Railway - git push и в проде, деплой не должен быть дл тебя отдельным квестом. Плачу в месяц по 5$ из-под капота логи, быстрое подключение любых шаблонов: от БД до админок.

Чем больше примеров видел AI, тем лучше код. Чем строже типы, тем меньше галлюцинаций. Чем декларативнее синтаксис, тем проще объяснить промптом.

У кого-то совпал стек со мной? 🤔

4 месяца работы, 400+ юзеров и ноль крашей. Но сегодня открываю комментарий на YouTube - и бац, комментарий про краш...

И что самое обидное - это был старый рефакторинг. Как оказалось из логов, моя система онбординга имела одну ахиллесову пяту, которая ждала своего часа. И дождалась :D

Краш в приложении - это не просто красный экран. Это слетевшие сохранения. Товары в корзине, которых больше нет. Пользователь, который может не вернуться.

У нас в разработке чёрным по белому документация всегда говорит:"Краш для пользователей - это самый негативный опыт. Не допускайте этого".

Спасибо этой ситуации, для себя я урок вынес - тесты на этот функционал написал за 10 минут. Больше краша не будет.

Можно улучшать разработческий процесс и чтобы самому не забыть - прописать за правило для работяжки покрывать тестами.

Хотел бы поделиться опытом, как минимизировать краши:
• Тесты - не паранойя, а гигиена. Можно не гонять всё подряд. Попроси Claude сделать умную систему: перед пушем - только задетый функционал, по ночам - полный прогон. Экономит время, ловит баги.
• Критичные фичи - на отдельной ветке. Пока не убедился, что всё ок - юзеры этого не видят.
• Большой функционал раскатывай постепенно. Выкатил - смотришь метрики. Всё чисто - катишь дальше.

——

Если для вас критично отсутствие критичных багов и крашей - лучше пишите тесты, гоняйте их - чтобы не терять пользователей :)

Пилю фичу неделю. Уверен, что будет круто. Показываю девушке - "ну прикольно". Начинаю выкатывать в про - ноль реакции.

А что не так? [pepe-thinking-face.jpg]

А не так то, что фидбек "прикольно" - это не фидбек. Это вежливость. Близкие люди склонны относиться к нам лояльно.

Но мне нужен кто-то, кто скажет: "Слушай, а вот тут я вообще не понял, куда тыкать".

Если раньше я звал друзей-разработчиков. Но у них свои проекты, свои дедлайны. Просить неудобно, а ждать долго.

Поэтому я собрал команду из клод работяг. Их у меня много, но я хочу остановиться на трёх AI-ролях пользователей. Они смотрят на каждую фичу с разных сторон

1. Скептик.

Его работа - сомневаться. "А кому это надо?", "А почему юзер будет этим пользоваться?", "А что если он просто закроет приложение?".

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

2. Новичок.

Ничего не знает про тематику мини апы, про ЯП, про моё приложение. Тыкает куда не надо. Не читает подсказки. Спрашивает очевидное. Как по мне - это идеальный краш-тест на UX - если новичок разобрался, разберётся любой.

3. Фанат

Любит продукт. Готов терпеть баги. Но даже он иногда говорит: "Вот тут бесит". И это самый ценный фидбек - если даже лояльный юзер морщится, значит проблема реальная.

Вот пример. Делаю табу прогресса [cм. скриншот] - там статистика, метрики, уровни мастерства и сравнения с другими пользователями.

Решил, что хочу узнать, а точно ли уровень мастерства вообще нужен? Какую цель он преследует?

Прогнал через скептика, а от него первый вопрос:"Зачем юзеру знать свой уровень мастерства, если он не понимает, как этот уровень считается?".

И понимаю, что ведь он прав. Необходимо добавить нужный функционал.

Эту штуку с ролями я подсмотрел в СММ ещё в 2015 году. Там есть практика - прописывать портреты клиентов.

Не абстрактных "пользователей", а конкретных людей. С возрастом, привычками, страхами. Иногда даже с именами и фотками.

Возможно звучит как перебор? Может быть, но когда ты спрашиваешь "А зайдёт ли фича?" - одно дело гадать, другое - спросить у "Васи, 28 лет, джун, учит Swift по вечерам после работы".

Я просто перенёс этот подход в свой вайбкодинг. Прописал каждую роль детально: кто он, как думает, что его бесит, чего хочет. Скриншоты промптов - на картинках.

Если-что это не серебряная пуля. Иногда роли несут херню. Но чаще - они ловят косяки, которые я сам не вижу. Потому что я слишком близко к продукту. А они - нет.

Попробуй собрать свою команду. Не обязательно три роли - может хватит одной. Не обязательно для всего приложения - можно для одного экрана или флоу.

В комментарии залью скриншоты, сорри, забыл к посту прикрепить…
—-

Прикрепил для общего понимания, энивей LLM'ка поможет с реализацией. Завтра распишу про свой стек, спасибо за внимание! [pepe-happy.jpg]

Целевая Аудитория 🎯| Как составить портрет ВАШЕГО клиента?

Channel created