Экономия токенов AI: визуальные схемы вместо текстовых промтов

Андрей Отинов -

Разработчик, который никогда не писал мобильные приложения, потратил несколько недель и сотни долларов на токены AI, пытаясь заставить нейросеть собрать рабочий сервис. Текстовые промты не помогали — AI генерировал каждый раз новую вариацию, а код приходилось переписывать. Решение оказалось не в более умной модели, а в смене подхода: вместо текстового описания он начал рисовать схемы экранов и переходов, а затем экспортировать их в виде структурированных правил для AI-агента.

Источник: Habr

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

Прежде чем менять процесс, стоит проверить, подходит ли этот метод для вашего стека и какие ограничения у такого подхода.

Что именно произошло: от текстовых промтов к визуальным правилам

Автор статьи на Habr (никнейм Kymage) описал свой опыт создания мобильного сервиса с помощью AI-агента TRAE — IDE на базе VS Code со встроенным набором моделей. Бесплатная версия TRAE включает GPT 5.4 и 5.2, Dola-seed 2.0 code, MiniMax M2.7 и M3, Kimi k2.5, Deepseek v3.2, Gemini 2.5flash, 3Flash preview и 3.1 Pro preview. Платный тариф — $30 в месяц за безлимитные запросы с авто-выбором модели. Также можно подключить любую свою модель по подписке.

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

На выходе получается набор правил под конкретное приложение: описание экранов, элементов и переходов между ними. Эти правила затем передаются AI-агенту как точная инструкция, ограничивающая его «фантазию» и снижающая количество лишних запросов.

Почему это меняет стоимость и качество работы с AI-агентами

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

Визуальное проектирование решает две задачи:

  1. Снижает количество итераций. Вместо того чтобы описывать функционал текстом (который AI может интерпретировать по-своему), вы задаёте точную структуру экранов и переходов. AI получает не «сделай красиво», а «экран А содержит кнопку Б, которая ведёт на экран В».
  2. Экономит токены на контексте. Текстовое описание сложного приложения может занимать тысячи токенов. Визуальная схема, экспортированная в структурированные правила, компактнее и не содержит лишних деталей, которые AI может неправильно понять.

Для команды, которая платит за токены по факту (например, через API своей модели), экономия может быть значительной. Для тех, кто использует фиксированную подписку (как в TRAE за $30/мес), выигрыш — в скорости и качестве: меньше времени на доработку, больше шансов получить рабочий код с первой попытки.

Как это работает: метод визуального экспорта правил

Метод, описанный автором, состоит из трёх шагов:

Шаг 1. Визуальное проектирование. На холсте (автор создал собственный веб-сервис для этого) рисуются элементы экранов: поля ввода, кнопки, списки, изображения. Каждый элемент получает метку или описание.

Шаг 2. Построение пользовательского флоу. Элементы соединяются стрелками, показывающими переходы между экранами. Например: «Главный экран → кнопка "Войти" → экран авторизации → успешный вход → личный кабинет».

Шаг 3. Экспорт правил. Нажатие кнопки «Экспорт» генерирует структурированный набор правил: описание каждого экрана, его элементов и всех возможных переходов. Этот файл передаётся AI-агенту как инструкция.

Важно: автор не раскрыл точный формат экспорта и не предоставил ссылку на свой сервис. Метод описан концептуально — как идея, а не готовый инструмент.

Где这个方法 может не сработать: ограничения и риски

Прежде чем внедрять этот подход, стоит учесть несколько ограничений, которые следуют из описанного кейса:

Ограничение Последствие Что проверить
Метод привязан к конкретной IDE (TRAE) Неизвестно, насколько хорошо он работает с Cursor, Copilot или другими агентами Протестировать на своей среде разработки
Нет точных метрик экономии токенов Нельзя рассчитать ROI до внедрения Сравнить расход токенов на одном проекте с текстовым и визуальным подходом
Автор — не профессиональный мобильный разработчик Решение может не учитывать технические нюансы платформы Проверить качество сгенерированного кода на реальном устройстве
Сервис для визуального проектирования не опубликован Метод нельзя повторить «из коробки» Использовать аналоги: Miro, Figma (только для схем, не для генерации кода) или любой инструмент для построения диаграмм
Статья опубликована в песочнице Habr Возможна субъективность или неполнота данных Перепроверить на собственном проекте

Дополнительный риск: AI-агент может игнорировать часть правил, если они противоречат его обучению. Автор упоминает, что даже с правилами нужно «ограничивать фантазию агента» — то есть полной гарантии точного следования инструкциям нет.

Что можно проверить на этой неделе: практический чек-лист

Если вы хотите оценить, подходит ли этот метод вашей команде, выполните пять шагов:

  • [ ] Выберите один небольшой проект — мобильный экран или веб-форму, которые вы планируете генерировать через AI. Не берите сложное приложение с десятками экранов.
  • [ ] Нарисуйте схему экранов и переходов в любом доступном инструменте: Miro, draw.io, Figma (только как доска, без AI-генерации), Lucidchart или даже на бумаге с последующим сканированием.
  • [ ] Экспортируйте схему в текстовый файл с описанием: «Экран 1: заголовок, поле ввода, кнопка "Далее". Переход: кнопка "Далее" → Экран 2». Формат может быть любым — главное, чтобы AI мог его прочитать.
  • [ ] Запустите генерацию кода с этим файлом как инструкцией. Замерьте количество токенов, время и количество итераций до получения рабочего результата.
  • [ ] Сравните с текстовым подходом: дайте AI то же задание в виде обычного текстового промта. Сравните расход токенов, качество кода и время на доработку.

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

Источники

Генерация изображения

  • Модель: flux-schnell
  • Провайдер: replicate

Темы журнала

Что почитать дальше