Чтобы не выглядело как поделка нейросети за 5 минут: 6 дизайн-скиллов для AI-агентов
При вайбкодинге интерфейсы получаются рабочими, но часто выглядят как близнецы на стандартном Tailwind. Чтобы прототипы и пет-проекты не выдавали с первого взгляда генерацию, агенту нужно задать жесткие дизайн-рамки.
Наткнулся в сети на толковую подборку дизайн-ресурсов и скиллов для AI-агентов, немного пересобрал ее и дополнил. Забирайте в работу, если нужно подтянуть визуал без дизайнера:
1. Frontend Design от Anthropic Официальный скилл от создателей Claude. Задает агенту базовые принципы современной верстки, визуальной иерархии и аккуратной работы с пространством, чтобы на выходе получался чистый продакшн-интерфейс, а не сырой черновик.
Папка скилла: https://github.com/anthropics/skills/tree/main/skills/frontend-design
Прямая ссылка на инструкцию: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
2. Aceternity UI Библиотека готовых интерактивных компонентов: карточки, сложные фоны, карусели и текстовые эффекты. Не нужно писать сложный фронтенд с нуля: выбираете нужный блок и просите агента встроить и адаптировать его под ваш стек. Есть бесплатная база и Pro-версия.
Ссылка: https://ui.aceternity.com/
3. Impeccable Скилл для финальной полировки и дизайн-ревью. Помогает вычистить визуальный шум: выровнять поехавшие отступы, настроить типографику, сбалансировать сетку и убрать лишние элементы, которыми любят грешить модели.
Ссылка: https://github.com/pbakaus/impeccable
4. Скиллы Emil Kowalski Инструмент от дизайн-инженера Vercel для работы с микроанимациями. Учит агента делать переходы, появление окон и отклик кнопок плавными и физически естественными. Можно использовать для аудита уже готового интерфейса: агент проверит тайминги и предложит правки.
Ссылка: https://emilkowal.ski/skill
5. UI UX Pro Max Стартовый набор арт-директора для вашего агента. Содержит готовые дизайн-системы, цветовые палитры и проверенные шрифтовые пары. Отлично подходит на этапе старта, когда функционал понятен, а визуальной концепции еще нет.
Ссылка: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
6. Design Resources for Developers Огромный курируемый репозиторий со шрифтами, иконками, иллюстрациями, UI-китами и референсами. Экономит часы на поиске ассетов: можно натравить агента на список, чтобы он сам подобрал нужную графику под задачу.
Ссылка: https://github.com/bradtraversy/design-resources-for-developers
Как встроить в рабочий процесс Скармливаете нужную ссылку вашему Claude Code или Codex и просите изучить документацию. Пункты 1, 3, 4 и 5 подключаются напрямую как системные скиллы (SKILL.md). Из шестого пункта просите агента подобрать референсы, а из Aceternity UI забрать конкретный код компонента.
Дальше ставите задачу как обычному фронтендеру:
«Изучи скилл UI UX Pro Max и предложи три варианта цветовой схемы и шрифтов для B2B-дашборда. Контекст проекта: …»
«Возьми вот эту карточку из Aceternity UI и адаптируй ее под стиль нашего лендинга».
«Прогони текущую верстку страницы через правила Impeccable и исправь косяки с отступами».
В этом посте были ссылки, но мы их удалили по правилам Сетки
