Как перестать спорить с нейросетями о дизайне фронтенда
Замечали, что Claude или GPT-4 почти всегда предлагают одно и то же, когда просишь их набросать интерфейс? Шрифт Inter, фиолетовые градиенты, карточки внутри карточек и серый текст на цветном фоне. Это не потому, что ИИ «так видит». Просто модели обучались на одних и тех же стандартных шаблонах. В итоге мы получаем предсказуемый и скучноватый UI, который потом приходится переделывать руками.
Проект impeccable от Пола Бакауса (бывшего инженера Google и создателя AMP) пытается решить эту проблему. Это не библиотека компонентов, а набор инструкций и команд, который «прокачивает» насмотренность нейросети и заставляет её следовать правилам качественного дизайна.
Что внутри этого набора
По сути, автор взял базовый навык frontend-design от Anthropic и расширил его до полноценной дизайн-системы для ИИ-агентов. В репозитории лежат конфигурационные файлы с глубокой экспертизой в семи областях: от типографики и работы с цветом в пространстве OKLCH до микроанимаций и UX-копирайтинга.
Самое интересное здесь — 17 команд-стеерингов. Если вы пользуетесь Cursor, Claude Code или Gemini CLI, вы можете просто написать в чате /audit или /polish, и модель начнет работать в режиме профессионального ревьюера.
Команды, которые экономят время
Вместо того чтобы писать длинные промпты вроде «пожалуйста, проверь контрастность и сделай отступы по сетке», здесь используются короткие алиасы.
/auditзапускает проверку технического качества: доступность (a11y), производительность и адаптивность./critiqueделает акцент на UX: иерархия элементов, ясность интерфейса и эмоциональный отклик./bolderпомогает, если дизайн кажется слишком стерильным и скучным. Команда заставляет ИИ добавить акцентов./distillработает в обратную сторону — убирает лишний визуальный шум, оставляя только суть./animateдобавляет осмысленные анимации, используя правильные кривые сглаживания вместо стандартных.
Борьба с антипаттернами
В инструкциях прописан список вещей, которые ИИ категорически запрещено делать. Например, нельзя использовать чистый черный или серый цвет — вместо них проект заставляет модель подмешивать оттенки (tinting), что делает интерфейс «дороже». Запрещено вкладывать карточки друг в друга и использовать избитые системные шрифты.
Такой подход превращает нейросеть из послушного, но посредственного исполнителя в коллегу, который знает основы визуальной иерархии и следит за чистотой кода.
Как это завести в своем редакторе
Проект поддерживает несколько инструментов, но лучше всего он интегрируется в Cursor и Claude Code.
Для Cursor нужно переключиться на Nightly-канал и включить Agent Skills в настройках. После этого достаточно скопировать содержимое папки dist/cursor/.cursor в корень вашего проекта.
Если вы работаете с Claude Code, установка еще проще:
cp -r dist/claude-code/.claude your-project/
Теперь в терминале с Claude можно вызывать те самые команды через слэш. Например, /audit header проверит только шапку сайта на ошибки в верстке и дизайне.
Практическая польза
Главное преимущество Impeccable в том, что он убирает «эффект нейросетевого дизайна». Когда вы просите ИИ доработать форму заказа, он не просто добавит Input-поля, а подумает о состояниях фокуса, сообщениях об ошибках и о том, как форма будет выглядеть на мобильном устройстве.
В моей практике самой полезной оказалась команда /harden. Нейросети часто забывают про обработку краевых случаев: что будет, если API вернет ошибку, или если текст в кнопке окажется слишком длинным. Эта команда заставляет модель добавить проверки и обработку таких ситуаций.
Стоит ли пробовать
Проект определенно пригодится тем, кто пишет фронтенд в связке с ИИ-агентами и устал от однообразных интерфейсов. Это хороший способ стандартизировать работу всей команды, если вы используете Cursor.
Конечно, Impeccable не заменит дизайнера на большом продукте. Но для создания прототипов, внутренних админок или личных проектов это мощный апгрейд. Вместо того чтобы каждый раз объяснять модели, почему серый текст на синем фоне — это плохо, вы один раз скармливаете ей эти правила и забываете о проблеме.
Если вы только начинаете, советую заглянуть на impeccable.style, там есть наглядные примеры «до и после», которые показывают, как эти команды меняют обычную верстку.
