21 июля 2026 · 26 мин чтения · / AI-стек

AI Product Stack 2026

Как выбрать AI-чаты, coding-агентов, IDE, модели, браузерные инструменты и визуальные сервисы без хаоса в подписках.

Егор Андриенко
продакт · собирает продукты в одного

Как одному человеку собирать продукты с нейросетями и не утонуть в подписках, скиллах и очередном фиолетовом лендинге

Что ты получишь из этой лекции

Сейчас вокруг AI-разработки образовался натуральный рынок шумовых гранат.

Один человек говорит, что Codex уже заменил целый отдел. Второй доказывает, что Claude Code думает в восемь раз глубже. Третий открывает Antigravity, запускает пять агентов и через двадцать минут показывает сайт, где не работает половина кнопок. Потом появляется ещё десять скиллов, семь MCP и «революционная дизайн-система», которую никто не проверял на мобильном.

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

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

В этой лекции разберём:

Главная мысль простая:

Не существует одной лучшей нейронки для всего. Рабочий результат даёт небольшой стек, где у каждого инструмента есть понятная работа.


1. Сначала разделим AI-чаты и coding-агентов

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

AI-чат

ChatGPT, Claude или Gemini помогают:

Чат отлично помогает понять, что именно нужно сделать.

Но если строить проект только через переписку, через несколько итераций начинается цирк:

  1. чат написал кусок кода;
  2. ты вручную вставил его в файл;
  3. потом поменял что-то сам;
  4. чат об этом не знает;
  5. следующий ответ основан уже на несуществующей версии проекта;
  6. никто не понимает, почему всё опять сломалось.

Coding-агент

Codex, Claude Code и Antigravity работают уже внутри проекта.

Они могут:

Поэтому нормальная связка выглядит так:

идея

обсуждение и ресёрч в AI-чате

короткое понятное ТЗ

работа coding-агента внутри проекта

проверка результата

Не надо просить coding-агента «придумать мне бизнес и сразу его построить». Сначала снижаем неопределённость, потом открываем репозиторий.


2. OpenAI: ChatGPT и Codex

ChatGPT — место, где задача становится понятной

Представим, что мы хотим сделать премиальную Telegram Mini App для игры в нарды.

Плохой старт:

Сделай мне красивые нарды в Telegram.

Это не задача. Это мысль, причём довольно сырая.

Нормальный старт — сначала разобрать:

После такого разговора появляется документ, с которым можно работать.

ChatGPT здесь для меня — ресёрч, структура, вопросы, декомпозиция и подготовка материалов. Не станок, куда я бросаю одно предложение и жду готовый стартап.

Codex — основной рабочий агент OpenAI

Codex доступен через приложение, IDE, CLI и web. Он работает с проектом, файлами, терминалом и проверками. Главное отличие от обычного чата — агент видит не отдельный вставленный фрагмент, а актуальную кодовую базу.

Пример нормальной задачи:

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

Здесь есть:

А вот запрос:

Сделай всю Mini App целиком и не останавливайся, пока она не станет идеальной.

— это хороший способ дорого наблюдать, как агент уверенно строит не ту хрень.

Сколько стоит Codex

На момент проверки у OpenAI есть:

Все Pro-уровни включают Codex, но отличаются доступным объёмом использования. После включённых лимитов подходящие пользователи Plus и Pro могут докупать credits.

С апреля 2026 года Codex считает расход по токенам: учитывается входной контекст, кэшированный контекст и ответ модели. Поэтому две внешне похожие задачи могут стоить совершенно по-разному. OpenAI приводит ориентир примерно $100–200 в месяц на разработчика в среднем, но подчёркивает большой разброс в зависимости от моделей, количества параллельных задач, автоматизаций и fast mode.

Официальные источники:

Что в Codex реально полезно

Работа маленькими шагами

Сначала агент изучает проект и предлагает план. Затем выполняет одну понятную часть. После неё ты проверяешь результат и только потом продолжаешь.

Так проще поймать момент, когда он свернул не туда.

Постоянные инструкции

Через AGENTS.md можно закрепить:

Это не замена документации. Это короткие правила, которые агент должен учитывать постоянно.

Skills и внешние инструменты

Codex можно усиливать повторяемыми процессами и подключениями: Figma, browser testing, review, security, работа с данными и другие сценарии.

Где Codex начинает бесить

Он может решить, что знает задачу лучше тебя.

Ты попросил поправить форму. Он заодно:

А потом ты открываешь страницу, и кнопка не нажимается.

Поэтому полезная установка выглядит не как «будь лучшим разработчиком мира», а так:

Сначала изучи. Не меняй лишнее. Предложи план. Выполни один шаг. Проверь результат конкретной командой.

Мой вывод

Сейчас Codex — мой основной coding-агент.

Не потому, что существует священная таблица, где он навсегда занял первое место. Просто на моих последних задачах его workflow и результаты оказались удобнее.


3. Anthropic: Claude и Claude Code

Claude — документы, тексты и второй взгляд

Обычный Claude я использую там, где нужна длинная связная работа с информацией:

Он полезен не как второй агент, который одновременно с Codex переписывает тот же проект. Он полезен как отдельная голова с другой задачей.

Например:

Одна задача — один главный исполнитель. Иначе один агент уже поменял архитектуру, а второй продолжает жить в прошлой версии проекта.

Claude Code

Claude Code — полноценный coding-агент Anthropic. Он работает через Desktop, CLI, IDE и web, понимает репозиторий, запускает команды и поддерживает развитый слой расширений.

У него есть:

Anthropic прямо разделяет эти сущности:

Официальные источники:

Сколько стоит Claude

На момент проверки:

Pro подходит для регулярного использования и знакомства с Claude Code. Max рассчитан на более частую и тяжёлую работу. Точное число задач заранее обещать бессмысленно: расход зависит от модели, длины сессии и размера проекта.

Источник: Choose a Claude plan

Сильная сторона Claude Code — зрелая система расширений

В официальном marketplace уже можно находить плагины под:

Плагин может содержать skills, agents, hooks, MCP servers и другие компоненты. Это уже похоже не на папку с десятью случайными промтами, а на нормальную систему распространения workflows.

Где Claude Code подходит особенно хорошо

Мой вывод

Раньше Claude Code был моим основным инструментом. Сейчас я чаще работаю через Codex.

Но Claude Code не стал от этого «плохой нейронкой». Это полноценный конкурент с сильной экосистемой. Просто не надо одновременно отдавать обоим один и тот же кусок проекта и ждать, что они телепатически синхронизируются.


4. Google: Antigravity и Gemini

Antigravity — не ещё один чат в редакторе

Google позиционирует Antigravity как agent-first development platform.

Внутри два главных режима:

Editor View

Обычная IDE, где ты работаешь руками, используешь inline-команды и автодополнение.

Manager Surface

Поверхность, где можно раздавать задачи агентам, следить за долгими процессами и получать результат не в виде километрового лога, а через Artifacts:

Агенты могут работать через редактор, терминал и браузер. Это сильная идея: агент не только написал код, но и открыл страницу, прошёл сценарий и оставил доказательства.

Источник: Google Antigravity — официальный анонс

Цена и лимиты

Antigravity использует двухуровневую модель:

  1. базовая квота зависит от Google AI-плана;
  2. после её исчерпания пользователи Google AI Pro и Ultra могут докупать AI credits.

У Google AI Ultra есть уровни с квотой примерно 5x или 20x относительно Google AI Pro. Credits списываются в зависимости от модели и сложности запроса.

Важные ограничения:

Источники:

Gemini — это другая категория

Gemini не нужно ставить четвёртой колонкой рядом с Codex, Claude Code и Antigravity.

Gemini — модель и общая AI-экосистема Google. Она полезна для:

Правильное сравнение:

ChatGPT ↔ Claude ↔ Gemini
Codex ↔ Claude Code ↔ Antigravity

Мой вывод по Google

Antigravity выглядит очень интересно именно как система управления агентами. Но «самый новый» не означает «самый стабильный».

Я бы не покупал Ultra только потому, что в презентации красиво летают пять агентов. Сначала нужно прогнать один реальный проект и посмотреть:


5. Что выбрать

Объективного победителя на все случаи жизни нет.

Результат зависит от:

Простой выбор:

Бери Codex, если

Бери Claude Code, если

Тестируй Antigravity, если

Чего не делать

Не покупай сразу:

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


6. Почему AI постоянно делает одинаковый дизайн

Ты пишешь:

Сделай современно, минималистично и премиально.

И получаешь:

Это не заговор.

Модель выбирает наиболее безопасные и часто встречающиеся паттерны. Если у неё нет нормального визуального направления, она усредняет всё, что видела.

Поэтому дизайн улучшается не после двадцатой фразы «сделай ещё премиальнее», а после появления:


7. Claude Design, Stitch и Figma

Claude Design

Claude Design — продукт Anthropic Labs для создания дизайнов, прототипов, презентаций, one-pagers и других визуальных материалов. На момент проверки он находится в research preview и доступен пользователям Pro, Max, Team и Enterprise.

В него можно передавать не только текстовую команду. Сильнее он работает, когда получает:

Его главная роль — быстро исследовать направления.

Не надо воспринимать первый результат как финальный макет. Это способ увидеть несколько вариантов и выбрать, куда двигаться дальше.

Источник: Introducing Claude Design

Google Stitch

Stitch помогает генерировать UI, развивать несколько направлений и сохранять дизайн-правила через DESIGN.md.

Google открыл draft-спецификацию DESIGN.md, чтобы правила можно было переносить между проектами и инструментами. В таком файле агент видит не просто hex-коды, а назначение цветов, токенов и компонентов.

Источник: DESIGN.md в Stitch

Для меня Stitch полезен, когда нужно:

Figma

Figma остаётся местом, где визуальное направление превращается в систему.

В ней нормально фиксируются:

Figma MCP

Через официальный MCP Codex, Claude Code и другие клиенты получают структурированный контекст:

Агенты могут не только читать макет, но и создавать или изменять native Figma content: frames, components, variables и auto layout. Write-to-canvas пока находится в beta и впоследствии станет usage-based функцией.

Источники:

Рабочая связка

референсы

Claude Design или Stitch

несколько направлений

выбор

Figma

coding-агент

Claude Design и Stitch ускоряют исследование. Figma сохраняет решение в управляемом виде. Coding-агент реализует его.


8. Чем кормить дизайн-инструменты

Mobbin — реальные продуктовые flow

В Mobbin нужно искать не «красивый экран», а конкретный сценарий:

Для Mini App с нардами полезнее изучить десять flow приглашения игрока, чем смотреть сто случайных тёмных интерфейсов.

Смысл:

Не копировать пиксели. Понять, как зрелые продукты решают одинаковую проблему.

Открыть: mobbin.com

Apple Design Resources

Apple публикует официальные UI kits, templates, fonts и design resources для Figma и Sketch.

SF Symbols содержит более 7 000 согласованных системных символов. Они имеют общие веса, масштабы, варианты и платформенную логику. Это лучше, чем просить агента каждый раз рисовать новую иконку с очередным уникальным психическим состоянием.

Источники:

Refero Styles

Refero Styles превращает стили реальных сайтов в AI-readable дизайн-правила и DESIGN.md.

Это полезно, когда вместо:

Сделай в духе luxury fintech.

ты хочешь передать агенту:

Открыть:

Godly и Supahero

Godly помогает искать сильные сайты, взаимодействия, приложения, motion и визуальные паттерны.

Supahero сфокусирован на hero-секциях.

Использовать их лучше не как коллекцию «охуенных сайтов», а как раздельные источники:

Открыть:

MotionSites

MotionSites — библиотека визуальных заготовок и промптов для hero, backgrounds, gradients и анимаций. Часть материалов платная.

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

Motion

Motion — библиотека анимаций для React, JavaScript и Vue.

Она закрывает:

Хороший инструмент, когда интерфейс уже работает, но пока двигается с грацией сраного контейнера на стройке.

Официальная документация: Motion docs

Taste Skill

Taste Skill и его GitHub-репозиторий пытаются бороться с типовой AI-эстетикой через набор правил по:

Это community skill. Значит, его нужно открыть, прочитать SKILL.md, понять, что он делает, и проверить на тестовой задаче. Слово «skill» не превращает чужой GitHub в священное писание.

3D Model Downloader

3D Model Downloader — Chrome-расширение для экспорта Three.js-моделей со страниц в OBJ.

Полезно для анализа и прототипирования 3D-assets. Работает именно с моделями, загруженными через Three.js.

Перед использованием чужого ассета в коммерческом продукте проверяй права. Техническая возможность скачать файл не отменяет лицензию.


9. Быстрые open-source портфолио

Портфолио действительно съедает много времени. Нужно собрать кейсы, упаковать себя и ещё каким-то чудом сделать сайт, который не выглядит как шаблон для junior frontend developer №827.

Вот три открытых проекта, которые можно изучить и развернуть под себя.

PotatoSlop Portfolio

GitHub

Интерактивное портфолио на HTML, CSS, Vanilla JavaScript и Three.js. Подойдёт тем, кому нужен более экспериментальный и визуальный формат.

leonaderi.com

GitHub

Игровое ретро-портфолио, собранное на Vite, TypeScript и Kaboom. Очень специфично, но в этом и смысл: оно не пытается понравиться всем.

PersonalBlog

GitHub

Более технологичный личный сайт на Next.js, TypeScript и Tailwind с 3D/motion-инструментами и интеграциями.

Как использовать нормально

Не меняй имя, цвет кнопки и аватар, называя это собственным сайтом.

Сначала реши:

Исходник экономит разработку. Он не придумывает за тебя позиционирование.


10. Skills, plugins и MCP без терминологической дрочни

Постоянные инструкции

AGENTS.md в Codex и CLAUDE.md в Claude Code содержат контекст, который нужен постоянно:

Skill

Повторяемый процесс под конкретную задачу.

Например:

Обычно skill содержит SKILL.md, а рядом могут лежать references, scripts и assets.

Plugin

Пакет расширений. В Claude Code plugin может содержать:

MCP

Доступ к внешнему инструменту или данным:

Коротко:

MCP даёт агенту инструмент. Skill объясняет, как использовать его в конкретном процессе.


11. Какие skills реально нужны

Не начинай с пятидесяти названий. Начни с задач.

Frontend и дизайн

Задача: не получить очередной набор одинаковых карточек.

Полезные варианты:

Browser testing

Задача: открыть продукт и пройти реальные сценарии.

Инструмент: Playwright и workflows вокруг него.

Проверять:

Code review

Задача: найти ошибки, а не написать комплимент самому себе.

Review должен проверять:

Security

Задача: не выпустить продукт с секретом в клиентском коде или формой, куда можно отправить что угодно.

Для глубокого тестирования можно использовать Strix — open-source AI pentesting tool, который пытается валидировать уязвимости в работающем окружении и формирует доказательства.

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

GEO и SEO

geo-seo-claude — community skill для аудита сайта под AI-поиск и классическое SEO.

Он умеет проверять:

Это не официальная функция Claude. Это open-source проект, который нужно проверять как любой внешний код.

Очистка AI-текстов

stop-slop — skill, который ищет шаблонные AI-фразы, структуры и ритм.

Он полезен как редактор, но не как устройство для создания личности. Если исходный текст ничего не говорит, убрать из него слово «важно» недостаточно.

Создание собственных skills

Если один процесс повторяется — сохраняй его.

Например, твой art-direction workflow может:

  1. разобрать задачу;
  2. определить визуальные территории;
  3. собрать референсы;
  4. описать типографику, сетку, imagery и motion;
  5. создать DESIGN.md;
  6. проверить итоговый интерфейс.

Вот это уже навык, который накапливает твою экспертизу, а не случайная папка с красивым названием.


12. Где искать skills и как не установить себе мусор

Claude Code

Официальный marketplace уже доступен внутри Claude Code через /plugin.

Codex

Перед установкой проверь

Не ставь тридцать skills «пусть лежат».

Описания занимают контекст. Похожие процессы могут конфликтовать. Агент начинает выбирать между тремя способами выполнить одну задачу.

Мой ориентир — 8–12 активных навыков, которые реально закрывают текущую работу.


13. Pack соло-билдера: данные, аналитика, контент и запуск

Ниже не «ещё одна подборка с GitHub». Это инструменты под конкретные задачи.

Данные и лиды

Scrapling

Scrapling — Python-фреймворк для парсинга сайтов с адаптивным поиском элементов.

Полезен для:

Перед парсингом проверяй правила сайта, robots, условия использования и законность обработки данных. Фраза «оно технически скачивается» не является юридическим основанием.

Google Maps Scraper

Google Maps Scraper собирает данные компаний из Google Maps: названия, адреса, телефоны, сайты, рейтинги, координаты и другие поля.

Есть CLI, Web UI, REST API и skill для AI-агентов.

Применение:

Источник проекта: GitHub

Аналитика и рост

Plausible

Plausible — лёгкая privacy-friendly веб-аналитика.

Подходит, когда нужно понять:

Хороший вариант для лендинга, MVP или небольшого продукта без желания сразу строить собственный Google Analytics.

GrowthBook

GrowthBook — open-source система feature flags и A/B-тестов.

Нужна, чтобы проверять:

Главная польза: меньше споров «мне кажется», больше измеримых гипотез.

ActivityWatch

ActivityWatch — local-first open-source трекер активности.

Показывает, куда реально уходит время. Полезен всем, кто уверен, что десять часов работал, а потом обнаруживает Telegram, YouTube и 74 вкладки с «важным ресёрчем».

Контент и AI-поиск

MoneyPrinterTurbo

MoneyPrinterTurbo автоматизирует производство коротких видео: сценарий, материалы, озвучка, субтитры, музыка и сборка.

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

Voicebox

Voicebox — local-first open-source студия голоса для TTS, диктовки, voice profiles и длинных озвучек.

Голос другого человека используется только с его разрешения.

UI и быстрый старт

shadcn/ui

shadcn/ui — не обычная библиотека-зависимость, а база компонентов, код которых копируется в твой проект.

Полезно для:

Ты получаешь исходники и можешь адаптировать их под свою систему.

Watermelon UI

Watermelon UI — registry более сложных React-блоков и компонентов, совместимый с shadcn-подходом.

Связка:

shadcn/ui — базовые примитивы
Watermelon UI — более сложные блоки
Refero / референсы — визуальное направление
Codex — адаптация под продукт

Не вставляй двадцать анимированных компонентов только потому, что они существуют.

Aceternity UI

Aceternity UI — copy-paste компоненты с motion, backgrounds, hero и эффектами.

Использовать дозированно. Если одновременно включить spotlight, sparkles, parallax, moving border и background grid, получится не premium, а казино для разработчиков.

Безопасность

Strix

Strix запускает AI-агентов для тестирования приложений и пытается подтверждать найденные уязвимости.

Сценарий:

  1. поднял staging;
  2. дал тестовый URL и репозиторий;
  3. получил подтверждённые проблемы;
  4. исправил;
  5. прогнал повторно.

Только свои проекты или письменное разрешение.

Telegram и монетизация

В исходной подборке был проект AI Telegram Pay Miniapp, но точной ссылки на репозиторий пока нет. Я не буду придумывать её из воздуха.

До добавления в публичную лекцию нужно проверить:

Это как раз нормальный пример подхода: полезное название без проверяемого источника пока не становится рекомендацией.


14. Obsidian — база знаний, а не «вторая память человечества»

Весь этот материал нужно где-то хранить.

Obsidian работает с локальными Markdown-файлами. Само приложение можно использовать бесплатно. Дополнительные Sync и Publish оплачиваются отдельно.

Туда удобно складывать:

Не надо строить цифровой Ватикан из тысячи связанных заметок.

Начни с папок:

Tools
Design
Skills
Sources
Projects
Content

И сохраняй то, что понадобится повторно.

Web Clipper

Obsidian Web Clipper позволяет сохранить страницу в локальный Markdown, добавить свойства и позже работать с ней внутри vault.

Это сильно удобнее, чем держать важную статью в сорок седьмой вкладке браузера до конца времён.

Открыть:


15. Мой минимальный стек

Ресёрч и подготовка задачи

ChatGPT

Основная работа с проектом

Codex

Документы и второй взгляд

Claude

Дизайн

Claude Design / Stitch

Figma

Расширения

8–12 проверенных skills

База знаний

Obsidian


16. С чего начать прямо сейчас

Не надо после лекции открывать двадцать вкладок и выбирать идеальную подписку до 2029 года.

Сделай семь вещей:

  1. Выбери один AI-чат.
  2. Выбери одного coding-агента.
  3. Создай тестовый проект.
  4. Заведи короткий AGENTS.md или CLAUDE.md.
  5. Собери 5–10 сильных референсов под одну задачу.
  6. Подключи один frontend или testing skill.
  7. Выполни маленькую функцию и проверь её руками.

После этого ты поймёшь про инструмент больше, чем после десяти рейтингов «ТОП-7 АГЕНТОВ, КОТОРЫЕ УБИЛИ ПРОГРАММИСТОВ».


17. Что будет дальше

В следующей лекции и следующем ролике мы перестаём обсуждать инструменты и начинаем делать продукт.

Берём премиальную Telegram Mini App для игры в нарды и разбираем:

Инструменты уже выбраны. Дальше проверяем, способны ли они довести идею до результата, а не только красиво выглядеть на превью YouTube.