Impeccable: скилл для дизайна интерфейсов в Codex и Claude Code

Какие задачи решает Impeccable

Impeccable представляет собой открытый проект для разработчиков, которые создают интерфейсы с AI-агентами. Он даёт агенту инструкции по дизайну и команды для конкретных правок. На официальном сайте показаны примеры упрощения перегруженных блоков, изменения текста и визуальной иерархии. Это демонстрации разработчиков; они не подтверждают качество результата в любом приложении.

В README описаны команды `critique` для разбора пользовательского опыта и `audit` для проверки технического качества интерфейса. `typeset` направляет работу со шрифтами и иерархией текста, `layout` — с отступами и компоновкой, `polish` — с финальной доработкой. Команда полезнее, когда в запросе назван конкретный элемент: форма регистрации, карточка тарифа или экран настроек.

В этой же категории мы разбирали [Hallmark, скилл для дизайна сайтов](/stati/hallmark-dizayn-sayta-bez-ai-slop/). Оба проекта задают агенту правила работы с интерфейсом; выбирать процесс стоит по задаче и совместимости с используемым инструментом. Собственного сравнительного теста редакция не проводила.

По теме: Hallmark — скилл для дизайна сайтов

Установка в Codex и Claude Code

В инструкции установки указаны папка проекта, инструмент для работы с кодом и Node.js версии 18.19 или новее. Из корня проекта запускают `npx impeccable install`, выбирают инструмент и область установки: текущий проект или все проекты пользователя. После этого инструмент нужно перезагрузить.

Дальнейшие команды вводятся в чате агента. В большинстве поддерживаемых инструментов используется `/impeccable init`, в Codex используется `$impeccable init`. Инициализация собирает контекст продукта: аудиторию, задачи и ограничения. Затем можно попросить `/impeccable polish the pricing page`, указав, какие цвета, названия и действия требуется сохранить. В Codex тот же запрос начинается с `$impeccable`.

Контекст сохраняется в `PRODUCT.md`. Отдельная команда `document` записывает существующую визуальную систему в `DESIGN.md`: цвета, типографику, компоненты и правила компоновки. Документация контекста предлагает просмотреть оба файла и исправить неверно понятые решения до следующей задачи. У страницы настроек и рекламного лендинга разные цели; их стоит явно называть в запросе.

Для установки через основной инсталлятор обновление выполняется командой `npx impeccable update`. Если подключён автоматический хук, то есть обработчик проверки изменений, README отдельно требует разрешить проектный хук в Codex через `/hooks`. После обновления, которое изменило хук, разрешение может потребоваться снова.

Как работают проверки дизайна

Отдельный детектор ищет формализованные проблемы оформления. Согласно документации сканирования, его можно запускать из терминала: `npx impeccable detect src/` проверяет исходники, а `npx impeccable detect http://localhost:5173` проверяет страницу локального сервера. Порт нужно заменить на используемый в своём проекте.

Эти режимы проверяют разные вещи. В JSX и TSX доступны проверки шаблонов исходного кода. Для контраста и размера текста нужен отрисованный интерфейс; при сканировании URL используется установленный Chrome или Edge. Для автоматической обработки предусмотрен JSON-вывод через `npx impeccable detect --json .`.

Код завершения `2` означает найденные замечания, а `1` — невозможность просканировать цель. Это существенно для CI: обнаруженные проблемы и ошибка запуска требуют разных действий. Сам детектор работает без языковой модели и ключа API. Работа агента над правками при этом зависит от выбранного инструмента и модели.

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

Live Mode и ограничения проекта

В Live Mode можно выбрать элемент на локально запущенной странице, сравнить варианты и принять один в исходный код. Для этого нужны работающий сервер разработки и активная сессия агента. Такой режим рассчитан на локальную копию проекта.

В README есть существенная оговорка о применении текстовых правок: если активный чат не опрашивал сессию последнюю минуту, резервный путь запускает Codex CLI либо Claude с отключёнными проверками разрешений и песочницей. Переменная `IMPECCABLE_LIVE_COPY_AGENT=chat` оставляет применение в чате, а значение `off` отключает его. Настройку читают при старте Live Mode; перед использованием нужно проверить этот режим и доступные процессу данные.

Основной репозиторий распространяется по Apache 2.0. Сведения сверены 4 ноября 2026 года по текущим README и документации; инструкции могут меняться вместе с проектом. Редакция не устанавливала Impeccable и не запускала его на собственном приложении. Иллюстрация показывает пример из README, подготовленный авторами проекта.