---
title: Навыки AI-агентов для дизайна
description: Десять открытых коллекций Agent Skills для проектирования интерфейсов, визуального ревью, анимации, frontend-разработки и технических иллюстраций.
---

Agent Skill — это каталог с инструкциями `SKILL.md` и, при необходимости, скриптами, справочными материалами и шаблонами. Агент подключает навык к релевантной задаче и получает не новый визуальный редактор, а дополнительный рабочий процесс: как собрать контекст, какие решения принять, какие проверки выполнить и какой артефакт вернуть.

Навык не гарантирует хороший дизайн. Он делает заданный автором подход воспроизводимым, но результат по-прежнему проверяют на соответствие аудитории, задаче, бренду, доступности и ограничениям стека. Общий процесс такой проверки описан в статье [ИИ-дизайн: сервисы и процесс](https://wpcraft.ru/kb/design/ai/tools-and-workflow.md).

## Каталог

| Коллекция | Основная задача | Результат |
| --- | --- | --- |
| [Anthropic Skills](https://wpcraft.ru/kb/design/ai/skills/anthropic-skills.md) | Показать устройство открытого формата и эталонные реализации | Примеры навыков, спецификация и шаблон |
| [UI UX Pro Max](https://wpcraft.ru/kb/design/ai/skills/ui-ux-pro-max.md) | Подобрать визуальное направление по типу продукта | Паттерн, стиль, палитра, типографика и чек-лист |
| [gstack](https://wpcraft.ru/kb/design/ai/skills/gstack.md) | Провести продукт через роли виртуальной инженерной команды | Дизайн-документ, макеты, код, ревью, QA и релиз |
| [Addy Osmani Skills](https://wpcraft.ru/kb/design/ai/skills/addy-osmani-agent-skills.md) | Встроить инженерные quality gates в жизненный цикл | Спецификация, задачи, код, тесты, ревью и запуск |
| [Taste Skill](https://wpcraft.ru/kb/design/ai/skills/taste-skill.md) | Собрать выразительный корпоративный сайт без типовых AI-шаблонов | Страница с арт-дирекцией, медиа и браузерными проверками |
| [Impeccable](https://wpcraft.ru/kb/design/ai/skills/impeccable.md) | Улучшить существующий интерфейс точечными командами | UX- и технический аудит, правки, `PRODUCT.md` и `DESIGN.md` |
| [Emil Kowalski Skills](https://wpcraft.ru/kb/design/ai/skills/emil-kowalski-skills.md) | Улучшить анимацию, жесты и мобильное поведение | Motion-ревью, планы исправлений и правила дизайна |
| [Hallmark](https://wpcraft.ru/kb/design/ai/skills/hallmark.md) | Создать или переработать страницу в заданной визуальной системе | HTML/CSS, тема, редизайн и браузерный lint |
| [Vercel Agent Skills](https://wpcraft.ru/kb/design/ai/skills/vercel-agent-skills.md) | Проверить React/Next.js, UX, доступность и производительность | Правила, ревью, оптимизация и deployment-сценарии |
| [Anatomy](https://wpcraft.ru/kb/design/ai/skills/anatomy.md) | Объяснить механизм через интерактивный объект | Изометрический SVG, HTML или React-компонент |

## Как выбрать

**Нужен собственный навык.** Начните со спецификации и шаблона Anthropic. Сначала сформулируйте узкую задачу и критерии приёмки, затем добавляйте инструкции и скрипты. Не переносите в `SKILL.md` всю документацию: объёмные справочники подключаются по мере необходимости.

**Нужно визуальное направление.** UI UX Pro Max даёт структурированные рекомендации по отрасли и стеку. Taste Skill и Hallmark идут дальше: предлагают законченный, но более авторский процесс сборки страницы. Выбирайте их, когда готовы принять соответствующие ограничения.

**Нужно улучшить текущий продукт.** Impeccable подходит для точечного визуального и UX-ревью. Vercel Agent Skills проверяет прежде всего код интерфейса, семантику и производительность. Emil Kowalski Skills полезен, когда проблема относится к анимации, жестам или поведению на телефоне.

**Нужен управляемый процесс разработки.** Addy Osmani Skills предлагает модульный набор инженерных практик, а gstack — более цельную и категоричную «фабрику» с последовательными ролями и командами. Оба выходят за пределы дизайна.

**Нужно объяснить сложную систему.** Anatomy решает отдельную задачу: строит работающую метафору в виде машины или инструмента. Это не библиотека графиков и не генератор обычных лендингов.

## Общий порядок внедрения

1. Выберите один навык под измеримую задачу, а не устанавливайте всю подборку одновременно.
2. Изучите `SKILL.md`, скрипты, hooks и команды, которые меняют файлы, Git или production.
3. Предпочтите установку в отдельный проект глобальной; зафиксируйте версию для команды после проверки.
4. Зафиксируйте проектные правила в [DESIGN.md](https://wpcraft.ru/kb/design/ai/design-md.md), но не дублируйте в нём чужие справочники целиком.
5. Прогоните навык на маленьком фрагменте и сравните результат с базовым вариантом без него.
6. Проверьте сценарии, клавиатуру, контраст, `prefers-reduced-motion`, адаптивность, производительность и права на медиа.
7. Оставьте в проекте только те правила и автоматические проверки, польза которых подтверждена.

## Материалы и источники

- [Agent Skills: открытая спецификация](https://agentskills.io/)
- [Anthropic Skills](https://github.com/anthropics/skills)
- [Vercel Agent Skills](https://github.com/vercel-labs/agent-skills)