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

Да, сейчас можно собрать сайт за вечер через агента, и он даже будет работать. Кнопки нажимаются, на телефоне ничего не разъезжается, деплой прошел. Но ваши клиенты, скорее всего, будут судить по обложке, и важно, чтобы она не была очередным ии-слопом. Агент тут не виноват. Ему никто не сказал, как должно выглядеть, и он честно собрал среднее по своим гайдлайнам. Ниже разбираю, откуда берется вкус, которого у него нет. Файл с дизайн-токенами, референсы, два десятка сервисов и десяток скиллов, которые проверяют результат вместо вас.

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

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

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

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

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

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

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

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

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

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

• 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-сервер для агентов.

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

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

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

Скилл это папка с инструкциями, которую агент подхватывает сам, когда доходит до соответствующей задачи. Промпт живет одну сессию. Скилл живет в системе, работает в любом проекте и вмещает то, что в одно сообщение не поместится. Сотни правил, таблицы палитр, шрифтовые пары, детекторы типовых ошибок. Как они устроены и что проверять перед установкой чужого, разобрано в гайде про скиллы для 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. Соседняя полка, превращает агента в видеостудию с ресерчем, сценарием, озвучкой, генерацией ассетов и монтажом, с точками ручного подтверждения.

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

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

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

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

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

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

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

• Своего вкуса у агента нет. Он исполняет чужой, если тот записан конкретно.
• Три источника вкуса. Показать референс, записать токены в файл, поставить скилл-ревизор.
• DESIGN.md в корне проекта весит одну страницу и действует на весь сайт. Раздел с запретами в нем важнее раздела с цветами.
• Токены снимаются с любого сайта за минуту через designmd.supply или Neuform. Дальше правятся под себя.
• Скриншот референса точнее трех абзацев пожеланий. Mobbin показывает реальные экраны, Dribbble задает настроение.
• Сам себя агент не отревизует. Impeccable и Better Interface разбирают готовый экран и возвращают список замечаний.
• Один яркий эффект на страницу работает, три превращают ее в витрину библиотеки.
• Перед показом людям смотрим контраст, ширину 375 пикселей, состояния фокуса, единый радиус, честные тексты кнопок, легкие картинки.
• Figma для сайта и небольшого приложения обычно не нужна. Правка в коде занимает столько же времени и сразу видна в браузере на реальных данных.

Инструменты и скиллы отвечают на вопрос, чем делать. Насмотренность и умение сформулировать задачу нарабатываются практикой. На кэмпе Точки над ИИ мы собираем сайт, бота и базу знаний за четыре недели, а визуальную часть разбираем подробно.