13 инструментов, чтобы ИИ рисовал дизайн не как все

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

Основа — дать ИИ то, что можно скопировать

1. Claude Code. Агент, который собирает интерфейс из кода. Начните с команды /init в папке проекта — она сама пропишет базовые правила по тому, что уже есть в репозитории.

2. Refero Styles. Больше двух тысяч дизайн-систем, описанных языком, понятным ИИ. Открываете стиль, копируете его файл DESIGN.md, вставляете в проект до первого промпта — палитра и шрифты заданы заранее.

3. Awesome DESIGN.md. То же самое, но бесплатно и по названиям реальных брендов: файлы дизайн-систем известных компаний в открытом репозитории. Кладёте файл в корень проекта — и палитры перестают выдумываться на ходу.

Навыки — поставить вкус

4. Impeccable. Открытый навык с полусотней правил, которые ловят халтуру до того, как вы кому-то покажете работу: типовые ИИ-паттерны, нарушенный ритм, слабую типографику. Подробный разбор — в статье Claude Code для дизайна сайтов.

5. taste-skill. Снимает типовой ИИ-вид с готовой раскладки, градиентов и текста. Запускается последним, когда основа уже собрана — он не создаёт дизайн с нуля, а доводит существующий.

6. skillui. Наводите на любой сайт — навык забирает его дизайн-систему и упаковывает в готовый файл, который можно применить к своему проекту.

7. UI UX Pro Max. Свод правил дизайнерского уровня: десятки стилей и палитр, а на выходе — собранная дизайн-система под вашу задачу, а не абстрактный совет.

Финиш — детали, которые чувствуются

8. 21st.dev. Библиотека живых компонентов с готовыми промптами к ним. Особенно выручает в меню, таблицах и формах — местах, где сборка с нуля отнимает больше всего времени.

9. Aceternity UI. Анимированные секции, которые вставляются целиком. Одной такой секции на страницу обычно достаточно — двух уже перебор.

10. Higgsfield. Видео в шапку сайта. Движущийся заголовок работает заметнее статичной картинки, особенно на посадочной странице.

11. Google Fonts. Пара шрифтов, выбранная осознанно — один для заголовков, один для текста — и вписанная в DESIGN.md, вместо того чтобы модель подбирала шрифт заново на каждой странице.

12. MotionSites. Движение описывается словами вместо ручной вёрстки анимации: как должен появляться блок, как реагировать на скролл.

13. Vercel. Отправляете репозиторий — получаете рабочую ссылку. Правило простое: сайт, который никто не может открыть, не закончен.

Общий принцип

У всех тринадцати одна логика: вы не просите ИИ иметь вкус — вы отдаёте ему вкус файлом, до того как он начал работу. Промпт «сделай красиво» не работает никогда. Файл DESIGN.md с конкретной палитрой, шрифтами и примерами компонентов работает почти всегда.

Порядок применения

1. DESIGN.md в проект — до первого промпта.
2. Impeccable — как постоянный навык, включённый всё время работы.
3. taste-skill — в конце, на готовой вёрстке.
4. Компоненты с 21st.dev и Aceternity — точечно, где не хватает готового решения.
5. Vercel — чтобы можно было показать результат по ссылке.

Где ИИ ошибается

Скопированный стиль без адаптации. Готовая дизайн-система из Refero Styles или Awesome DESIGN.md сделана под другой продукт. Палитру и шрифты можно взять как есть, а вот структуру страниц и тон текста нужно подгонять под свою задачу.

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

Компоненты без контекста. Готовый компонент с 21st.dev может не подойти по стилю, если DESIGN.md не задан заранее — тогда каждый следующий блок будет выглядеть по-своему.

Красиво локально, сломано на телефоне. Движение и анимации из MotionSites проверяются на мобильном экране отдельно — многие эффекты там работают иначе или тормозят.

Что дальше

Пошаговый процесс работы с этими инструментами — в статье Claude Code для дизайна сайтов. Про навыки внутри Claude в целом — в статье 10 скиллов Claude.

Ярослав Сажнев — преподаватель ИИ в РАНХиГС, внедрение ИИ в компании. Подробнее об авторе