Вайбкодинг: арт и инструменты — генеративная графика и интерактивные конструкторы

• Промо-страница или бренд-микросайт с генеративным анимированным фоном вместо статичной картинки.
• Внутренний инструмент команды (палитр-генератор, конструктор паттернов, подборщик пар шрифтов). Маленькая утилита, которая сама и есть продукт, а не вспомогательный экран внутри чего-то большего.
• Портфолио-пис, который сам по себе демонстрирует владение интерактивом, а не просто рассказывает о нём.
• Интерактивный элемент кампании: что-то, с чем аудитория взаимодействует ради самого впечатления, а не чтобы получить информацию.

• Canvas API — встроенный в браузер холст для рисования пикселей кодом в реальном времени. Основа большинства 2D-генеративной графики.
• WebGL и Three.js — доступ к видеокарте прямо из браузера для 3D и сложных визуальных эффектов. Three.js — самая распространённая библиотека, с которой не нужно работать с WebGL напрямую.
• Шейдер (shader) — маленькая программа, которая считает цвет каждого пикселя отдельно и параллельно на видеокарте. Именно шейдеры лежат в основе большинства «живых», плавно перетекающих генеративных фонов.
• SVG-анимация vs Canvas vs WebGL — три разных технических пути к похожему на вид результату. SVG проще редактировать, он лучше подходит для чётких форм и иконок. Canvas — для процедурной пиксельной графики. WebGL — когда нужна настоящая 3D-глубина или сотни одновременно анимированных объектов. Явно называй агенту, какой путь нужен, а не оставляй выбор на его усмотрение: от этого фактически зависит производительность результата.

Уметь самому писать шейдеры или разбираться в WebGL необязательно. Код пишет агент. Тебе нужно понимать словарь достаточно, чтобы точно сформулировать задачу и осмысленно прочитать, что агент предлагает.

Самый частый запрос в этом сценарии — живой, плавно меняющийся фон вместо статичной картинки: mesh-градиенты, перетекающие «блобы», частицы, шум. Здесь легче всего скатиться в готовый штамп. Фирменный сине-фиолетовый «ИИ-градиент» (тема «Нейрослоп») стал настолько частым дефолтом именно в таких генерациях, что сам по себе считывается как признак «это делал не человек». Формулировка «сделай красивый анимированный градиент» почти гарантированно приведёт именно к нему. Вместо этого явно задавай палитру в конкретных hex-кодах, скорость и характер движения (плавное/резкое, органичное/геометричное). Иначе модель выберет самый частотный вариант.

Отдельный, особенно интересный для дизайнера жанр — рабочий инструмент, а не иллюстрация и не фон. Пользователь двигает регуляторы, а результат меняется вживую. Технически это тот же паттерн, что и precision knobs и style lenses из темы «UX-паттерны для ИИ-функций». Только здесь весь продукт — это один такой конструктор, а не элемент внутри более крупного интерфейса. Практические примеры: генератор палитры по одному опорному цвету, конструктор паттернов с регулировкой плотности и угла, подборщик пар шрифтов с живым превью текста, генератор градиентов с экспортом кода в CSS.

Главное решение при сборке такого инструмента — что именно превратить в живой параметр, а что оставить фиксированным. Слишком много регуляторов делает интерфейс пугающим. Слишком мало — не даёт почувствовать разницу между «поиграться» и «настоящий контроль над результатом».

Частный, но особенно ценный для дизайнера случай «инструмента как продукта» из раздела выше — инструмент, собранный не как отдельный сайт, а прямо как плагин для Figma. Открывать браузер и переключаться между вкладками не нужно. Инструмент работает над реальным файлом и реальным выделением, в котором ты и так уже находишься весь день.

Есть и более лёгкий путь к тому же результату: попросить сам Figma Agent сгенерировать плагин или шейдер прямо по промпту, без выхода из Figma и без ручной настройки файлов ниже (тема «ИИ внутри Figma», раздел про генерацию плагинов и шейдеров). Генерация расходует AI-кредиты Figma, код плагина можно посмотреть, а готовый плагин — опубликовать в Community или внутри организации. Но путь через CLI-агента ниже остаётся более гибким и предсказуемым вариантом для всего, что должно жить и развиваться за пределами одного файла Figma.

Как это устроено технически, в общих чертах. Плагин Figma — это код на JS/TS, который выполняется в собственной песочнице внутри Figma. Доступ к дереву слоёв файла он получает через объект figma (figma.currentPage.selection, figma.root и так далее). Этим он и отличается от обычного вайбкодинг-сайта: у него нет своего окна браузера, он живёт внутри чужого приложения. Файл manifest.json в корне плагина описывает его имя, точку входа и разрешения. В частности, доступ к сети (networkAccess) нужно явно перечислить по доменам, если плагину нужно постучаться во внешний API. Иначе запрос молча не пройдёт. Если плагину нужен визуальный интерфейс (окно с кнопками, а не только автоматическое действие), для этого есть отдельный файл ui.html. Он рисуется в iframe и общается с основным кодом через сообщения (postMessage), потому что у песочницы плагина нет прямого доступа к DOM.

Как это собирать на практике. Тот же CLI-агент из темы «CLI и терминальные ИИ-агенты» (Claude Code, Codex CLI) отлично справляется с этим стеком. Попроси его сразу накидать стартовый каркас плагина по официальному шаблону Figma. Дальше цикл разработки отличается от сайта одной деталью. Изменения не появляются сами по обновлению вкладки браузера. Плагин один раз импортируется в десктоп-приложении Figma через меню Plugins → Development → «Import plugin from manifest». Дальше после каждой правки TypeScript нужно пересобрать code.ts в code.js (агент настроит команду сборки или режим watch) и перезапустить плагин.

Выбираешь manifest.json

Плагин в списке Development

Плагин запущен

Собери стартовый каркас плагина для Figma на TypeScript: manifest.json, точка входа code.ts с доступом к figma.currentPage.selection, простое окно ui.html с одной кнопкой «Запустить». Объясни, как импортировать это в Figma через меню Plugins → Development для теста

Три конкретных примера, которые закрывают частые задачи разных дизайнеров:

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

Собери плагин для Figma, который проходит по всем текстовым слоям в текущем выделении, отправляет их через API текстовой модели на проверку грамматики и опечаток, и показывает результат в панели ui.html списком: слой → найденная ошибка → предложенное исправление. Ключ API не хардкодь: пусть пользователь один раз вводит его в панели плагина, а плагин хранит его через figma.clientStorage. Провайдер — [название, например Anthropic]: пропиши его домен в networkAccess в manifest.json и добавь заголовки, которые этот API требует для запросов из браузера

Запрос к модели из ui.html идёт прямо из браузерной песочницы. Figma пропустит его, только если домен провайдера указан в networkAccess. А Anthropic API без специального заголовка для браузерных запросов отклонит его как CORS-ошибку.

Массовая замена шрифта по всему проекту — полезно при ребрендинге или миграции на новую типографику, когда шрифт разбросан по десяткам компонентов:

Собери плагин для Figma с окном ui.html, где два выпадающих списка — «шрифт, который заменить» и «шрифт, на который заменить» (оба списка заполняются реально используемыми в файле шрифтами). По кнопке «Заменить» плагин находит все текстовые слои с первым шрифтом во всём файле и меняет их на второй, сохраняя размер и начертание, и показывает, сколько слоёв затронуто

Генератор градиентов с сохранением в стили — быстрый способ насэмплировать варианты, не открывая отдельный сайт-конструктор:

Собери плагин для Figma с окном ui.html: два цветовых пикера (начальный и конечный цвет) и ползунок угла градиента. По кнопке «Применить» плагин заливает выбранный слой линейным градиентом с этими параметрами, а по кнопке «Сохранить как стиль» создаёт из него переиспользуемый paint style с указанным именем

Секреты вроде API-ключа для проверки грамматики — тот же вопрос, что и в теме «Безопасность вайбкодинг-проекта». Не хардкодь ключ в коде плагина, особенно если план — опубликовать плагин в Figma Community, где код может увидеть кто угодно. Важная техническая деталь: у плагина Figma нет привычных переменных окружения и файла .env. Он целиком выполняется на стороне пользователя. Рабочих варианта два. Первый: пользователь сам вводит свой ключ в интерфейсе плагина, а плагин хранит его локально через figma.clientStorage. Второй: плагин ходит не напрямую в API модели, а на твой собственный маленький сервер-посредник, где ключ и лежит, а сам сервер требует авторизации (хотя бы токен пользователя плагина) и ограничивает число запросов — иначе это тот же утёкший ключ. Не забудь перечислить нужный домен в networkAccess манифеста. Публиковать свой плагин необязательно. Для личного или командного использования достаточно оставить его импортированным локально через меню Plugins → Development.

Тот же принцип «инструмент как продукт», что и с плагином для Figma выше, только платформа — браузер, а не конкретное приложение. Полезно, когда неудобство встречается не в самой Figma, а в повседневном браузинге. Нужно что-то регулярно записывать с экрана, вытаскивать со страницы, замерять или автоматизировать, а готовое расширение из Chrome Web Store либо платное, либо не делает именно то, что нужно.

Как это устроено технически, в общих чертах. Расширение для Chrome — тоже код на JS/TS, но с другой структурой прав и файлов. manifest.json (актуальная сейчас версия — Manifest V3) описывает разрешения (permissions) и точки входа. Background service worker — код, который работает в фоне не постоянно, а по событию, в отличие от старых расширений. Content script — код, который встраивается прямо в открытую страницу и может её читать и менять, например прокручивать. Popup — окно с интерфейсом, которое открывается по клику на иконку расширения в панели браузера. Для записи вкладки нужно явно запросить разрешение tabCapture. Горячие клавиши описываются в разделе commands манифеста, а не ловятся вручную.

Промпт для старта — ровно тот случай, когда задача понятна, а реализация нет:

Хочу расширение для Chrome, которое делает скринкасты сайта, открытого в текущей вкладке. Можно выбрать разрешение и популярные пропорции кадра, выбрать фреймрейт из популярных сейчас вариантов. Можно включить автоскролл с настраиваемой скоростью в пикселях в секунду. Старт и стоп — по хоткеям. Не пиши всё сразу: сначала предложи план из трёх шагов и дождись моего «дальше» после каждого

Одним ответом такое расширение не собрать. В Manifest V3 запись вкладки через tabCapture требует отдельного offscreen-документа, а хоткеи — отдельного раздела commands в манифесте. Разумный порядок такой: сначала запись вкладки в файл, потом настройки разрешения и фреймрейта, потом автоскролл и хоткеи.

Ещё несколько идей на тот же принцип «отталкивайся от неудобства»:

• Расширение, которое вытаскивает все цвета и шрифты, реально используемые на открытой странице, в готовый список. Быстрый конкурентный ресёрч без ручного копания в DevTools.
• Расширение-линейка: замеряет расстояние между двумя точками на живой странице в пикселях. Быстрая альтернатива ручному редлайну макета конкурента.
• Расширение, которое скачивает все изображения со страницы разом в исходном разрешении. Для сбора референсов и мудбордов без охоты за каждой картинкой по отдельности.

Как и с Figma-плагином, публиковать расширение в Chrome Web Store необязательно. Для личного использования установи его локально в режиме разработчика (chrome://extensions → Developer mode → Load unpacked) и просто пользуйся.

Другой частый запрос — реакция на действия пользователя, а не статичная анимация. Карусель, которая тянется пальцем и пружинит на краях. Элементы, которые оживают при скролле или наведении курсора. Библиотеки анимации (Motion, бывший Framer Motion, и GSAP — тема «Библиотеки и ресурсы для вайбкодинга») закрывают большинство таких сценариев, писать анимацию вручную с нуля не придётся. Codrops (та же тема) — хороший источник референсов конкретных интерактивных эффектов. Их можно скормить агенту напрямую как пример желаемого поведения.

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

• Один параметр за раз, а не вся генерация целиком. «Оставь всё как есть, сделай движение на 30% медленнее» вместо «сделай красивее». Иначе непонятно, какое из изменений реально улучшило результат, а какое просто заменило один случайный вариант другим.
• Фиксируй случайность там, где она есть. Если генерация использует seed или похожий параметр случайности, зафиксируй значение при сравнении вариантов. Тогда правки предсказуемы: меняется только то, что попросили, а не всё сразу по новой. Как это выглядит на картинках, показано в теме «Генерация изображений», раздел «Ключевые техники»: с тем же сидом меняется только цвет зонта, с другим — весь кадр.
• Сравнивай до/после рядом, а не по памяти. Скриншот или короткая запись экрана до правки, сохранённая рядом с результатом после, надёжнее, чем память о том, «как было».

Генеративная графика — та область вайбкодинга, где разрыв между «красиво в чате» и «тормозит на телефоне» самый большой. Тяжёлый WebGL-эффект, который плавно крутится на мощном компьютере разработчика, способен просадить частоту кадров или разрядить батарею на среднем смартфоне. Явно проси агента не только собрать эффект, но и проверить его на слабом устройстве или включить упрощённую версию для мобильных. «Работает у меня» — недостаточный критерий готовности.

Собери анимированный mesh-градиент на фон hero-секции: палитра #2D3047, #93B7BE, #FFCF56, медленное органичное перетекание без резких переходов, без фиолетово-синего дефолта

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

Добавь карусель с товарами, которая тянется пальцем на мобильном и пружинит на краях, а на десктопе управляется стрелками

Этот градиент перетекает слишком резко — оставь палитру и композицию как есть, замедли скорость перехода примерно на треть

Добавь в этот WebGL-эффект счётчик FPS в углу экрана и облегчённый режим по флагу ?lite=1 в адресе: меньше частиц, ниже разрешение рендера. Опиши, что именно упрощено

Частоту кадров агент сам не измерит, он выдаст догадку. Мерить будешь ты: в DevTools включи троттлинг процессора и сравни обычный и лёгкий режим по счётчику.