🎨 Что это
Design System Architect — это skill-ассистент для работы с дизайн-системами на всех этапах: от генерации с нуля до ревью пул-реквестов, затрагивающих стили. Он помогает командам поддерживать визуальную консистентность, автоматизировать аудит UI и выявлять «AI slop» — шаблонные, безвкусные паттерны, сгенерированные нейросетями.
Skill особенно полезен фронтенд-разработчикам, дизайнерам и техлидам, которые хотят внедрить порядок в стилевую часть проекта без ручного перебора CSS или Tailwind.
⚙️ Как работает
Skill работает в трёх основных режимах, каждый запускается своей командой.
📐 Режим 1: Генерация дизайн-системы (/design-system generate)
Анализирует существующую кодовую базу (CSS, Tailwind, styled-components) и на основе найденных паттернов создаёт целостную дизайн-систему.
Основные шаги:
- Сканирование — собирает используемые цвета, типографику, отступы, скругления, тени и брейкпоинты.
- Исследование конкурентов — через browser MCP анализирует 3 сайта в той же нише для бенчмаркинга.
- Формирование токенов — создаёт
design-tokens.json и CSS-кастомные свойства (--color-primary, --space-md и т.п.).
- Документирование — генерирует
DESIGN.md с обоснованием каждого решения.
- Превью — создаёт самодостаточный
design-preview.html для демонстрации всей системы.
Пример команды:
/design-system generate --style minimal --palette earth-tones
🔍 Режим 2: Визуальный аудит (/design-system audit)
Оценивает существующий UI по 10 критериям, каждый от 0 до 10, с конкретными примерами и указанием файла и строки для исправления.
Критерии:
- Цветовая консистентность — используются ли заданные токены или случайные hex-значения.
- Иерархия типографики — соблюдается ли размерный ряд
h1 > h2 > h3 > body > caption.
- Ритм отступов — применяется ли единая шкала (4px/8px/16px) или всё вразнобой.
- Консистентность компонентов — похожи ли одинаковые по смыслу элементы (кнопки, карточки).
- Адаптивность — не ломается ли вёрстка на брейкпоинтах.
- Тёмная тема — реализована полностью или частично.
- Анимация — осмысленная или хаотичная.
- Доступность — контрастность, фокус-состояния, размер кликабельных элементов.
- Информационная плотность — перегруженность или чистота.
- Полировка — ховеры, переходы, состояния загрузки и пустые состояния.
Пример команды:
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
🧐 Режим 3: AI Slop Detection (/design-system slop-check)
Выявляет типичные «слипшиеся» паттерны, которые часто генерируют нейросети для демо:
- бессмысленные градиенты на каждом блоке
- «стеклянные» карточки с размытием без функциональности
- чрезмерное скругление углов
- анимации при скролле ради анимации
- стандартный sans-serif шрифт без характера
Skill подсвечивает такие места и предлагает альтернативы.
🚀 Когда использовать
- На старте проекта — чтобы сразу заложить единую дизайн-систему и не плодить хаос.
- При аудите существующего кода — когда UI кажется «грязным», но непонятно, что именно не так. Skill даст объективные баллы и указания на конкретные строки.
- Перед редизайном — чтобы понять текущее состояние и не потерять уже работающие паттерны.
- На ревью PR со стилями — быстро проверить, не нарушает ли новый код визуальную консистентность.
- Для ретроспективы качества — полезно показывать метрики аудита стейкхолдерам («наш UI держит 8/10 по консистентности»).
💡 Важно знать
- Режим 1 и 2 требуют доступа к кодовой базе — skill сам сканирует файлы через контекст или по URL.
- Исследование конкурентов использует browser MCP: нужно, чтобы skill имел доступ к браузеру в окружении.
- Токены дизайн-системы генерируются в формате JSON и CSS-переменных — это совместимо с большинством современных фреймворков (React, Vue, Svelte, Tailwind).
- Флаг
--pages в режиме аудита позволяет указать несколько страниц для сканирования (например, --pages / /pricing /docs).
- AI Slop Check не удаляет паттерны, а только сообщает о них — решение об изменении остаётся за командой.
Комментарии
Комментариев пока нет. Будьте первым.