pimenov.ai

Impeccable — открытый дизайн-скилл, который учит AI-инструменты понимать дизайн

Обновлено

Impeccable — открытый агент-скилл Пола Бакауса. Он помогает AI-инструментам проектировать и проверять интерфейсы: хранит контекст продукта и дизайн-системы, предлагает 23 команды, поддерживает визуальные итерации в браузере и запускает детерминированный детектор типичных ошибок.

По состоянию на 3 сентября 2026 года актуальная версия — 4.1.3. В репозитории отображается более 65 000 звёзд; лицензия Apache 2.0. Детектор содержит 61 правило. Версия 4 заметно изменила процесс проектирования, поэтому проекты, настроенные на Impeccable 3, стоит проверить командой /impeccable doctor.

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

Что входит в Impeccable

Impeccable устанавливается в AI-среду как один скилл /impeccable. Он объединяет четыре слоя:

  • Контекст продукта: PRODUCT.md хранит аудиторию, назначение, рабочий контекст, ограничения, голос, позиционирование и имеющиеся подтверждения.
  • Визуальная система: DESIGN.md описывает палитру, типографику, компоненты и другие устойчивые решения. Сгенерированный .impeccable/design.json добавляет машиночитаемые токены.
  • Работа с отдельными поверхностями: стратегия страницы или экрана сохраняется в .impeccable/surfaces/, чтобы следующая сессия продолжала принятые решения.
  • Проверка качества: детектор используется в CLI, браузерном расширении, дизайн-хуках и командах проверки.

В Impeccable 4 прежнее поле register со значениями brand/product заменено четырьмя режимами посетителя: Persuade, Operate, Read и Experience. Режим выбирается для конкретной поверхности, поэтому лендинг и документация одного продукта могут получать разные правила.

Команды и рабочие сценарии

Скилл сохраняет 23 команды. Основные группы:

  • Настройка и система: init, document, extract, shape.
  • Проверка: critique, audit.
  • Доработка: polish, harden, onboard, optimize, adapt.
  • Визуальные дисциплины: typeset, colorize, layout, animate.
  • Управление выразительностью: bolder, quieter, distill, delight, overdrive.
  • Копирайт: clarify.
  • Создание и визуальные итерации: craft, live.

Часто используемую команду можно закрепить как отдельный шорткат:

/impeccable pin audit

После этого станет доступна команда /audit. Можно также описать задачу напрямую:

/impeccable redo this hero section

Команда /impeccable craft пока присутствует в списке команд, но с версии 4.0 считается устаревающей. Для новой страницы, редизайна или точечной доработки рекомендуется обычным языком описать нужную поверхность. Скилл сам классифицирует работу и выбирает подходящий процесс.

Как Impeccable выбирает дизайн-направление

В версии 4 появился внешний механизм вариативности. Для нового дизайна Impeccable сопоставляет направления, выведенные из продукта, с подборкой проверенных визуальных миров. В каталоге 188 одобренных миров. Это кандидаты, а не готовые шаблоны.

В интерактивной сессии выбор открывается в браузере вместе с альтернативами и воспроизводимым ключом. Каждый новый бросок можно повторить по этому ключу.

После утверждения направления доступны два пути:

  • Comp-first: сначала создаются полноформатные макеты высокой детализации, затем код сверяется с ними по структуре, типографике, материалам, графическим материалам и адаптивности. Этот путь доступен в средах с генерацией изображений.
  • Code-first: интерфейс сразу строится в коде, а замысел фиксируется в контракте поверхности и проверяется в финальном проходе.

Путь задаётся во время init и хранится как buildPath в .impeccable/config.json. Допустимые значения — comp и code. Локальное переопределение можно поместить в .impeccable/config.local.json.

Установка и обновление

Рекомендуемый способ из корня проекта:

npx impeccable install

Установщик обнаруживает поддерживаемые AI-среды, предлагает проектный или глобальный уровень и собирает подходящую структуру файлов. Для сценариев без вопросов доступны параметры:

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

Обновление выполняется отдельно:

npx impeccable update

Impeccable поддерживает Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, Grok Build, Hermes Agent, Veto, OpenCode, Pi, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe и Google Antigravity. Набор возможностей зависит от среды: например, Hermes и Veto не запускают нативный дизайн-хук.

Для Claude Code доступна установка через маркетплейс:

/plugin marketplace add pbakaus/impeccable

В Codex используются скиллы, а не /prompts: откройте /skills или вызовите $impeccable. После установки или обновления откройте /hooks и подтвердите проектный хук, если Codex запросит доверие повторно.

Дизайн-хук во время редактирования

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

Claude Code, GitHub Copilot и Codex показывают находки после правки. Cursor проверяет предложенную запись заранее и блокирует её при обнаружении проблемы. Grok Build сканирует файлы после правки, подготавливает результаты для события Stop и передаёт их модели на этом событии.

Хук работает в двух темпах:

  • после каждой правки сообщает об объективных дефектах: проблемах контраста, переполнении текста, битых изображениях, свечениях и отклонениях от DESIGN.md;
  • в конце сессии запускает полный набор правил по затронутым UI-файлам там, где среда поддерживает завершающий проход. Cursor и GitHub Copilot такого прохода не имеют.

Проверить и изменить состояние можно командами:

/impeccable hooks status
/impeccable hooks on
/impeccable hooks off

После переноса проекта полезно выполнить /impeccable doctor: команда обнаруживает неработающий путь к скрипту, устаревший контекст и расхождения между манифестом и конфигурацией.

Live Mode для визуальных итераций

/impeccable live открывает слой управления поверх работающего dev-сервера. Вы выбираете элемент, добавляете описание, комментарий или штрих и получаете три варианта. Принятый вариант записывается в исходный файл, отклонённые варианты не меняют код.

Поддерживаются Vite, Next.js и монорепозитории, SvelteKit, Astro, Nuxt и статический HTML. Для строгой Content Security Policy (CSP) установщик может предложить отдельный патч только для среды разработки.

⚠️
Статус Live Mode — alpha. Основной цикл работает, но в необычных конфигурациях возможны ошибки. Режим предназначен для итерации над существующим элементом, а не для проектирования новой функции или полной страницы с нуля.

Live Mode работает только с веб-интерфейсами. В версии 4 для нативных проектов появилась отдельная поддержка аудита и проверки: для iOS используется Apple HIG, для Android — Material 3. Команды audit и adapt в таком проекте проверяют VoiceOver, TalkBack, сенсорные области и соответствие платформе. На проектах, где PRODUCT.md declares ios, android или adaptive, браузерный Live Mode, CLI-детектор и дизайн-хук не запускаются.

CLI-детектор и проверка результата

Детерминированный детектор работает без LLM и API-ключа:

npx impeccable detect src/
npx impeccable detect src/components/Card.tsx
npx impeccable detect https://example.com
npx impeccable detect --json src/

Он анализирует HTML, CSS и исходники распространённых веб-фреймворков. Для URL используется отрисованная страница. Серверные шаблоны Blade, ERB, Twig и Handlebars подключаются через перечисление расширений в detector.extensions.

При наличии DESIGN.md дополнительно проверяются шрифты, цвета, радиусы и размеры относительно локальной дизайн-системы. Сгенерированный .impeccable/design.json добавляет данным о токенах и типографической шкале больше контекста.

Коды завершения подходят для CI, то есть непрерывной интеграции:

  • 0 — находки не обнаружены;
  • 2 — проблемы найдены;
  • 1 — команда завершилась с ошибкой или один из запрошенных объектов не удалось проверить.

Исключения детектора общие с дизайн-хуком:

npx impeccable ignores list
npx impeccable ignores add-file 'src/legacy/**'
npx impeccable ignores add-value overused-font Inter --reason 'Brand font'

Для сырой проверки без конфигурации, исключений и контекста DESIGN.md используйте:

npx impeccable detect --no-config src/

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

Проверка результата

Если выбранная AI-среда поддерживает хук, после установки проверьте его состояние и выполните пробный детектор:

/impeccable hooks status
npx impeccable detect --json src/

hooks status показывает состояние хука, пути к общей и локальной конфигурации, текущие исключения и применяемые переменные окружения. Детектор возвращает машиночитаемый JSON; код 0 означает отсутствие находок, 2 — наличие проблем, 1 — ошибку проверки. Для нативного проекта вместо веб-детектора используйте /impeccable audit.

Команды и поведение в этом материале сверены с официальным репозиторием и документацией по состоянию на 3 сентября 2026 года; запуск Impeccable в рамках редакторского прохода не выполнялся.

Полезные сценарии

Новый веб-интерфейс

Если вы начинаете проект с нуля, запустите /impeccable init, заполните продуктовый контекст и опишите нужную страницу обычным языком. Утвердите предложенное направление и выберите comp-first или code-first. Проверяемый результат: финальный проход сопоставляет интерфейс с принятым направлением и локальной дизайн-системой. Ограничение: comp-first требует среды с генерацией изображений.

Доработка существующего проекта

Если у вас уже есть кодовая база, сначала выполните /impeccable document, чтобы извлечь действующую систему в DESIGN.md. Затем используйте critique для независимого разбора и polish для исправлений. Результат можно проверить по созданному описанию системы и отчёту критики. Этот сценарий подходит для выравнивания легаси-кода и не предназначен для произвольной смены идентичности продукта.

Гейт перед релизом

Для проверки перед выпуском выполните:

/impeccable audit
/impeccable clarify
/impeccable harden

Затем запустите:

npx impeccable detect --json src/

audit проверяет техническое качество, clarify улучшает UX-тексты, harden разбирает ошибки, локализацию и переполнение. Наблюдаемый результат — отчёты команд и JSON детектора; код выхода 2 можно использовать как блокирующий сигнал в CI. Детектор не заменяет визуальный и ручной аудит.

Быстрая визуальная развилка

Если веб-страница уже работает и её элемент почти готов, запустите /impeccable live, выберите элемент и сформулируйте направление, например more editorial, less SaaS. Сравните три варианта и примите один либо выйдите без изменений. Результат принятия можно проверить в исходном файле. Сценарий требует работающей веб-страницы с содержательным текстом и стилями и не подходит для новой функции или полной страницы с нуля.

Ограничения

  • Impeccable помогает сформировать и соблюдать дизайн-систему, но не заменяет продуктовый бриф и дизайнерское решение.
  • Детерминированные правила могут отмечать намеренные приёмы. Для подтверждённых случаев используйте узкие исключения по значению или файлу.
  • Возможности генерации изображений и субагентов зависят от AI-среды.
  • Live Mode и нативная поддержка остаются экспериментальными.
  • Проект развивается быстро. После крупных обновлений проверяйте контекст и хуки через /impeccable doctor.

Официальные ссылки

Следующий шаг

DESIGN.md — дизайн-система в одном файле для AI-кодинга

Связанные материалы

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

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov
Frontend DevTools ИИ-агенты

Если хотите разобрать свою задачу — напишите мне

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

Напишите мне в Телеграм Мой Телеграм канал

Обычно хватает 2–3 сообщений, чтобы понять, могу ли я здесь реально помочь и в каком формате лучше двигаться дальше.

Дальше по теме