UI-скиллы Claude Code против одинакового дизайна

UI-скиллы Claude Code - это набор из семи агентских скиллов от Jakub Krehel (сайт interfaces.dev), который лечит главную болезнь ИИ-дизайна: одинаковость. По умолчанию любая нейросеть рисует фиолетовый градиент, мягкую тень на каждой карточке, эмодзи в интерфейсе и бейджи - и это палится мгновенно. Скиллы навязывают агенту конкретные правила: концентрические радиусы, оптическое выравнивание, OKLCH-палитры, verb-first кнопки. Ставятся одной командой, работают в Claude Code и Codex. Ниже - что внутри, как поставить и что реально меняется.

Репозиторий - github.com/jakubkrehel/skills. На момент публикации у него 3127 звёзд, лицензия MIT, автор - Jakub Krehel из interfaces.dev.

Почему нейросети рисуют одинаковый интерфейс

Любая LLM, когда её просят "сделай красиво", тянется к тому, что чаще всего встречала на трейне. Это фиолетово-синие градиенты, мягкие box-shadow на каждой карточке, эмодзи в подписях кнопок, бейджи "NEW" и "BETA", закруглённые уголки везде одинакового радиуса. Проблема даже не в том, что это некрасиво - это неотличимо. Открываешь два разных проекта, сгенерированных агентом, и не понимаешь, где какой.

Вторая болячка - половина ощущения дешёвого продукта живёт не в вёрстке, а в текстах. "Oops! Something went wrong." вместо конкретной ошибки. "OK" и "Cancel" на действии, которое удаляет проект. Placeholder-текст, который повторяет лейбл. Агент не думает об этом сам - ему нужно прямо сказать.

Что такое UI-скиллы и как это работает

Screen skill в Claude Code - это папка с файлом SKILL.md внутри, в которой лежат правила и примеры под конкретную тему. Когда ты в диалоге пишешь про интерфейс, кнопки, ошибки или анимации, агент сам подгружает нужный скилл и начинает следовать его правилам. Никаких ручных настроек - триггер на ключевые слова прописан в самом скилле.

Набор jakubkrehel/skills устроен так: шесть тематических скиллов + один скилл-оркестратор. Оркестратор better-interface вызывают руками командой /better-interface, и он координирует остальные шесть под конкретный ревью экрана или флоу. Остальные шесть подхватываются агентом автоматически по контексту.

Семь скиллов: что за что отвечает

Оркестратор нужен, когда лень возиться - /better-interface full checkout flow, и он сам прогоняет все нужные скиллы по чекаут-флоу. Остальные подхватываются, когда ты просто пишешь "поправь ошибки в форме" или "сделай кнопки поживее".

Как поставить UI-скиллы в Claude Code

Два способа: через плагин-маркетплейс или через CLI. Плагин ставит все семь скиллов пачкой и сам обновляет их при выходе новых версий. Вставь эти две команды в Claude Code:

/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces

Через CLI - если нужен контроль, какие скиллы поставить. Одной командой ставится вся пачка:

npx skills add jakubkrehel/skills --skill '*'

Либо выборочно - вместо '*' подставляешь имя скилла, например --skill better-writing. CLI работает и в Claude Code, и в Codex, и в других агентах.

Важный нюанс с плагином: имена префиксятся, вызов будет /interfaces:better-interface. При установке через CLI префикса нет, вызов - /better-interface. Просто помни, какой способ ты выбрал.

Как использовать: готовые запросы для Claude Code

Самый частый сценарий - прогнать готовый экран через ревью. В Claude Code:

/better-interface full checkout flow

Вместо checkout flow подставляешь свой экран или фичу. Есть быстрый режим - вместо full пишешь quick, получаешь короткий ревью без разбора мелочей.

Если делаешь конкретную задачу и хочешь, чтобы один скилл сработал прицельно, вызывай его напрямую:

/better-writing проверь все тексты на кнопках и в ошибках в форме регистрации, найди blame-язык и "OK/Cancel" на консequences

/better-ui пройдись по карточкам товаров, проверь концентрические радиусы, убери tinted-outline на картинках, замени shadow-md на явные box-shadow слои

Остальные четыре скилла (typography, colors, accessibility, layout) чаще всего не вызывают руками - агент сам подхватывает их, когда видит соответствующие ключевые слова в запросе.

Что реально меняется в интерфейсе

Это не общие лозунги про "хороший дизайн". В скиллах прописаны конкретные правила, и агент их выполняет. Несколько примеров того, что применяется автоматически.

Радиусы становятся концентрическими. Внешний радиус = внутренний + отступ. Самая частая штука, из-за которой интерфейс выглядит криво, - вложенные элементы с одинаковым радиусом. Скилл better-ui не даст этого сделать.

Границы и тени разделяются по смыслу. Тени - для elevation (карточка над фоном), границы - для структуры (разделители, focus, selected). Дефолтный ИИ ляпает border 1px везде подряд - скилл заставляет выбирать одно или другое.

Контуры на изображениях становятся честными. Не серые near-black, а oklch(0 0 0 / 0.1) в светлой теме и oklch(1 0 0 / 0.1) в тёмной. Tinted-серые контуры на картинках читаются как грязь по краю - скилл прямо это запрещает.

Кнопки становятся verb-first. Delete project вместо Yes, Save draft вместо OK. На консequences-действиях (удаление, оплата) кнопка повторяет само действие, чтобы диалог читался без тела: "Delete this project?" → Delete project и Cancel.

Ошибки становятся инструкциями. Не "That password is too short", а "Choose a password with at least 8 characters". Не "Invalid name", а "Use only letters for your name". Без "Oops", без восклицательных знаков, без обвинения пользователя.

Пустые состояния перестают быть заглушкой. Вместо No results. - короткая ориентация ("No projects yet"), одно предложение о том, зачем это место, и одна кнопка с понятным следующим шагом.

В Codex и других агентах

Скиллы устанавливаются той же командой npx skills add jakubkrehel/skills --skill '*'. Разница только в синтаксисе вызова оркестратора: в Codex вместо слэша ставится доллар.

$better-interface full checkout flow

Тематические шесть скиллов подхватываются автоматически по контексту - это работает одинаково в любом агенте, который поддерживает Anthropic-совместимый формат скиллов.

Частые вопросы

Это бесплатно?

Да. Репозиторий под лицензией MIT, скиллы ставятся без ключей и подписок. Оплата нужна только за самого агента - Claude Pro или Max для Claude Code, отдельный тариф для Codex.

Работает ли это с существующим проектом или только с новым?

Работает с существующим. Скилл better-ui прямо в правилах говорит: сохраняй библиотеку компонентов, токены и плотность проекта - применяй правила, только где они не конфликтуют с уже принятым стилем. Тебя не заставят переписать всё под OKLCH, если у тебя устоявшаяся палитра в hex.

Чем это отличается от системы дизайна вроде shadcn/ui?

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

Какой скилл важнее всего для начала?

По моему опыту недооценённый - better-writing. Половина ощущения дешёвого продукта живёт в кривых надписях на кнопках и невнятных сообщениях об ошибках, а не в вёрстке. better-ui даёт быстрый визуальный вау, но именно тексты держат впечатление профессиональности на долгой дистанции.

Как обновлять скиллы?

Если ставил через плагин (/plugin install interfaces@interfaces), обновления прилетают автоматически. Если через CLI - перепиши тем же npx skills add jakubkrehel/skills --skill '*', команда идемпотентна, лишнего не сломает.

Коротко

UI-скиллы Claude Code от Jakub Krehel - это семь наборов правил, которые вшиваются в Claude Code одной командой и заставляют агента следовать конкретным принципам: концентрические радиусы, OKLCH-палитры, verb-first кнопки, error как инструкция. Ставится через плагин или через npx skills add, работает в Claude Code и Codex. Одинаковый ИИ-дизайн уходит не потому, что агент вдруг стал креативнее, а потому, что у него теперь есть правила, от которых он не отступает.

Что дальше

Если хочешь собрать такую систему у себя - у меня есть курс по вайбкодингу и работе с нейросетями в клубе Мандарин Лаб: mandarinedu.ru. Первые уроки открыты бесплатно.

Если нужно внедрить ИИ в бизнес - процессы, агентов, автоматизацию под вашу задачу - пишите мне напрямую: t.me/Philigranchik. Разберу задачу и скажу, что реально автоматизируется, а что нет.