Impeccable — дизайн-гайд для ИИ-агентов без «нейросетевого» однообразия

Почти каждый проект, который ИИ-агент собирает с нуля, выглядит одинаково. Inter для всех шрифтов, фиолетово-синие градиенты, карточка внутри карточки, серый текст на цветном фоне и скруглённая иконка над каждым заголовком. Это следствие того, что все модели обучаются на одних и тех же SaaS-шаблонах.

Пол Бакаус (Paul Bakaus), создатель Impeccable, начал с дизайн-скилла frontend-design от Anthropic — первого широко используемого скилла для Claude — и пошёл дальше. Получился проект Impeccable: «дизайн-гайд для ИИ-агентов», который добавляет единый процесс настройки, общий дизайн-словарь для общения с агентом и набор детерминированных правил, которые ловят типичные ошибки ИИ ещё до того, как вы их заметите.

Проект распространяется по лицензии Apache 2.0, документация живёт на impeccable.style.

Что такое Impeccable

Impeccable — это один скилл и набор инструментов вокруг него:

• 1 скилл impeccable с единой точкой входа /impeccable <command> <target>
• 23 команды — общий дизайн-словарь, который вы используете вместе с агентом
• 59 детерминированных правил-детекторов плюс проверки через LLM-критику
• CLI и браузерное расширение, которые запускают детерминированные правила вообще без LLM и без API-ключа

Главная идея в том, что дизайн-решения не должны быть делом вкуса «как получится». Если правила проверяемы, их можно прогнать автоматически, не тратя токены на то, что ловится простой эвристикой.

Как это работает

Всё начинается с одной команды — /impeccable init. Она спрашивает, с чем вы работаете: с брендом (маркетинг, лендинг, портфолио) или с продуктом (интерфейс приложения, дашборд, инструмент). Затем записывает дизайн-контекст в файлы PRODUCT.md и DESIGN.md, которые читают все остальные команды. Там — аудитория, ниша бренда или продукта, голос, анти-референсы, цвета, типографика и компоненты.

После init у вас появляется общий язык с агентом. Дальше можно не описывать дизайн-задачу каждый раз заново — агент уже знает контекст проекта.

23 команды

Все команды вызываются через /impeccable:

Примеры использования:

/impeccable audit blog           # аудит хаба блога + страниц постов
/impeccable critique landing     # UX-ревью
/impeccable polish settings      # финальный проход перед релизом
/impeccable harden checkout      # обработка ошибок и краевых случаев

Или напрямую, без команд: /impeccable redo this hero section — агент сам разберётся.

Если какая-то команда нужна часто, её можно закрепить: /impeccable pin audit создаст самостоятельный шорткат /audit.

Анти-паттерны

Скилл содержит явные правила того, чего избегать:

• Не использовать заезженные шрифты (Arial, Inter, системные дефолты)
• Не использовать серый текст на цветных фонах
• Не использовать чистый чёрный/серый — всегда с тонировкой
• Не оборачивать всё в карточки и не вкладывать карточки в карточки
• Не использовать bounce/elastic easing — выглядит устаревшим

Детерминированный детектор

Помимо LLM-критики, в Impeccable есть отдельный CLI, который работает вообще без ИИ:

npx impeccable detect src/                   # сканировать директорию
npx impeccable detect index.html             # сканировать HTML-файл
npx impeccable detect https://example.com    # сканировать URL (Puppeteer)
npx impeccable detect --json .               # JSON-вывод для CI
npx impeccable detect --no-config src/       # без учёта конфигов проекта

Детектор ловит 59 детерминированных проблем. Часть из них — это «нейросетевой слоп»: границы с боковыми вкладками, фиолетовые градиенты, bounce-анимации, тёмные свечения. Другая часть — общее качество дизайна: длина строки, тесные отступы, мелкие области нажатия, пропущенные уровни заголовков.

Для каждого проекта можно настроить игнор-списки:

npx impeccable ignores list                    # показать игноры
npx impeccable ignores add-file "src/legacy/**"  # игнор файлов
npx impeccable ignores add-value overused-font Inter --reason "Brand font"

А если нужно освободить от проверки один конкретный файл, достаточно инлайн-комментария в нём:

<!-- impeccable-disable overused-font: exported brand doc -->

Работает в любом синтаксисе комментариев, привязывается к файлу целиком (или к одной строке через impeccable-disable-line / impeccable-disable-next-line).

Установка

Рекомендованный способ — CLI-установщик:

npx impeccable install

Он сам находит харнессы (например, ~/.claude, ~/.codex, .cursor), даёт выбрать набор провайдеров и спросит, ставить в текущий проект или глобально. Флагами можно пропустить вопросы:

npx impeccable install --providers=claude,codex,cursor,grok --scope=project

Поддерживаются Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, Grok Build, OpenCode, Pi, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe и Google Antigravity. Обновление — командой npx impeccable update.

Для команд, которые хотят держать скилл в вендоре через Git, есть вариант с git-подмодулем:

git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor

А на Claude Code скилл ставится как плагин через маркетплейс: /plugin marketplace add pbakaus/impeccable.

Дизайн-хук

На Claude Code, GitHub Copilot, Codex, Cursor и Grok Build установщик добавляет не только сам скилл, но и нативный хук для провайдера. Хук прогоняет детектор Impeccable прямо во время правки UI-файлов и возвращает находки в поток работы агента. Claude Code, GitHub Copilot, Codex и Grok Build показывают замечания после правки, а Cursor блокирует подозрительные правки до того, как они будут записаны.

Жизненный цикл хука настраивается через ключ hook в .impeccable/config.json, игноры детектора — через ключ detector. Для отладки можно включить лог каждой отработки хука:

{
  "hook": { "auditLog": "/tmp/impeccable-hook.ndjson" }
}

Что остаётся в git

Во время работы Impeccable пишет рабочие файлы в .impeccable/: скриншоты critique и polish, состояние live-сессий, рантайм-кеши и персональные настройки. Большая часть этого — эфемерное, коммитить не стоит. В репозитории проекта рекомендуется блок в .gitignore (полная версия есть в README, помечена маркерами # impeccable-ignore-start / # impeccable-ignore-end).

При этом часть файлов — это общие артефакты проекта, их отслеживать нужно:

• .impeccable/config.json — общий конфиг
• .impeccable/live/config.json — подключение live-режима
• .impeccable/design.json — общий дизайн-спека
• .impeccable/critique/*.md — отчёты ревью

Если эфемерный файл уже попал в git, поможет git rm --cached <path> — он снимет файл с отслеживания, не удаляя локальную копию.

Вывод

Impeccable — это не ещё один набор подсказок «сделай красиво». Это попытка сделать дизайн-работу агента проверяемой: детерминированные правила ловят шаблонные ошибки без LLM, а 23 команды дают вам общий словарь для управления агентом на уровне «аудируй», «приглуши», «упрости до сути». Если вас утомило однообразие «нейросетевого» фронтенда — этот проект стоит посмотреть.