Привет, Хабр!
В повседневной жизни я постоянно пользуюсь ИИ: от простых вопросов до разработки. Поэтому вайбкодинг для меня стал чем-то обыденным, и в силу своей сферы деятельности я думал, что вайбкодит уже каждый. Но оказалось, что это далеко не так.
Поэтому я решил написать несколько статей, в которых расскажу, что такое вайбкодинг, как начать им заниматься и какие практики использую я сам.
Вайбкодинг
Вайбкодинг— использование искусственного интеллекта, управляемого инструкциями на естественном языке, для помощи в написании программного кода (Collins Dictionary)
Вайбкодинг — это новый вид программирования, когда ты полностью отдаёшься потоку, принимаешь экспоненциальный прогресс технологий и забываешь о самом существовании кода (Карпати)
Таким образом, в общем случае под вайбкодингом мы понимаем разработку с использованием ИИ.
Но зачем это нужно человеку, который никак не связан с программированием или миром IT? Ведь вы можете сказать: «Я не умею программировать, это не для меня». Однако теперь вам необязательно обладать глубокими знаниями в программировании, чтобы создать что-то для себя.
Здесь сразу оговорюсь: я говорю именно о создании чего-то для личного использования, когда вы можете позволить себе не разбираться в коде, архитектуре и так далее. Иначе меня сейчас забьют программисты.
Кому нужен
С развитием MCP и появлением всё новых интеграций разбираться в ИИ становится полезно людям совершенно разных профессий, а не только разработчикам. Вот несколько инструментов, с которыми уже умеют работать агенты:
1С:Бухгалтерия
Битрикс24
amoCRM
Wildberries
Ozon
МойСклад
Google Таблицы
Google Документы
Gmail
Google Календарь
Notion
Canva
HubSpot
Salesforce
Asana
Slack
Shopify
Stripe
iiko
GitHub
И это далеко не полный список. Более того, существуют платформы-посредники, например Zapier MCP, через которые ИИ-агенты могут взаимодействовать с тысячами различных приложений.
Поэтому в наше время минимальные знания агентной грамотности становятся нужны всем.
Основы
Думаю, в предыдущих двух разделах я уже упомянул несколько терминов, которые могут быть не всем понятны. Поэтому давайте кратко разберёмся, что такое ИИ, ИИ-агенты, Harness, MCP и токены.
AI
Искусственный интеллект — довольно широкое понятие, которое объединяет множество направлений: от классических скоринговых моделей, используемых уже много лет, до больших языковых моделей (LLM), получивших широкое распространение всего несколько лет назад.
Но в этой статье мы будем говорить лишь об одной части этой большой области — генеративном ИИ и, в частности, LLM, поскольку именно с ними нам предстоит работать.
Генеративный ИИ (Generative AI, GenAI) — направление искусственного интеллекта, объединяющее модели, способные создавать контент на основе информации, изученнойв процессе обучения. Это может быть текст, изображения, видео, аудио.
LLM (Large Language Model, большая языковая модель) — тип моделей генеративного искусственного интеллекта, обученных на больших объёмах текстовых данных для понимания и генерации естественного языка. Такие модели способны отвечать на вопросы, анализировать информацию, писать тексты. Примеры: GPT, Claude, Gemini и Qwen.
Контекст
Контекст языковой модели — один из главных ресурсов на сегодняшний день, которого постоянно не хватает. Он представляет собой максимальное количество токенов (один токен — это примерно 3–4 символа текста), которые модель может обработать за один раз.
Думаю, вы уже не раз слышали новости о том, что очередная модель получила контекстное окно в миллион токенов. Но на самом деле даже такого объёма периодически оказывается недостаточно.
Поэтому одной из основных и в то же время самых сложных задач для человека, работающего с ИИ на любом уровне, становится управление контекстом. Ведь от того, какую информацию мы передадим модели, напрямую зависит качество её ответа. Если на вход подать плохо подготовленный или нерелевантный контекст, то и результат, скорее всего, будет соответствующим.
Типы сообщений
В прошлом разделе мы разобрались, что такое контекст и почему им так важно управлять. Но здесь возникает вопрос: а из чего вообще состоит этот контекст? Ведь когда мы общаемся с ChatGPT, то видим только свои сообщения и ответы модели. На самом деле всё немного сложнее.
Для начала стоит понимать, что контекст состоит не только из нашего диалога. В него также могут входить системные инструкции, результаты работы инструментов и другая служебная информация. При этом сообщения имеют разные роли, от которых зависит, как модель будет их воспринимать.
Давайте разберём основные типы сообщений:
System message — системный промпт, или начальная инструкция. Когда вы только открываете ChatGPT или DeepSeek, модель уже получает определённые инструкции, даже если вы ещё ничего не написали. В них может быть указано, как модель должна себя вести, в каком стиле отвечать, какие ограничения соблюдать и как работать с доступными инструментами.
Причём такие инструкции иногда бывают довольно объёмными и занимают десятки тысяч токенов контекстного окна. Их размер зависит от конкретного приложения и может сильно различаться.
Human message (User message) — сообщения пользователя. Это всё, что мы отправляем модели: вопросы, инструкции, фрагменты кода, документы и так далее. Именно с этим типом сообщений мы чаще всего взаимодействуем.
AI message (Assistant message) — ответы самой модели. Например, когда вы просите ChatGPT написать функцию на Python, сгенерированный код будет частью сообщения ассистента. Эти сообщения также сохраняются в истории диалога и занимают место в контексте.
Tool message — результаты вызова инструментов. Например, вы попросили ИИ-агента прочитать файл из вашего проекта. Модель вызывает соответствующий инструмент, а тот возвращает содержимое файла. Этот результат и будет передан модели в виде Tool message.
Таким образом, даже если вы отправили всего одно короткое сообщение, в контексте может появиться гораздо больше информации, чем вы видите в интерфейсе.
Но зачем вообще разделять сообщения на разные типы?
Дело в том, что для модели не все инструкции имеют одинаковый приоритет. Например, системные инструкции обладают более высоким приоритетом, чем обычные сообщения пользователя. А содержимое файла или результат поиска, полученные через инструмент, вообще не должны восприниматься как новые инструкции, которым необходимо следовать.
Для нас сейчас главное понять две вещи: контекст состоит из разных типов сообщений, а управлять им — значит не просто сокращать количество текста, но и правильно организовывать информацию, которую получает модель.
Инструменты и ИИ-агенты
Что же такое ИИ-агент и чем он отличается от обычной LLM?
Как я уже говорил выше, LLM способна генерировать последовательности токенов, но откуда она берёт информацию для ответов на наши вопросы?
В первую очередь из данных, на которых она была обучена. То есть если во время обучения модель получила достаточно информации по интересующей вас теме, то, скорее всего, сможет ответить на вопрос. Но если нужной информации в обучающих данных не было, модель может не знать правильного ответа.
Правда, это не означает, что она обязательно промолчит. Скорее всего, модель всё равно попытается что-то ответить, и здесь мы сталкиваемся с так называемыми галлюцинациями — ситуациями, когда ИИ генерирует недостоверную или вовсе выдуманную информацию.
Например, модель, обученная на данных до 2025 года, сама по себе не знает, какая сегодня погода или с каким счётом закончился вчерашний футбольный матч. У неё просто нет доступа к этой информации.
В 2022–2023 годах нас это в целом устраивало. Уже сама возможность общаться с языковой моделью и получать осмысленные ответы казалась чем-то невероятным. Но довольно быстро стало понятно, что одних знаний, полученных во время обучения, недостаточно.
Нам хотелось, чтобы модель могла получать актуальную информацию, работать с файлами, выполнять код и вообще как-то взаимодействовать с внешним миром.
Для решения этой задачи появились инструменты, или tools — механизм, позволяющий языковой модели обращаться к внешним системам и получать результаты их работы.
Tools
Tools (инструменты) — это внешние функции, которые ИИ-модель может вызывать для получения информации или выполнения определённых действий. Например, искать информацию в интернете, читать и изменять файлы, выполнять программный код, обращаться к базам данных или взаимодействовать с другими приложениями.
Наверное, одним из первых и самых важных инструментов стал поиск в интернете. Но как это вообще работает?
Мы уже говорили, что для ответа на наши запросы модель использует знания, полученные во время обучения, а также всю информацию из доступного ей контекста: наши сообщения, предыдущие ответы и системные инструкции.
Поэтому, если мы каким-то образом добавим в контекст актуальную информацию, необходимую для ответа на вопрос, модель сможет её использовать.
Именно на этом принципе и строится работа инструментов.
Для модели инструмент может представлять собой обычную функцию, которую она умеет «вызывать». Например:
@tooldef get_weather(city: str) -> str: """Получает актуальную погоду в указанном городе.""" weather = weather_api.get(city) return f"Температура: {weather.temperature}°C, {weather.description}"А для нас это бдует выглядеть так:
Благодаря этому мы можем получать от модели актуальную информацию, отправлять запросы к сторонним сервисам, работать с файлами и выполнять множество других действий.
Но здесь возникает другая проблема. Инструментов может быть огромное количество, и для подключения каждого из них разработчикам приходится писать отдельную интеграцию. А что, если мы захотим использовать один и тот же инструмент в разных ИИ-приложениях?
MCP
Для решения этой проблемы в конце 2024 года компания Anthropic представила Model Context Protocol (MCP) — открытый протокол, который стандартизирует взаимодействие ИИ-приложений с внешними инструментами и источниками данных.
Давайте разберёмся, зачем он нужен.
Представим, что мы хотим дать нашему ИИ-агенту доступ к GitHub. Например, чтобы он мог читать код из репозиториев, создавать Issues или работать с Pull Requests.
Без MCP нам пришлось бы самостоятельно реализовывать взаимодействие с API GitHub, описывать доступные функции и объяснять модели, как ими пользоваться.
С MCP всё становится немного проще. Мы можем подключить готовый MCP-сервер GitHub, который уже предоставляет необходимые инструменты в стандартном формате. И если наше ИИ-приложение поддерживает MCP, оно сможет обнаружить эти инструменты и использовать их.
То же самое работает с MCP серверами других сервисов. Вот некоторые из них: https://glama.ai/mcp/servers?utm_source=chatgpt.com
ИИ-агент
Схема, которую мы рассмотрели выше, уже отражает основной принцип работы ИИ-агента.
ИИ-агент (AI Agent) — это система, способная самостоятельно планировать и выполнять последовательность действий для достижения поставленной цели. Для этого агент использует языковую модель для принятия решений, взаимодействует с инструментами (Tools), анализирует результаты их работы и при необходимости корректирует свои дальнейшие действия.
Но как это устроено на практике?
Давайте рассмотрим одну из базовых архитектур ИИ-агентов — ReAct (Reasoning and Acting). Этот подход лёг в основу множества агентных систем и продолжает использоваться сегодня.
В основе ReAct лежит довольно простой цикл:
-
Reasoning (рассуждение) — модель анализирует текущую задачу и решает, какое действие необходимо выполнить.
-
Acting (действие) — модель выбирает подходящий инструмент и формирует запрос на его вызов.
-
Observation (наблюдение) — результат выполнения инструмента возвращается в контекст модели.
После этого цикл повторяется: модель анализирует обновлённый контекст и решает, нужно ли выполнить ещё какое-то действие или уже можно сформировать итоговый ответ.
Например, если попросить агента создать сайт, он может сначала создать необходимые файлы, затем установить библиотеки, запустить приложение, обнаружить ошибку и исправить её. И всё это в рамках одной задачи, без необходимости вручную давать команду на каждом шаге.
Harness
Простая схема ReAct-агента, которую мы рассмотрели выше, долгое время оставалась основой многих агентных систем. Более того, этот принцип актуален и сегодня. Но с развитием языковых моделей и усложнением задач стало понятно, что одного цикла вызова инструментов уже недостаточно.
Возникали новые проблемы: ограниченный контекст, потеря информации между сессиями, зацикливание агента, ошибки при работе с инструментами, отсутствие полноценных механизмов планирования и проверки результатов.
Параллельно с этим развивалась и инфраструктура вокруг языковых моделей. Появлялись механизмы управления контекстом и долговременной памятью, сохранения состояния между сессиями, работы с файлами и терминалом. Добавлялись специализированные навыки (Skills), интеграции через MCP, системы тестирования и самоисправления, инструменты мониторинга и логирования, а также возможность делегировать задачи другим агентам.
Так постепенно вокруг языковой модели сформировалась целая среда, которую называют Harness.
Harness (агентная среда выполнения) — это инфраструктура, которая организует работу ИИ-агента: управляет взаимодействием с языковой моделью, её контекстом и состоянием, предоставляет инструменты, обеспечивает их вызов и контролирует процесс выполнения задачи.
При этом важно понимать, что Harness сам по себе не является языковой моделью. Более того, одна и та же LLM может показывать совершенно разные результаты в зависимости от того, в какой агентной среде она работает.
Таким образом, сегодня архитектуру агентной системы можно представить следующим образом:
При этом далеко не каждый агент обладает всеми перечисленными возможностями. Их набор зависит от конкретных задач и реализации.
Таким образом, если LLM — это мозг агента, то Harness — это среда, которая позволяет ему взаимодействовать с окружающим миром, сохранять результаты своей работы и решать сложные задачи.
Инструменты вайбкодинга
Теперь, когда мы разобрались, как устроены ИИ-агенты, давайте посмотрим, какие инструменты позволяют использовать их для разработки.
На сегодняшний день существует множество готовых агентных сред, которые берут на себя управление контекстом, работу с инструментами и выполнение задач. Поэтому нам не нужно самостоятельно создавать всю эту инфраструктуру. Достаточно выбрать подходящее решение.
Среди наиболее известных инструментов в 2026 году можно выделить Codex, Claude Code, OpenCode и Hermes Agent.
Несмотря на схожие принципы работы, у каждого из них есть свои особенности: интерфейс, доступные модели, возможности настройки и организация работы агента.
Давайте кратко рассмотрим основные варианты, а затем перейдём непосредственно к практике.
Codex — OpenAI
Codex — ИИ-агент для программирования от создателей ChatGPT.
Его основная задача — самостоятельно выполнять задачи, связанные с разработкой. Например, вы можете попросить его создать сайт, и Codex напишет код, создаст необходимые файлы, установит библиотеки и попробует запустить получившееся приложение.
Работать с ним можно через отдельное приложение, редактор кода или терминал. Причём самостоятельно писать код необязательно: достаточно описывать свои задачи на обычном языке.
Главная особенность: полноценная агентная среда для разработки, ориентированная прежде всего на модели OpenAI.
Claude Code — Anthropic
Claude Code — прямой конкурент Codex от компании Anthropic, разработчика семейства моделей Claude.
По своим возможностям эти инструменты во многом похожи: оба умеют работать с целыми проектами, выполнять команды, изменять файлы и самостоятельно исправлять ошибки.
Claude Code также доступен через отдельное приложение, терминал, редакторы кода и браузер.
Главная особенность: тесная интеграция с семейством моделей Claude. По сути, выбирая между Codex и Claude Code, вы во многом выбираете между двумя экосистемами и подходами к организации работы ИИ-агентов.
Cursor
Cursor — это прежде всего редактор кода (среда разработки) со встроенным ИИ-агентом.
Его главное отличие от Codex и Claude Code — больший акцент на непосредственном участии разработчика. Вы видите структуру проекта, можете самостоятельно редактировать код, отслеживать изменения и одновременно взаимодействовать с агентом.
При этом Cursor поддерживает модели разных разработчиков, включая OpenAI, Anthropic и Google.
OpenCode
OpenCode — ИИ-агент для программирования с открытым исходным кодом.
Его главное преимущество — свобода выбора языковой модели. Вы можете подключать модели разных разработчиков, самостоятельно выбирать провайдера и способ оплаты или даже использовать локальные модели.
В остальном OpenCode решает те же задачи, что и рассмотренные ранее инструменты: умеет работать с проектами, писать и редактировать код, выполнять команды и исправлять ошибки.
Главная особенность: открытый исходный код и возможность самостоятельно выбирать модели и настраивать среду под свои задачи.
Hermes Agent
Hermes Agent несколько отличается от предыдущих решений. Это универсальный ИИ-агент, предназначенный не только для программирования, но и для автоматизации повседневных задач.
Например, с ним можно взаимодействовать через Telegram, поручать ему поиск информации, работу с файлами, написание кода и выполнение регулярных задач.
Одна из наиболее интересных особенностей Hermes — долговременная память. Агент может сохранять информацию о пользователе, его предпочтениях и предыдущих задачах, а также постепенно накапливать полезные способы выполнения работы.
При этом Hermes тоже позволяет использовать модели разных разработчиков.
Главная особенность: универсальность и развитые механизмы памяти, позволяющие использовать агента не только для разработки, но и в качестве личного ИИ-помощника.
Так что же выбрать?
На самом деле для начала подойдёт любой из перечисленных инструментов.
Если вы хотите просто описывать задачи и получать работающие приложения, я бы начал с Codex или Claude Code. Если вам комфортнее работать непосредственно в редакторе кода — Cursor.
OpenCode подойдёт тем, кто хочет самостоятельно выбирать модели и гибко настраивать свою среду. А Hermes Agent особенно интересен, если помимо разработки вы планируете автоматизировать повседневные задачи.
Лично я использую Codex, поэтому именно на нём буду показывать дальнейшие примеры.
Codex (ChatGPT)
В 2026 году Codex доступен в нескольких форматах, и для начала работы необязательно разбираться в программировании или пользоваться терминалом.
1. Отдельное приложение (Codex — ChatGPT)
Программа с графическим интерфейсом, в которой можно создавать проекты, ставить задачи агенту, наблюдать за его работой и просматривать изменения.
2. Расширение для редактора кода
Codex можно встроить непосредственно в редактор, например VS Code. В этом случае вы одновременно видите исходный код проекта и общаетесь с агентом. Такой подход особенно удобен, если вы хотите самостоятельно просматривать и редактировать файлы.
3. Codex CLI
Codex можно использовать и через командную строку. Вместо привычного графического интерфейса вы работаете с окном терминала. При этом основные возможности агента сохраняются: он может изучать проект, изменять файлы и выполнять команды.
Для дальнейших примеров я буду использовать десктопное приложение ChatGPT с Codex. На мой взгляд, это наиболее понятный вариант для тех, кто впервые сталкивается с разработкой. При этом большинство возможностей, которые мы рассмотрим, доступно и в других интерфейсах.
Установка
Для начала перейдите на официальную страницу загрузки ChatGPT и скачайте приложение для Windows или macOS. После установки войдите в свой аккаунт ChatGPT и выберите Codex.
Для использования Codex необязательно покупать платную подписку ChatGPT. Начать можно даже с бесплатного аккаунта, однако доступные лимиты будут довольно небольшими. Если вы планируете регулярно заниматься разработкой, стоит рассмотреть подписки ChatGPT Plus или Pro.
На этом подготовка закончена. Теперь можно переходить непосредственно к разработке.
Интерфейс
После первого запуска перед нами откроется интерфейс Codex. Он напоминает обычный ChatGPT в браузере: здесь тоже есть поле для ввода сообщений и история диалогов. Но за внешним сходством скрывается существенное отличие: Codex умеет работать с реальными файлами и самостоятельно выполнять действия на вашем компьютере.
Для начала нам достаточно разобраться всего с несколькими элементами:
-
Проекты и папки. Здесь мы выбираем, с какими файлами будет работать агент. Для создания нового приложения достаточно создать пустую папку и открыть её в Codex.
-
Диалоги (сессии). В рамках одного проекта можно вести несколько независимых диалогов с агентом. Например, в одном разрабатывать функциональность, а в другом обсуждать изменения интерфейса.
-
Поле запроса. Здесь мы описываем, что хотим получить от агента. Также можно прикреплять изображения и другие материалы.
Иногда Codex будет запрашивать разрешение на выполнение отдельных действий. Например, при запуске определённых команд или обращении к ресурсам за пределами разрешённой среды. Поэтому перед подтверждением стоит обращать внимание на то, что именно собирается сделать агент.
В дальнейшем вы сможете предоставить Codex полный доступ, чтобы он не прерывал работу постоянными запросами разрешений и мог действовать более самостоятельно. Однако на первых этапах я бы не рекомендовал этого делать. Лучше сначала разобраться, какие действия выполняет агент и к каким ресурсам он получает доступ.
Выбор модели
Прежде чем переходить непосредственно к разработке, давайте разберёмся с ещё одним важным моментом — выбором языковой модели.
По состоянию на ноябрь 2026 года OpenAI предлагает несколько моделей, которые отличаются своими возможностями, скоростью работы и потреблением ресурсов.
Модель
Особенности
GPT-6 Luna
Самая экономичная модель. Подходит для простых задач, небольших изменений
GPT-6.1 Terra
Средняя модель, интересная для работы с интерфейсами, изображениями и небольшими изменениями кода.
GPT-6.1 Sol
Более мощная универсальная модель. Хорошо подходит для разработки, анализа проектов и решения сложных задач.
GPT-6 Astra
Наиболее мощная модель, предназначенная для сложного программирования, архитектурных задач и глубокого анализа.
Возникает вопрос: зачем использовать менее мощную модель, если можно сразу выбрать самую умную?
Дело в том, что более мощные модели, как правило, расходуют больше ресурсов и дольше выполняют задачи. При этом далеко не каждая задача требует глубокого анализа. Например, чтобы изменить цвет кнопки или добавить новое текстовое поле, совсем необязательно использовать самую мощную модель.
Поэтому я бы рекомендовал начинать с моделей Luna/Terra. Если же вам предстоит более сложная задача, можно переключиться на Sol.
Для нашего первого проекта вполне подойдёт и слабая модель, поскольку проект будет достаточно небольшим.
Уровни рассуждений
Помимо выбора модели, Codex позволяет настраивать уровень её рассуждений
Reasoning Effort — параметр, определяющий, сколько вычислительных ресурсов модель может использовать для анализа задачи и поиска решения.
Проще говоря, мы можем попросить модель потратить больше усилий на обдумывание задачи, прежде чем и в процессе её выполнения.
В зависимости от выбранной модели доступны разные уровни:
Уровень
Когда использовать
Low
Простые и хорошо сформулированные задачи
Medium
Повседневная разработка, добавление функций и исправление обычных ошибок
High
Сложные задачи, требующие более глубокого анализа
Extra High (XHigh)
Сложная архитектура, поиск нетривиальных ошибок и многоэтапные задачи
Ultra
Особенно трудные задачи, когда допустимы большие затраты времени и ресурсов
Здесь важно понимать, что высокий уровень рассуждений не гарантирует лучший результат. Иногда модель может решить задачу на Low ничуть не хуже, чем на High, но при этом значительно быстрее.
Кроме того, повышение уровня рассуждений может увеличить расход токенов, а значит, и использование доступных лимитов.
Для начала я бы рекомендовал Medium. На мой взгляд, это хороший компромисс между скоростью и качеством. Если же агент не справляется со сложной задачей, можно попробовать High.
Лично я чаще всего использую Medium и High. При грамотной постановке задачи этого вполне достаточно.
Быстрые команды Codex
Ещё одна полезная возможность Codex — быстрые команды.
Если в поле ввода сообщения написать символ /, откроется список доступных команд. С их помощью можно управлять работой агента, менять настройки и запускать специальные режимы, не выходя из диалога.
Вот несколько команд, которые я использую:
Команда
Что делает
/status
Показывает информацию о текущей сессии, заполнении контекста и лимитах
/plan
Переключает агента в режим планирования
/review
Запускает проверку изменений в коде
/compact
Сжимает историю диалога, освобождая место в контексте
/side
Позволяет задать отдельный вопрос, не прерывая основную работу
Например, команда /status будет особенно полезна при работе над большими задачами. С её помощью можно следить за заполнением контекста и доступными лимитами.
Команда /plan позволяет переключить агента в режим планирования, в котором он сначала изучает задачу и составляет план действий, а уже затем переходит к реализации.
Отдельно стоит упомянуть /compact. Как мы уже говорили, размер контекстного окна ограничен, и рано или поздно свободное место в нём может закончиться. Эта команда позволяет сжать историю диалога, сохранив наиболее важную информацию.
Правда, при сжатии часть деталей может потеряться, поэтому полностью полагаться на этот механизм я бы не рекомендовал.
Мини-проект
Ну что, с теорией и установкой разобрались. Теперь давайте наконец попробуем что-нибудь создать, чтобы в дальнейшем на этом примере изучить и другие возможности Codex.
Для первого проекта я выбрал небольшой редактор постеров. В нём можно будет изменять текст, выбирать оформление, настраивать цвета и сохранять готовый постер в формате PNG.
При этом весь проект будет состоять всего из одного HTML-файла, который можно открыть в обычном браузере.
Первый запрос
Для начала создайте новый проект и дайте ему какое-нибудь название.
Теперь нам нужно объяснить агенту, что именно мы хотим получить. Пока не будем использовать сложные техники написания запросов, о которых поговорим позже. Просто опишем нашу задачу обычным языком.
Первый запрос:
Создай небольшое веб-приложение Poster Studio — редактор постеровФункциональность:- Пользователь может изменять заголовок, подзаголовок, дату и место мероприятия.- Справа отображается предварительный просмотр постера, который обновляется сразу при изменении текста.- Постер имеет вертикальный формат 1080 × 1350 пикселей.- Есть кнопка скачивания готового постера в PNG.Дизайн:- Современный минималистичный интерфейс.- Слева панель редактирования, справа предпросмотр.- Сам постер должен выглядеть как профессиональная афиша: крупная типографика, продуманная композиция, аккуратные отступы.- Для начала реализуй один стиль: тёмный фон, светлая типографика и один акцентный цвет.- По умолчанию заполни поля примером афиши кинофестиваля.Технические ограничения:- Используй HTML, CSS и JavaScript.- Весь проект размести в одном файле index.html.- Не используй внешние библиотеки, сервер, API и дополнительные зависимости.- Для отрисовки и экспорта постера используй Canvas API.- Приложение должно запускаться открытием HTML-файла в браузере.После создания проверь код и объясни, как запустить приложение.После отправки запроса Codex приступит к работе над проектом. Он создаст необходимые файлы, напишет код интерфейса, добавит логику редактора и функцию экспорта изображения.
Обратите внимание: мы не написали ни одной строчки кода самостоятельно. Всё, что мы сделали, — описали желаемый результат и задали несколько ограничений.
Когда агент закончит работу, останется только открыть созданный файл index.html в браузере или прямо в Codex и посмотреть, что у нас получилось.
Теперь у нас есть собственное приложение. Можно изменить название мероприятия, дату или место проведения и сразу увидеть результат. А нажав на кнопку скачивания, получить готовое изображение в формате PNG.
Второй запрос: улучшаем приложение
Итак, первая версия готова. Но пока у нас есть только один стиль оформления, а возможности настройки довольно ограничены.
Давайте попробуем немного доработать наше приложение.
Для этого отправим агенту второй запрос:
Давай улучшим Poster Studio.Добавь следующие возможности:1. Три стиля оформления постера: - Minimal — светлый фон, чёрная типографика, минималистичная композиция. - Dark — тёмный фон, светлый текст, аккуратный цветовой акцент. - Gradient — мягкий градиентный фон и современная типографика.2. Возможность вручную выбирать акцентный цвет.3. Настройку размера основного заголовка с помощью ползунка.4. Автоматический перенос длинного текста, чтобы заголовок не выходил за границы постера.При переключении стилей текст пользователя должен сохраняться.Сохрани существующий функционал и не добавляй внешние библиотеки или новые файлы. Интерфейс должен оставаться простым и аккуратным.После изменений проверь, что все три стиля работают и PNG скачивается корректно.И здесь мы подходим к одной из главных особенностей агентной разработки: с агентом можно работать над проектом постепенно.
Необязательно сразу описывать всё приложение до мельчайших деталей. Можно создать первую версию, посмотреть на результат, понять, чего не хватает, и продолжить разработку.
Но есть и обратная сторона. Чем больше изменений мы вносим, тем выше вероятность, что какая-нибудь новая функция неожиданно сломает то, что уже работало.
Чуть позже мы поговорим о том, какие существуют практики, позволяющие снизить вероятность подобных проблем.
Третий запрос
Поэтому последним шагом попросим агента проверить приложение.
Проведи проверку приложения Poster Studio.Проверь:- Обновление предпросмотра при изменении каждого текстового поля.- Переключение трёх стилей оформления.- Изменение размера заголовка и акцентного цвета.- Корректное отображение длинных заголовков и переносов строк.- Скачивание PNG в разрешении 1080 × 1350 пикселей.- Отображение интерфейса на небольших экранах.Исправь найденные ошибки. Не добавляй новых функций, не меняй технологии и не усложняй архитектуру.В конце кратко напиши, что удалось проверить, какие ошибки были исправлены и что осталось непроверенным.Здесь мы знакомимся с ещё одной важной практикой — проверкой результата самим агентом.
Вместо того чтобы самостоятельно искать ошибки в исходном коде, мы просим Codex проверить конкретные сценарии работы приложения. При этом я бы рекомендовал использовать более мощную модель или повысить уровень рассуждений.
Однако важно понимать, что сообщение агента «всё работает» само по себе ещё ничего не гарантирует. Поэтому после завершения работы стоит самостоятельно открыть приложение, попробовать переключить стили, ввести длинный заголовок и скачать несколько постеров.
Что мы получили
Всего за три запроса мы создали небольшой редактор постеров, который позволяет изменять текст, выбирать оформление, настраивать цвета и сохранять готовые изображения.
При этом нам не пришлось самостоятельно писать код, устанавливать библиотеки. Весь процесс разработки прошёл в одном диалоге с Codex.
Конечно, по своим возможностям наш редактор далёк от Canva или Figma. Но для первого проекта этого достаточно. Главное, что мы получили работающее приложение, которое можно самостоятельно использовать и в дальнейшем развивать.
И, пожалуй, самое интересное здесь даже не сам результат, а то, насколько изменился процесс разработки. Мы просто описали задачу, получили первую версию приложения, внесли несколько изменений и проверили результат. И всё это на обычном языке, не написав ни одной строчки кода.
Но, как вы уже могли догадаться, у такого подхода есть свои ограничения.
Пока приложение небольшое, а задачи относительно простые, нам достаточно нескольких запросов. Однако по мере усложнения проекта начинают возникать проблемы: агент может неправильно понимать требования, забывать предыдущие инструкции, вносить лишние изменения или допускать ошибки, которые не всегда легко заметить.
Поэтому в следующих частях мы поговорим о том, как правильно ставить задачи ИИ-агентам, управлять контекстом и организовывать процесс разработки, чтобы получать более предсказуемые результаты даже при работе над сложными проектами.
Вместо заключения
Итак, мы прошли путь от знакомства с понятием вайбкодинга до создания собственного приложения.
По дороге разобрались, что такое большие языковые модели, как работают ИИ-агенты, зачем им нужны инструменты и какую роль во всём этом играет агентная среда (Harness).
Затем перешли к практике: установили Codex, познакомились с его интерфейсом и создали Poster Studio — небольшой редактор постеров, который позволяет изменять оформление, работать с текстом и сохранять готовые изображения.
И всё это без необходимости самостоятельно писать код.
Конечно, мы пока затронули лишь небольшую часть возможностей современных ИИ-агентов. Наш первый проект был довольно простым: один файл, понятная задача и всего несколько запросов.
Но что произойдёт, если мы захотим разработать приложение из десятков файлов, с базой данных, внешними сервисами и сложной бизнес-логикой?
Здесь уже недостаточно просто написать «сделай мне красиво». Приходится задумываться о том, как правильно сформулировать требования, передать агенту необходимый контекст, спланировать разработку и убедиться, что новые изменения ничего не сломали.
Именно этим мы и займёмся в следующей части.
Поговорим о том, как правильно ставить задачи ИИ-агентам, управлять контекстом и организовывать процесс разработки, чтобы получать более предсказуемые результаты даже в сложных проектах.
Если вам интересна тема ИИ и его практического применения, можете заглянуть в мой Telegram-канал.
Ну и, конечно, буду рад вашим вопросам и замечаниям в комментариях!
Источник: habr.com