Make Interfaces Feel Better — скилл полировки интерфейсов для ИИ-агентов

Великолепные интерфейсы редко рождаются из одной большой идеи. Обычно это набор мелких деталей, которые в сумме складываются в ощущение продуманности. Якуб Крехел (jakub.kr) превратил этот принцип в agent skill для ИИ-агентов — make-interfaces-feel-better.

Скилл собрал более 3400 звёзд на GitHub и распространяется по лицензии MIT. Его можно добавить одной командой:

npx skills add jakubkrehel/make-interfaces-feel-better

Что делает скилл

Скилл применяется при сборке UI-компонентов, ревью фронтенд-кода, работе с анимациями, hover-состояниями, тенями, границами, типографикой, иконками и микро-взаимодействиями. Он поддерживает два режима проверки:

• quick — главный пользовательский путь и самые нагруженные состояния; только проблемы уровня HIGH и MEDIUM, лимит 5 находок.
• full — вся запрошенная область по категориям «типографика, поверхности, анимации, иконки, производительность», лимит 15 находок.

Ключевая инструкция перед любым исправлением: сначала найти существующую систему стилей проекта (Tailwind, обычный CSS или CSS-in-JS) и выражать правки в ней, а не тащить вторую систему ради одного полиш-фикса.

Ядро: 19 принципов

Скилл систематизирует знания в 19 принципов, разбитых по категориям.

Типографика

• Сглаживание шрифтов — на macOS -webkit-font-smoothing: antialiased на корневом layout делает текст заметно чётче.
• Табличные цифры — font-variant-numeric: tabular-nums для любых динамически обновляемых чисел, чтобы они не сдвигали layout.
• Перенос текста — text-wrap: balance для заголовков и text-wrap: pretty для основного текста, чтобы не было «сирот» (orphans).

Поверхности

• Концентрический border radius — внешний радиус = внутренний радиус + отступ. Несовпадающие радиусы вложенных элементов — самая частая причина того, что интерфейс «чувствуется неправильно».
• Оптическое выравнивание — когда геометрическое центрирование выглядит криво, выравнивайте оптически. Кнопки с иконками, play-треугольники и асимметричные иконки почти всегда требуют ручной правки.
• Тени для глубины, границы для структуры — если граница кнопки или карточки существует только ради глубины, замените её слоистыми полупрозрачными box-shadow. Границы оставляйте там, где они несут смысл: разделители, состояния выбора и фокуса.
• Контур изображений — тонкий 1px outline с низкой прозрачностью. Чисто чёрный в светлой теме (oklch(0 0 0 / 0.1)) и чисто белый в тёмной (oklch(1 0 0 / 0.1)). Никогда не «почти чёрный» — тонированный контур подхватывает цвет поверхности и читается как грязь.
• Минимальная hit-зона — 44×44px для touch и мобильных, минимум 40×40px в плотном десктопном UI. Малый элемент расширяется псевдоэлементом, зоны двух элементов не должны пересекаться.

Анимации

• Прерываемые анимации — для интерактивных состояний используйте CSS-переходы (их можно прервать), а keyframes берегите для одноразовых постановочных последовательностей.
• Разбивка и стаггер входных анимаций — для редкого постановочного входа разбейте контент на смысловые блоки и запускайте их со стаггером ~100ms вместо анимации одного контейнера. Не стаггерите рутинные высокочастотные взаимодействия.
• Сдержанные выходные анимации — небольшой фиксированный translateY вместо полной высоты. Выход должен быть мягче входа, для обоих используйте ease-out.
• Контекстные анимации иконок — opacity, scale и blur вместо переключения видимости: scale от 0.25 до 1, opacity от 0 до 1, blur от 4px до 0px. Если в проекте есть motion-библиотека — transition: { type: "spring", duration: 0.3, bounce: 0 } (bounce всегда 0). Без библиотеки — обе иконки в DOM с кросс-фейдом через cubic-bezier(0.2, 0, 0, 1).
• Scale на нажатие — scale(0.96) на клике, всегда 0.96, не меньше 0.95 — меньшие значения выглядят утрированно.
• Отключение анимации при загрузке — initial={false} на AnimatePresence, чтобы входные анимации не играли при первой отрисовке.
• Никогда transition: all — всегда точные свойства: transition-property: scale, opacity. Tailwind-аналог — transition-transform.
• will-change экономно — только для transform, opacity, filter (их умеет композитить GPU), никогда will-change: all. Добавляйте, лишь когда заметили stutter первого кадра.
• Сдержанность в движении — никаких кастомных анимаций на высокочастотных взаимодействиях: цена внимания повторяется при каждом триггере. Движение никогда не единственный канал обратной связи — у каждого анимированного состояния есть статичный признак: цвет, иконка или подпись.

Иконки

• Толщина штриха под вес текста — 1.5px рядом с обычным текстом (400), 2px рядом с semibold (600). Один штрих на набор иконок, не смешивайте библиотеки на одной поверхности.
• Один SVG, перекраска по состояниям — иконки используют currentColor, состояния (hover, selected, disabled) задаются через CSS-цвет и прозрачность, а не отдельными ассетами. Контурный вариант по умолчанию, залитый — для активного состояния.

Производительность

• Специфичность переходов — то же «никогда transition: all», только в контексте производительности рендера.
• will-change только под композицию — упомянутый выше принцип 15: ограничивайтесь transform, opacity, filter.

Как проходит ревью

Выходной формат ревью строго регламентирован. Сначала указывается режим, точный объём проверки, фреймворк, стилевые конвенции и границы. Затем таблица по всем пяти категориям — что именно было проверено и с каким результатом.

Находки группируются по принципам и оформляются таблицей с колонками Severity, Location, Before, After, Why. Уровни серьёзности:

• HIGH — взаимодействие становится недоступным, вводящим в заблуждение, нечитаемым или систематически раздражающим;
• MEDIUM — заметная проблема удобства или консистентности;
• LOW — изолированный полиш, появляется только в режиме full.

Системная проблема консолидируется в одну строку со списком всех затронутых мест. Принципы без находок не упоминаются — отчёт не раздувают ради достижения лимита.

Также в отчёте обязательны: блок «Рассмотрено, но отклонено» (1–3 кандидата в quick, 2–5 в full), список команд и взаимодействий для верификации (движение просматривается на 10% скорости) и вердикт: Block при оставшемся HIGH, Needs changes при только MEDIUM/LOW, Approve — только когда actionable-находок не осталось.

Вывод

make-interfaces-feel-better — практичный скилл, который передаёт агенту знания дизайн-инженера: как замедлить интерфейс до 10% скорости и заметить то, что на полной скорости кажется едва уловимым. Вместо абстрактного «сделай красивее» — конкретные числа, формулы и проверяемые правила.

Скилл отлично дополняет другие дизайн-навыки для агентов, такие как Skills for Design Engineers от Эмиля Ковальски и Taste Skill от Леонарда Цвецера. Если агент регулярно выдаёт интерфейсы, которые «вроде работают, но что-то не так» — этот скилл закрывает именно этот разрыв.