Как сделать красивый дизайн с AI-агентом

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

Модель выдает среднее по тому, что видела. Спросите ее про интерфейс без уточнений, и она соберет самые частые решения последних лет: фиолетово-синий градиент в шапке, шрифт Inter, три карточки с иконками в ряд, скругление восемь пикселей, эмодзи в подзаголовках и кнопка со словом Начать. По отдельности каждое решение нормальное. Вместе они складываются в внешность, которую человек уже видел сотню раз и научился пролистывать.

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

Три способа работают вместе. Референс задает направление, токены закрепляют его в файле, ревизор ловит то, что агент забыл. Схема нарисована кодом прямо на странице.

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

---

Шаг 1. Референс: показать вместо того, чтобы описывать

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

Где брать примеры:

• Mobbin. Библиотека реальных скриншотов мобильных и веб-интерфейсов: тысячи приложений, разложенных по экранам и пользовательским сценариям. Самый полезный источник, когда нужен конкретный экран: онбординг, пустое состояние, страница оплаты.
• Dribbble. Классическая галерея дизайнеров. Держите в голове, что там много концептов, которые никогда не работали в проде: берите оттуда настроение и цвет, проверяйте реализуемость.
• 21st.dev. Реестр UI-компонентов и агентов с SDK, MCP и песочницами. Здесь пример сразу приходит с кодом.
• CodePen. Миллионы публичных сниппетов на HTML, CSS и JS. Удобно, когда нужен один конкретный эффект и хочется посмотреть, как он устроен внутри.

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

---

Шаг 2. Дизайн-токены: один файл, который держит весь проект

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

Файл кладут в корень проекта и называют DESIGN.md. Агент читает его сам вместе с остальными файлами и держится указанного. Одна страница текста действует на весь сайт и переживает десятки сессий, тогда как просьба в промпте забывается на следующем экране.

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

Откуда взять токены, если их нет

Собирать такой файл руками долго. Три сервиса делают это за минуту:

• designmd.supply. Вставляете адрес любого сайта и получаете готовый DESIGN.md с его цветами, шрифтами, отступами и компонентами. Самый быстрый способ ответить на вопрос хочу как вот тут.
• Neuform. Больше 400 кураторских дизайн-систем реальных сайтов. Можно скачать HTML целиком или забрать только файл DESIGN.md, чтобы задать стиль проекту.
• getdesign.md. Каталог дизайн-систем известных продуктов, который одной командой кладет design.md с токенами и UI-паттернами прямо в проект Cursor или другого агента.

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

---

Шаг 3. Инструменты, которые сразу отдают верстку

Когда направление задано, нужен инструмент, который превращает описание или скриншот в живой экран. Здесь два лагеря. Первый работает в браузере и показывает результат сразу, второй живет внутри вашего кодинг-агента.

• Claude Design. Инструмент Anthropic: описываете идею и получаете код компонента или целого экрана. Хорошо принимает загруженный DESIGN.md и держится его.
• Aura. Конструктор интерфейсов и сайтов: по промпту или по скриншоту собирает дизайн и отдает HTML с Tailwind, а также файл для Figma. Внутри дизайн-системы, больше 300 компонентов и собственные скиллы для агентов.
• 21st.dev. Тот же реестр, теперь в роли поставщика готовых блоков: подключается к агенту по MCP, и он берет компоненты оттуда.
• CodePen. Песочница для быстрого прототипа, когда проверить идею надо за пять минут и без проекта.

Разница между браузерным конструктором и агентом в терминале та же, что между редактором и кодинг-агентом вообще: первый нагляднее, второй быстрее на объеме. Полная раскладка инструментов по задачам собрана в каталоге сервисов для вайбкодинга.

Компоненты и эффекты, которые копируются целиком

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

• Canvas UI. Открытая библиотека WebGL-эффектов поверх живой верстки: больше 30 компонентов, среди них частицы, стекло, жидкость и VHS. Есть версии для React, Vue, Svelte и чистого JS.
• Originkit. Большая бесплатная библиотека анимированных компонентов: копируете код, вставляете в Framer или подключаете к агенту через MCP.
• Transitions.dev. Готовые переходы: раскрытие карточек, модальные окна, выпадающие меню, смена иконок. Забирается как CSS, как React-код или ставится скиллом прямо в проект.
• MotionSites. Библиотека премиум-промптов для анимированных первых экранов: копируете промпт в билдер и получаете лендинг с моушен-эффектами.
• Border Beam. Легкий React-компонент: светящийся луч бежит по рамке блока. Несколько размеров, цветов и тем.
• Liquid Metal. WebGL-шейдер жидкого металла для кнопок: три пресета и один слайдер, мгновенный хром.
• icons0.dev. Поиск по 200 000 иконок из 150 наборов, включая Lucide и Font Awesome. Ставится одной командой через shadcn, есть MCP-сервер для агентов.

Совет по эффектам простой: один яркий эффект на страницу работает, три превращают сайт в ярмарку. Жидкий металл на главной кнопке запоминается. Жидкий металл на каждом заголовке выглядит как демонстрация библиотеки.

Интерфейс для самого AI

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

• AIcss. Компоненты AI-чата на чистом CSS без Tailwind: состояния размышления, вызовы инструментов, стриминг, цитаты и таблицы. React, Vue и Svelte.
• Beautiful UI. Семнадцать вылизанных примитивов: поле ввода чата, карточки подтверждения от человека, чипы инструментов, диффы и таблицы.
• Thinking Orbs. Точечные орбы-индикаторы состояния агента: шесть выверенных состояний, два размера, автоматическая светлая и темная тема.

---

Шаг 4. Скиллы: вкус, встроенный в агента

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

В нашей мастерской скиллов раздел визуала выглядит так.

Генерируют и собирают

• Frontend Design. Официальный скилл Anthropic для production-готовых интерфейсов. Прямо внутри написано, что делать, чтобы результат не выглядел типовой AI-эстетикой. Первый кандидат на установку.
• UI/UX Pro Max. Дизайн-интеллект для Claude Code: под конкретный проект собирает дизайн-систему из 84 UI-стилей, 192 палитр и 74 шрифтовых пар с отраслевыми правилами. Полезен, когда своих референсов нет вообще.
• AI Website Cloner. Реверс-инжиниринг чужого сайта и воссоздание его структуры через Claude Code. Инструмент мощный и требует ответственности: смотрите оговорку выше про чужую собственность.
• designmd.supply. Тот же сервис из шага 2, только исходниками: открытое приложение на Next.js, которое ставится локально и превращает любой сайт в DESIGN.md с цветами, шрифтами, компонентами, правилами и анти-паттернами.

Проверяют готовое

Самая недооцененная категория. Сгенерировать экран агент может и без помощи, а вот честно раскритиковать собственную работу сам он не умеет.

• Impeccable. Дизайн-язык для агентов: команды audit, polish и critique плюс 58 детекторов анти-паттернов, каждый из которых ловит конкретный признак типового AI-шаблона.
• Better Interface. Набор из семи скиллов Jakub Krehel: UI-детали вроде радиусов и микро-анимаций, типографика, цвет в OKLCH, доступность, раскладка и UX-тексты. Шесть работают фоном, седьмой вызывается руками и прогоняет экран через все сразу. Есть быстрый режим и подробный.

Такой разбор занимает минуту и ловит вещи, которые глаз пропускает на десятом часу работы. Правки применяются выборочно: решение остается за вами.

Делают понятное из сложного

• Visual Explainer. Объясняет сложные темы аккуратными HTML-страницами с CSS-паттернами. Удобно для обучающих материалов и внутренних инструкций.
• Effective HTML. Собирает самостоятельные HTML-артефакты по проверенным паттернам: диаграммы, планы, документы. Один файл, который открывается где угодно.
• Презентации на RevealJS. Слайды по текстовому запросу. Про то, как это соотносится с генераторами презентаций и своей платформой, есть отдельный гайд.
• OpenMontage. Соседняя полка: превращает агента в видеостудию с ресерчем, сценарием, озвучкой, генерацией ассетов и монтажом, с точками ручного подтверждения.

---

Шаг 5. Правки словами по живой странице

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

• Agentation. Тыкаете в элементы прямо на странице и пишете замечание. На выходе получаете бриф для кодинг-агента с CSS-селекторами, путями к файлам, деревом компонентов и стилями. Есть MCP, для личного использования бесплатно.

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

---

Порядок работы целиком

Собранный вместе процесс выглядит так и почти не меняется от проекта к проекту.

Первые два шага делаются один раз на проект, последние два повторяются на каждом экране: ревизия возвращает список замечаний, вы принимаете нужные и отправляете агента на второй круг. Именно этот цикл участники проходят на программе AI + визуал.

Чек-лист приемки глазами

Что смотреть перед тем, как показать результат людям:

• Контраст. Серый текст на светлом фоне читается на вашем мониторе и пропадает на телефоне под солнцем.
• Ширина телефона. Откройте страницу на 375 пикселях. Таблицы и длинные заголовки ломаются первыми.
• Состояния. У кнопок и полей должны быть видимые наведение и фокус. Агент про них забывает чаще всего.
• Единство. Один радиус, одна тень, один набор отступов на всю страницу.
• Тексты кнопок. Кнопка обещает то, что произойдет после нажатия.
• Вес картинок. Десятки килобайт вместо мегабайтов. Тяжелые страницы проседают в поиске, про это есть гайд по оптимизации сайта под AI-поиск.

---

Задача и чем делать: шпаргалка

Задача	Чем делать
Найти референс интерфейса	Mobbin, Dribbble
Снять токены с чужого сайта	designmd.supply, Neuform
Положить дизайн-систему в проект	getdesign.md
Собрать экран по описанию	Claude Design, Aura
Взять готовый компонент	21st.dev, Originkit
Добавить эффект или анимацию	Canvas UI, Transitions.dev
Найти иконки	icons0.dev
Сверстать интерфейс AI-чата	AIcss, Beautiful UI
Проверить готовый экран	Impeccable, Better Interface
Задать вкус агенту навсегда	Frontend Design, UI/UX Pro Max
Показать правки пальцем	Agentation

---

Частые ошибки

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

Держать правила в переписке. Сказанное в чате живет до конца сессии. Записанное в DESIGN.md живет столько, сколько живет проект.

Собирать все сразу. Агент, которому дали десять экранов одним заданием, выдает десять разных решений. Один экран за раз, дальше по образцу.

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

Ставить эффекты пачками. Библиотеки соблазняют, страница превращается в витрину возможностей и перестает читаться.

---

Частые вопросы

Почему сайты, собранные нейросетью, похожи друг на друга?

Модель выдает среднее по тому, что видела. Без внешних ограничений она берет самые частые решения последних лет: фиолетово-синий градиент, шрифт Inter, три карточки с иконками в ряд, скругление 8 пикселей, эмодзи в заголовках. Каждое решение по отдельности нормальное, вместе они складываются в узнаваемую внешность, которую читатель встречал уже сотню раз. Лечится это тем, что вы даете агенту внешний источник вкуса: референс, файл с дизайн-токенами и скилл-ревизор.

Что такое дизайн-токены и зачем класть их в отдельный файл?

Токены это конкретные значения оформления: цвета фона и акцента, шрифты и их насыщенность, размер базового текста, высота строки, шаг отступов, радиус карточек, характер теней и длительность анимаций. Записанные в файл DESIGN.md в корне проекта, они перестают быть предметом фантазии агента. Один такой файл действует на все страницы сразу и переживает десятки сессий, тогда как просьба в промпте забывается на следующем экране.

Можно ли скопировать дизайн чужого сайта?

Технически сервисы вроде designmd.supply и Neuform снимают с любого сайта палитру, шрифты, отступы и компоненты. Юридически заимствовать стоит систему решений: сетку, ритм отступов, характер типографики, принцип работы с цветом. Логотип, фирменный шрифт с платной лицензией, иллюстрации и фотографии остаются чужой собственностью. Один в один скопированный лендинг конкурента это плохая идея и с точки зрения права, и с точки зрения бизнеса.

Чем скилл для дизайна отличается от промпта про дизайн?

Промпт живет одну сессию и действует на один экран. Скилл лежит в системе папкой с инструкциями, работает в любом проекте и подхватывается агентом автоматически, когда тот берется за верстку или цвет. Внутри скилла обычно лежит то, что в промпт не поместится: сотни правил, таблицы палитр, шрифтовые пары, детекторы типовых ошибок. Frontend Design от Anthropic, Impeccable и Better Interface устроены именно так.

С чего начать, если дизайнерского опыта нет совсем?

С двух шагов. Первый: найдите три сайта, которые вам нравятся, и прогоните один из них через designmd.supply, чтобы получить готовый DESIGN.md с его палитрой и типографикой. Положите файл в корень проекта. Второй: поставьте один скилл-ревизор, например Impeccable или Better Interface, и после каждой сборки просите агента прогнать экран через него. Этого хватает, чтобы уйти от типового вида без единого часа обучения дизайну.

Нужна ли Figma, если агент сразу отдает код?

Для сайта и небольшого приложения обычно нет. Правка в коде занимает столько же времени, сколько правка макета, и сразу видна в браузере на реальных данных. Figma остается нужна там, где над проектом работает команда дизайнеров, есть общая библиотека компонентов и макет служит документом согласования. Aura умеет отдавать оба выхода сразу: и верстку, и файл для Figma.

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

Глазами по короткому списку: контраст текста к фону, читаемость на ширине телефона, видимое состояние фокуса и наведения у кнопок, единый радиус и одинаковые тени по всей странице, честные тексты кнопок, вес картинок в десятках килобайт. Скиллы Impeccable и Better Interface проверяют примерно это же автоматически и возвращают список замечаний с местами в коде.