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

Open-source агент-скилл от Пола Бакауса — создателя jQuery UI и экс-инженера Google. Учит ваш AI-кодинг-инструмент (Claude Code, Cursor, GitHub Copilot, Codex CLI, Gemini CLI и десяток других) реально понимать дизайн: даёт ему 7 справочных файлов по типографике, цвету, движению и пространству, 23 команды для точечного управления результатом, живую итерацию прямо в браузере и детектор из 45 правил. 42 000+ звёзд на GitHub, Apache 2.0, актуальная версия 3.9.1 (июль 2026).

Что это такое

Impeccable (по‑русски «Безупречный») — это AI-скилл (agent skill), который вы устанавливаете в свой AI-кодинг-инструмент. После установки в чате появляется команда /impeccable с 23 субкомандами. Каждая отвечает за конкретную дисциплину: типографику, цвет, движение, разметку, копирайт, анти-паттерны, аудит, полировку, итерацию в браузере.

В основе — расширение оригинального frontend-design от Anthropic, переписанное автором на собственном eval-фреймворке: тот же бриф прогонялся через frontier-модели с скиллом и без, замерялась степень «коллапса в монокультуру». Главная находка — anti-attractor процедура, которая заставляет модель сначала перечислить и отбросить свои дефолтные рефлексы, и только потом выбирать.

Репозиторий: github.com/pbakaus/impeccable. Сайт с документацией и кейсами: impeccable.style.

Что нового к версии 3.9.1

• Дизайн-хук. Установщик теперь ставит нативный хук для Claude Code, GitHub Copilot, Codex и Cursor. Он прогоняет детектор на каждой правке UI-файла: Claude Code, GitHub Copilot и Codex показывают замечания после правки, а Cursor блокирует плохую правку ещё до записи в файл. Подробности — в разделе «Дизайн-хук».
• Единая команда установки. Вместо npx impeccable skills install теперь npx impeccable install, для обновления npx impeccable update. Нужен Node 24+.
• GitHub Copilot стал первоклассным. В приложении GitHub Copilot скилл встроен: ставить ничего не нужно, включается в Settings → Experimental.
• /impeccable init спрашивает регистр. При настройке скилл уточняет, что вы делаете: brand (лендинг, промо, портфолио) или product (интерфейс приложения, дашборд, инструмент). Дальше каждая команда знает регистр и подстраивает решения.
• Детектор — 45 правил. Движок без jsdom стал примерно в 20× быстрее, а правил стало 45. Появился гибкий механизм исключений: ignores, инлайновые комментарии и коды выхода для CI (см. раздел про CLI).
• Понимает монорепо. Загрузчик контекста и live-режим корректно работают, когда активный проект и его .impeccable/ лежат в глубине монорепо.
• PRODUCT.md и DESIGN.md можно вынести из корня через IMPECCABLE_CONTEXT_DIR, .agents/context/ или docs/.

Что внутри

7 справочных файлов

Загружаются перед каждой командой и формируют общий контекст:

23 команды

Все вызываются через /impeccable <command> <target>. Можно «запинить» часто используемую через /impeccable pin audit — тогда /audit станет отдельным шорткатом.

Если не знаете, какая команда нужна — /impeccable redo this hero section без имени тоже работает: скилл сам выбирает подход. А пустой /impeccable без аргументов теперь не показывает статичное меню, а читает проект, ваш незакоммиченный git-tree и последний critique и предлагает 2–3 самые ценные команды с обоснованием (нет DESIGN.md → document; есть нерешённые замечания в редактируемых файлах → polish). Перед запуском всегда спрашивает, полное меню — ниже.

PRODUCT.md и DESIGN.md как общая память

Два файла в корне проекта, которые читает каждая команда перед генерацией:

• PRODUCT.md — стратегический слой: кто аудитория, что за бренд, какой регистр (brand vs product), какие anti-references (например, «не как Vercel-лендинг»). Создаётся через /impeccable init.
• DESIGN.md — визуальный слой в формате Google Stitch: палитра, типографика, токены, компоненты. Совместим с другими DESIGN.md-aware инструментами. Подробнее — в материале DESIGN.md как дизайн-система для AI-кодинга.

Эти файлы решают главную проблему AI-генерации — дрейф в «modern SaaS». Каждая последующая команда стартует не с чистого листа, а с явных констант продукта.

Live Mode

Итерации прямо в браузере, в той кодовой базе, которую вы реально шипите. Запускается /impeccable live, это визуальный режим правки вариантов, работающий на двух масштабах.

• Steer bar — правка всей страницы. Вводите (или надиктовываете) направление в новую панель Steer, и агент читает страницу целиком и правит её на месте, без выбора элемента и без перебора вариантов.
• Точечная правка элемента. Кликаете по элементу, описываете правку обычными словами и принимаете вариант прямо в исходник.
• Правка текста на месте. Меняете текст элемента прямо в браузере; по Apply субагент переписывает реальный исходник, из которого он рендерится, и чинит всё, что было к нему привязано (например, лейблы карточек, которые заодно служат ключами картинок).
• Insert mode — добавляет совершенно новые элементы между уже существующими.

Работает на Vite, Next.js (включая монорепо), SvelteKit, Astro, Nuxt, умеет автоматически патчить strict-CSP. Восстановление переживает HMR, скрытые hero-блоки и оверлеи дев-тулзов; экспериментальный streaming poll сокращает отклик с секунд до долей секунды. Команды устойчивой сессии: live status, live resume, live complete.

CLI и Chrome-расширение

Два дополнительных инструмента, не требующих AI-harness:

• CLI: npx impeccable detect src/ — детерминированный детектор анти-паттернов без LLM и без API-ключа. Движок HTML/CSS работает на htmlparser2 и настоящем резолвере CSS-каскада вместо jsdom, примерно в 20× быстрее старой jsdom-версии. Правил теперь 45 в одном каноническом реестре, который питает CLI, расширение, дизайн-хук, critique и эвалы. Сканит директории, отдельные HTML-файлы и публичные URL через Puppeteer, отдаёт JSON для CI. Коды выхода удобны для CI: 0 (чисто), 2 (есть находки), 1 (команда упала). Ненужные срабатывания гасятся гибко: npx impeccable ignores list/add-file/add-value, инлайновые комментарии impeccable-disable-line и impeccable-disable-next-line прямо в файле, флаг --no-config даёт сырой прогон без проектного конфига и DESIGN.md.
• Chrome-расширение: иконка в тулбаре подсвечивает анти-паттерны прямо на любом сайте — на localhost, staging, production или у конкурентов. Движок тот же, что в CLI. В настройках появились тумблеры по каждому правилу: любое можно включить или выключить, они сгруппированы по AI tells и Quality и синхронизируются между браузерами.

Image-first генерация

С версии 3.0 скилл использует диффузионные модели для бренд-работ. /impeccable shape рисует toolkit как настоящие картинки (палитра, типографика, мудборд), /impeccable craft пре-рендерит хи-фай мок и ведёт код к нему. В деле — GPT Image 2, Nano Banana Pro, Imagen 4 Ultra. Самый сильный пайплайн — в Codex с GPT 5.5.

Дизайн-хук

npx impeccable install и npx impeccable update ставят нативный хук для четырёх сред: Claude Code, GitHub Copilot, Codex и Cursor. Хук прогоняет детектор на прямых правках UI-файлов и возвращает находки обратно в поток агента.

Разница по средам:

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

Настройки хука лежат в .impeccable/config.json (ключ hook), исключения детектора — в ключе detector, они общие с npx impeccable detect. На Codex один раз нужно открыть /hooks и подтвердить проектный хук: Codex отслеживает доверие по определению хука, поэтому после обновлений подтверждение иногда запрашивается снова.

Поддерживаемые инструменты

11 AI-кодинг-сред:

• Cursor (требует Nightly + Agent Skills в настройках),
• Claude Code (плагин-маркетплейс или прямое копирование),
• OpenCode,
• Pi,
• Gemini CLI (preview-версия + включить Skills в /settings),
• Codex CLI (через /skills или $impeccable),
• GitHub Copilot (встроен в приложение, включается в Settings → Experimental; каталог .github/skills/),
• Kiro,
• Trae (China и International),
• Rovo Dev (от Atlassian),
• Qoder.

Установка

Рекомендуемый способ — CLI-инсталлер из корня проекта (нужен Node 24+):

npx impeccable install

Команда показывает найденные harness-папки (~/.claude, ~/.codex, .cursor и т.д.), даёт выбрать набор инструментов и уровень установки (проект или глобально) и кладёт сборку, скомпилированную именно под вашу harness. Отсюда и harness-specific правила. На Claude Code, Cursor и Codex сюда же ставится нативный дизайн-хук проекта (см. раздел «Дизайн-хук»). Флаги --providers=claude,codex,cursor и --scope=project|global пропускают вопросы в скриптах. Для обновления запускайте npx impeccable update.

Для Claude Code есть плагин-маркетплейс:

/plugin marketplace add pbakaus/impeccable

Дальше открывается /plugin в Claude Code. После установки — пишете /impeccable и получаете автодополнение по всем 23 командам.

Командам, которые держат Impeccable вендорнутым через Git, подойдёт сабмодуль: git submodule add https://github.com/pbakaus/impeccable .impeccable, затем npx impeccable link --source=.impeccable --providers=claude,cursor линкует нужные сборки. Для точечной установки можно скачать ZIP под конкретный harness с impeccable.style или скопировать из репозитория dist/<harness>/. У Codex субагент-ассет-продюсер лежит внутри папки agents/ самого скилла и подхватывается автоматически, отдельная копия в .codex/agents/ не нужна. После установки на Codex откройте /hooks и подтвердите проектный хук.

Сравнение с соседями

Impeccable и Refero Styles — два слоя одного контура. Refero Styles даёт референс: «возьми вот этот стиль как файл». Impeccable даёт процесс: «вот словарь и команды, которыми ты этот стиль реализуешь и проверяешь». Пользоваться можно вместе.

Отдельный разбор соседей — Refero Styles и Refero.

Практические сценарии применения

1. Новый проект с нуля

Классический арк автора: init → shape → craft. Сначала /impeccable init собирает PRODUCT.md (аудитория, бренд-голос, anti-references). Потом /impeccable shape рисует мудборд и hi-fi мок как картинки. Потом /impeccable craft ведёт код к этому моку. Каждая последующая команда читает PRODUCT.md и DESIGN.md, и output не уплывает в generic SaaS.

2. Полировка чужого/легаси AI-кода

Если пришла кодовая база, написанная без скилла, и она выглядит как «AI-slop»: запустите /impeccable document, чтобы извлечь токены в DESIGN.md, потом /impeccable polish <area> по разделам. Это не редизайн, а выравнивание под систему.

3. Pre-ship gauntlet перед релизом

Автор предлагает три команды в очередь: audit → clarify → harden. Audit ловит технику (a11y, performance, респонсив), clarify чистит копии, harden закрывает edge cases (i18n, error states, переполнение текста).

4. Точечная правка «что-то не так, не могу описать»

Когда видно, что элемент кривой, но не получается сформулировать: /impeccable live, тычете в элемент, рисуете штрих, получаете три варианта.

5. Crititque без редизайна

/impeccable critique <area> — UX-ревью с разбором иерархии и ясности. Не правит ничего, только говорит что не так. Полезно перед демо и инвест-встречами.

6. CI/CD-гейт против AI-slop

Подключаете CLI: npx impeccable detect src/ --json → парсите вывод → блокируете PR с regression-патернами (Inter в новых файлах, фиолетовые градиенты, карточки в карточках). Никакого LLM в pipeline не нужно.

7. Аудит конкурентов

Chrome-расширение Impeccable работает на любом сайте. Открыли продукт конкурента — увидели подсветку anti-patterns и хороших решений. Бесплатный design research без подписок на Mobbin/Refero.

8. Pin-команды как личный набор

Если в вашем контуре полезно постоянно дёргать audit и polish — /impeccable pin audit и /impeccable pin polish дают шорткаты /audit и /polish без потери единого namespace.

Anti-patterns, которые ловит Impeccable

Явный список того, что скилл считает «AI-slop» и борется с этим в каждой команде (всего 45 детерминированных правил):

• Шрифты-дефолты: Inter, Arial, system-fonts. С v3.0.7 ловит и новую монокультуру: Fraunces, Geist, Mona Sans, Plus Jakarta Sans, Space Grotesk, Recoleta, Instrument Sans.
• Italic-serif hero h1 (Fraunces, Recoleta, Newsreader, Playfair, Cormorant, Tiempos) как первичный заголовок — детектор v3.0.7 считает это структурным fingerprint AI-маркетинга 2025–2026.
• Eyebrow-chips над h1 — uppercase letter-spaced лейбл прямо над hero-заголовком, особенно с pill-фоном.
• Серый текст на цветном фоне — провал контраста.
• Чистый чёрный или серый без подкраски — всегда нужен tint в направлении основного цвета.
• Карточки в карточках — вложение без иерархии.
• Bounce / elastic easing — анимации, выглядящие устаревшими.
• Rounded-square icon tile над каждым заголовком — tell всех AI-лендингов.
• Фиолетово-синий градиент — главный визуальный fingerprint AI-генерации.
• Боковые табы с borders, dark glows, маленькие touch-targets, скипнутые heading-уровни, переполненный padding — и ещё ряд правил.

Новое в 3.5 — 14 правил: бежево-кремовый фон (cream-palette, тот самый «claude beige»), злоупотребление длинным тире (em-dash-overuse), маркетинговые баззворды (marketing-buzzword), нумерованные маркеры разделов (numbered-section-markers), афористичный ритм текста (aphoristic-cadence), «театральные» slop-фразы (theater-slop-phrase), гигантский h1 (oversized-h1), экстремальный отрицательный трекинг (extreme-negative-tracking), тонкая рамка с широкой тенью в стиле GPT (gpt-thin-border-wide-shadow), повторяющиеся полоски-градиенты (repeating-stripes-gradient), transform картинки на hover (image-hover-transform), битые картинки (broken-image), переполнение текста (text-overflow) и обрезанный контейнер (clipped-overflow-container). Заодно забанены all-caps eyebrow-лейблы, больше трёх шрифтов и введён жёсткий пол по контрасту.

Ограничения и грабли

• Live Mode всё ещё дозревает. Стабильно работает на Vite/Next/SvelteKit/Astro/Nuxt, но в экзотических конфигурациях (нестандартный CSP, тяжёлые портал-модалки, repeated identical-class siblings) бывают баги.
• Image-first сильнее всего в Codex с GPT 5.5. На других harness'ах работает скромнее: где-то генерация недоступна вообще, где-то — без iterative-режима.
• Не отменяет осмысленного дизайнера. Скилл резко поднимает потолок AI-генерации, но если в брифе нет ясности про продукт и аудиторию — даже с PRODUCT.md результат будет компетентным, но безадресным.
• Анти-паттерны иногда срабатывают на легитимных кейсах. Editorial и magazine-сайты, которым исторически положены italic-serif heroes, тоже подсвечиваются — нужны ручные исключения.
• Установка в Cursor требует Nightly канала и включённого Agent Skills. Не все команды захотят пересаживаться на nightly.
• Скилл развивается быстро, ломающие изменения возможны. Версионирование стремительное (v1 в феврале 2026, v3 в апреле, v3.9.1 к началу июля). Скилл сам предлагает обновиться в первой сессии дня; если хотите контролировать момент, отключите авто-проверку через IMPECCABLE_NO_UPDATE_CHECK=1 и запускайте npx impeccable update руками.

Чеклист «как встроить в работу»

Ссылки

• Сайт: impeccable.style
• Туториалы: impeccable.style/tutorials
• Live Mode: impeccable.style/live-mode
• Чейнджлог: impeccable.style/changelog
• FAQ: impeccable.style/faq
• Репозиторий: github.com/pbakaus/impeccable
• npm-пакет CLI: npmjs.com/package/impeccable
• Twitter автора: @pbakaus
• Twitter проекта: @impeccable_ai
• Оригинальный Anthropic frontend-design: github.com/anthropics/skills

По теме

• Блог: Impeccable 3 научился генерировать дизайн с нуля — новые возможности для вайб-кодеров
• Статья: Impeccable и Taste Skill: зачем я держу два дизайн-скилла для ИИ
• База знаний: Taste Skill — anti-slop набор скиллов для ИИ-агентов

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