7 мест, где я использую ИИ-агентов в дизайне, и где я останавливаюсь
Кластеризация тикетов, дизайн-системы в Figma, плагины и веб-инструменты, full-stack приложение, нативные приложения, игра для хакатона с 3D-ассетами и этот сайт. Что я отдаю ИИ-агентам, что оставляю себе и как проверяю результат.
Я использую ИИ в 7 видах работы: исследование, дизайн-системы, плагины, приложения, 3D-ассеты и игра для хакатона. Ниже каждый из них: что сделал агент, что сделал я и как я проверял результат.
1. Разбор тикетов саппорта
Для проекта настроек приватности во FlippingBook я выгрузил из Jira и Zendesk тикеты клиентов за последние полгода и разметил их через Claude. До этого я написал скрипт интервью для сейлзов про ушедших потенциальных клиентов. В проекте мобильного приложения я сделал то же с 100+ тикетами и отзывами из App Store и Google Play, кластеризовал боли по частоте и серьёзности.
Сортировал агент. Скрипт интервью и вопросы писал я. Полное исследование в кейсе Mobile App.
2. Дизайн-системы в Figma
Дизайн-системы я собираю и развиваю с Claude Code, который работает прямо в Figma. Правила пишу я: имена, структуру, как должен вести себя компонент и его варианты. Агент создаёт по ним переменные, компоненты и варианты, а результат я проверяю руками. Как это меняет сроки, написано в посте «21 день против 14».
3. Плагины и веб-инструменты: AxoLinter
Когда дизайн-команда выросла, в файлы начали попадать захардкоженные цвета, радиусы и отступы. Я собрал AxoLinter, плагин, который сканирует фреймы, сверяет слои с дизайн-системой и выводит список ошибок. Кнопка Fix All сопоставляет захардкоженные значения с нужными токенами.
Я собирал его в Antigravity IDE с Gemini и Mimo. Логику сканера написал на TypeScript и покрыл модульными тестами в Vitest, интерфейс на чистых HTML и CSS, а esbuild собирает всё в один ui.html. QA перед разработкой стало в 5 раз быстрее, а 85% захардкоженных данных вычистили.
Веб-инструменты и настройщики я делаю так же, когда плагина или таблицы мало.
4. Full-stack приложение: Time Burner
Я не нашёл трекер рутины, который подходил бы под моё расписание и работал на всех платформах. Раскладку фронтенда я спроектировал сам, а логику приложения сгенерировал промптами в Google AI Studio. Firebase отвечает за авторизацию и синхронизацию в реальном времени, поэтому изменение на десктопе мгновенно появляется на мобильном, а сайт работает на GitHub Pages. Это бесплатный open source проект, доступный всем. Подробнее в проекте Time Burner.
5. Нативные приложения под iOS и Android
Дрёмыч — трекер сна малыша под iOS и Android. Делаю его один, с нуля, сразу под обе платформы. Android-билдом пользуюсь сам больше 2 месяцев, iOS-билд готов примерно на 60%. Разделение то же, что во всём посте: агент берёт черновики и сгенерированные ассеты, а продуктовые решения и финальный вид остаются за мной. Например, гном и сцены на главном экране: как выглядят день и ночь, решаю я, а варианты помогает собирать агент.
6. Игра для хакатона и 3D-ассеты: FigmaGotchi и EWA
На хакатоне Figma x Contra я хотел проверить Figma Make на прочность. Получилась FigmaGotchi, играбельная игра с цифровым питомцем в псевдо-3D корпусе консоли. У питомца есть возраст, голод и энергия. Раскладки интерфейса сгенерировал Figma Make, а 3D-графику сделали ИИ-агенты. От идеи до готового концепта я дошёл в рамках дедлайна хакатона.
Тестовое EWA было переработкой экрана библиотеки в роадмап, на выполнение 2 дня. Я сделал 3 high-fidelity прототипа в Figma, а 3D-острова и игровые элементы сгенерировал ИИ-плагинами.
7. Этот сайт
Бриф для этого сайта я написал документом до первой строки кода. Claude Code идёт по нему сессиями, у каждой есть чёткий критерий готовности, коммит и запись в журнале прогресса. Правила лежат в файле CLAUDE.md в репозитории. Оранжевый только там, где разрешено, никаких магических чисел в анимации, цифры кейса только из его meta.yml, контент не выдумывать. Подробности в посте «Как сделан этот сайт».
Четыре правила, которым я следую
- Писать бриф раньше промпта. Сессия с понятной целью и критерием готовности стоит дешевле трёх размытых. В моём плане Claude Code лимит промптов на пятичасовое окно небольшой, поэтому короткие сессии для меня необходимость.
- Давать агенту способ проверить себя. В AxoLinter это юнит-тесты. Для сайта check, build и тесты должны быть зелёными до коммита, а 267 функциональных тестов Playwright идут на каждое изменение.
- Хранить факты там, где агент их не придумает. Цифры лежат в одном файле на кейс. Если данных нет, агент пишет вопрос в журнал и оставляет пробел пустым.
- Смотреть на результат своими глазами. После смены цветов или размеров в дизайн-системе я снимаю скриншот набора вариантов, потому что цифры врут о том, как это выглядит. Это работает и для кода, который написал агент.
Куда бы я применил его дальше
В ретроспективе кейса про дизайн-систему я писал, что ИИ-инструменты могли бы кратно ускорить миграцию на токены, которая заняла больше полугода. Именно сюда я бы сегодня поставил агента в первую очередь.
