AI ENGINEERING · DESIGN CLUSTER

AI Engineering Skills

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

Это не «Карта способностей» (/skills). Здесь — внешние Skill-пакеты для агента: install → invoke → маршрут.

Контур AI-дизайна Как правильно писать Дизайн-система

Сначала язык продукта

Skills усиливают агента. Дизайн-система задаёт токены и правила, которые агент не должен ломать. Без DESIGN.md даже Impeccable полирует случайность.

Открыть дизайн-систему

Зачем специалисту усиливать агента

Без Skill агент тянет «средний» UI из обучающей выборки. Skill — это сжатая экспертиза: правила, антипаттерны, команды. Специалист не рисует пиксель за пикселем — он ставит усилитель и пишет точный заказ.

Где взять

Официальные и проверенные репозитории — карточки ниже со ссылкой и install.

Как поставить

skills CLI / Cursor Skills / папка .cursor/skills — команда на каждой карточке.

Как писать

Skill + scope + запреты + один шаг маршрута. Разбор — в блоке «Как правильно писать».

Контур AI-дизайна

Полный путь специалиста: сначала правила продукта, потом усилители агента, потом паттерн экрана.

0
Дизайн-система / DESIGN.mdЯзык продукта
Токены, запреты, компоненты. Без этого Skills усиливают случайность.
1
Frontend DesignНаправление
Выбрать эстетику и собрать каркас на токенах.
2
taste-skillВкус
Иерархия и характер внутри существующих правил.
3
Web Design GuidelinesНормы
Audit a11y/UX — точечные фиксы.
4
ImpeccablePolish
Доводка craft; DESIGN.md не переписывать.
5
UI-Атлас (по желанию)Паттерн экрана
Готовый паттерн секции, если нужен конкретный блок.

Шаблон DESIGN.md

Файл, который агент читает до кода. Skills (особенно Impeccable) усиливают процесс — но источник правды здесь. Положите в корень проекта и допишите свои токены.

# DESIGN.md — правила визуала для AI-агента

## Продукт
- Название: [имя]
- Для кого: [аудитория]
- Тип экранов: brand (маркетинг) | product (приложение) | оба

## Направление
- Эстетика: [editorial / product-minimal / bold-marketing / …]
- Характер в одном предложении: […]

## Токены (источник правды)
- Цвета: accent […], bg […], text […], border […]
- Шрифты: display […], body […] — запрещены: Inter, Roboto, Arial, Space Grotesk
- Отступы: xs/s/m/l/xl как в CSS-переменных проекта
- Радиусы: […]
- Файл токенов в коде: [например globals.css / tokens.css]

## Компоненты
- Использовать существующие: [Button, Card, Input, …]
- Не плодить новые атомы без причины

## Запреты (anti-slop)
- Нет фиолетового градиента «из коробки»
- Нет сетки из 4 одинаковых feature-карточек как hero
- Нет серого текста на цветном фоне
- Нет карточек внутри карточек без нужды
- Один визуальный якорь на экран

## Как агенту работать
1. Прочитай этот файл до кода.
2. Не выдумывай hex вне токенов.
3. Сначала план (5 буллетов), потом реализация.
4. Skills (Frontend Design / taste / guidelines / Impeccable) усиливают процесс, но не отменяют эти правила.

Гайд по токенам →

Как правильно писать

Самое важное: Skill не сработает от фразы «сделай красиво». Пишите как инженерный заказ.

Сначала язык продукта

Токены и DESIGN.md важнее Skill. Усилитель без правил = красивый хаос.

Назовите Skill и роль

Не «улучши UI». А: «Подключи Frontend Design → зафиксируй направление → потом код».

Дайте scope

Экран, файл, маршрут. Без границы агент перепишет весь продукт.

Зафиксируйте запреты

Inter, фиолетовый градиент, карточки-в-карточках — явный stop-list сильнее «сделай красиво».

Разделите шаги маршрута

Сборка ≠ вкус ≠ audit ≠ polish. Один Skill — одна работа за проход.

ШАБЛОН ЗАКАЗА АГЕНТУ

Подключи Skill: [название]
Роль шага: [направление | вкус | audit | polish]
Экран / файлы: [scope]
Продукт и аудитория: […]
Дизайн-система: читай DESIGN.md — не выдумывай токены
Направление / режим: […]
Запреты: [Inter, фиолетовый градиент, …]
Стек: […]
Сначала план в 5 буллетах, потом код. Не выходи за scope.

Skill Graph · Design

WEB DESIGN

↓

taste-skill

Guidelines

↓

Frontend Design

↓

IMPLEMENTATION

↓

Impeccable

↓

POLISH

Граф = роли Skills. Порядок для задачи — в Recipe ниже.

Design-кластер · 4 Skills

FRONTENDDESIGN

Frontend Design

by Anthropic

Базовый Skill: заставляет агента выбрать эстетическое направление до кода и уйти от «AI-slop» интерфейса.

Открыть Skill

DESIGNTASTE

taste-skill

by Leonxlnx / community

Слой вкуса: композиция, типографика, плотность, «anti-slop» как инженерная задача, а не vibes.

Открыть Skill

DESIGNAUDIT

Web Design Guidelines

by Vercel

Quality gate: проверка UI по Web Interface Guidelines (a11y, UX, performance) — не генератор дизайна.

Craft-слой: команды audit/polish/critique и антипаттерны. Доводит UI до production-качества поверх baseline.

Открыть Skill

Skill Stack

Premium Landing Stack

Комплект из четырёх Design Skills: направление → вкус → нормы → polish. Один набор под сильный landing/SaaS UI.

Frontend Design taste-skill Web Design Guidelines Impeccable

Skill Recipe

Создать качественный SaaS-интерфейс

Цель: Экран или лендинг с характером, без AI-slop, прошедший norms-check и финальный polish.

1. Frontend Design — Направление и сборка. Зафиксировать эстетику, затем сверстать каркас.
2. taste-skill — Вкус и композиция. Усилить иерархию и характер без новых секций.
3. Web Design Guidelines — Нормы. Audit findings → точечные фиксы a11y/UX.
4. Impeccable — Polish. Режим brand или product → audit → polish.

ROUTE PROMPT · скопируй в агент

Ты работаешь по AI Engineering Route ProektMap (Premium Landing Stack).

Задача: [SaaS экран / лендинг — опиши]
Стек: [Next.js / …]
Дизайн-система: читай DESIGN.md. Соблюдай токены — не выдумывай цвета/радиусы/шрифты вне системы.

Порядок (не перескакивай):
0) Если DESIGN.md нет — сначала предложи минимальный черновик токенов (не полный редизайн).
1) Frontend Design (Anthropic) — выбери направление, запрети Inter/фиолетовый градиент/карточный hero, собери UI на токенах.
2) taste-skill — усили вкус и композицию текущего экрана, без новых секций, внутри токенов.
3) web-design-guidelines (Vercel) — только audit + минимальные фиксы критичных findings.
4) Impeccable — режим [brand|product], /impeccable polish, без смены продуктовой логики и без подмены палитры.

После каждого шага: 3 буллета «что сделал» и что проверять глазами.
В конце: короткий before→after по визуальному качеству.

Дизайн-система →← Инженерия агентов UI-Атлас →Решение: без AI-скуфа →Карта способностей →anthropics/skills