UI kit для ИИ-агента: ui-kit.md за один разговор

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

Этот гайд даёт промпт, который соберёт файл ui-kit.md: цвета с HEX-кодами и ролями, шрифты и размеры, правила для кнопок, полей, карточек и их состояний. Кладёшь файл в папку проекта, и агент каждый раз собирает интерфейс по одним и тем же правилам.

Что получишь

• 🎨Палитру с ролями

  Цвета по ролям: фон, текст, акцент, граница, ошибка, успех — каждый с HEX-кодом и правилом, где его можно ставить.

• 🔤Шкалу шрифтов и отступов

  Пять-шесть размеров текста и фиксированный шаг отступов, чтобы агент не придумывал 13px и 17px.

• 🧩Компоненты с состояниями

  Кнопка, поле, чекбокс, карточка, бейдж, уведомление, модальное окно, пустое состояние: обычное, наведение, фокус, нажато, неактивно, загрузка, ошибка.

• 🚫Список запретов

  Чего в интерфейсе быть не должно: градиенты, тени на всём подряд, пятый оттенок серого.

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

1. 1Собери 2–3 референса

   Скриншоты сайтов или приложений, которые тебе нравятся по ощущению. Если есть логотип или фирменный цвет, тоже приготовь.

2. 2Отправь шаг 1 и ответь на вопросы

   ИИ спросит про продукт, аудиторию, стек и настроение. Отвечай коротко, «не знаю» тоже ответ.

3. 3Отправь шаг 2 и получи файл

   Ответ целиком сохрани в корень проекта как ui-kit.md.

4. 4Проверь на одном экране

   Попроси агента собрать экран входа строго по ui-kit.md и посмотри, совпадает ли с тем, что ты хотел.

5. 5Пропиши ссылку в правилах агента

   В CLAUDE.md или правилах Cursor: «Любой интерфейс собирай только по ui-kit.md».

Если у тебя уже есть набор цветов и шрифтов, но нет порядка, начни с гайда про мини-дизайн-систему: он про то, как навести порядок в существующем. Этот промпт собирает кит с нуля.

Рядом по теме: Аудит визуального стиля по скриншотам, Дизайн-бриф лендинга: design-brief.md для агента, Рекламные обложки с ИИ: от брифа к серии в одном стиле, статья «Нейросети для работы по 20 профессиям» и Анимация интерфейса: шаблон промпта и карта приёмов (бесплатно).

Что дальше

• Cursor Rules: UI без нейрослопа — правила для агента, чтобы интерфейс не выглядел как у всех.
• Визуал по референсу с ИИ — как разобрать понравившийся сайт на конкретные параметры.
• Если хочешь пройти путь от идеи до первого работающего экрана с агентом целиком, есть курс Первый экран за 990 ₽.