База знаний
Open-source агент-скилл от Пола Бакауса (создателя jQuery UI). 23 команды, 7 справочников по типографике/цвету/анимации, PRODUCT.md и DESIGN.md как общая память, Live Mode для итераций в браузере, CLI и Chrome-расширение для детекции anti-patterns. Работает в Cursor, Claude Code, Codex CLI, Gemini CLI и других.
Open-source агент-скилл от Пола Бакауса — создателя jQuery UI и экс-инженера Google. Учит ваш AI-кодинг-инструмент (Claude Code, Cursor, Codex CLI, Gemini CLI и десяток других) реально понимать дизайн: даёт ему 7 справочных файлов по типографике, цвету, движению и пространству и 23 команды, чтобы рулить результатом точечно. 25 000+ звёзд на GitHub, Apache 2.0, актуальная версия 3.0.7.
Impeccable (по‑русски «Безупречный») — это AI-скилл (agent skill), который вы устанавливаете в свой AI-кодинг-инструмент. После установки в чате появляется команда /impeccable с 23 субкомандами. Каждая отвечает за конкретную дисциплину: типографику, цвет, движение, разметку, копирайт, анти-паттерны, аудит, полировку, итерацию в браузере.
В основе — расширение оригинального frontend-design от Anthropic, переписанное автором на собственном eval-фреймворке: тот же бриф прогонялся через frontier-модели с скиллом и без, замерялась степень «коллапса в монокультуру». Главная находка — anti-attractor процедура, которая заставляет модель сначала перечислить и отбросить свои дефолтные рефлексы, и только потом выбирать.
Репозиторий: github.com/pbakaus/impeccable. Сайт с документацией и кейсами: impeccable.style.
Загружаются перед каждой командой и формируют общий контекст:
| Файл | О чём |
| typography | Type-системы, font pairing, modular scales, OpenType-фичи |
| color-and-contrast | OKLCH, тинтованные нейтрали, dark mode, доступность контраста |
| spatial-design | Системы отступов, гриды, визуальная иерархия |
| motion-design | Easing-кривые, стаггеринг, reduced motion |
| interaction-design | Формы, focus-стейты, лоадинг-паттерны |
| responsive-design | Mobile-first, fluid design, container queries |
| ux-writing | Лейблы кнопок, тексты ошибок, empty states |
Все вызываются через /impeccable <command> <target>. Можно «запинить» часто используемую через /impeccable pin audit — тогда /audit станет отдельным шорткатом.
/impeccable teach — одноразовая настройка проекта: интервью про аудиторию, бренд-голос, anti-references, регистр (brand vs product). Пишет PRODUCT.md и DESIGN.md в корень репозитория./impeccable document — генерирует DESIGN.md из существующего кода в формате Google Stitch (цвета, типографика, elevation, компоненты, do/don't)./impeccable extract — вытягивает переиспользуемые компоненты и токены в дизайн-систему./impeccable shape — UX/UI-планирование до того, как написана хоть одна строка кода: бриф, мудборд, brand toolkit как картинки./impeccable craft — полный цикл shape → build с визуальной итерацией. Воспринимает мокапы как visual contract: проверяет, что в коде остались все обещанные элементы./impeccable live (Alpha) — Visual Mode: пик элемента в браузере, комментарий или штрих, три продакшен-варианта через HMR, accept — и изменение пишется обратно в исходник./impeccable critique — UX-ревью: иерархия, ясность, эмоциональный резонанс./impeccable audit — технические проверки: a11y, performance, респонсив./impeccable polish — финальный проход, выравнивание под дизайн-систему, готовность к шипу. Включает Information Architecture & Flow./impeccable harden — error handling, i18n, переполнение текста, edge cases./impeccable onboard — first-run флоу, empty states, активационные пути./impeccable bolder — амплифицировать «вялый» дизайн./impeccable quieter — приглушить «крикливый»./impeccable distill — снять лишнее и довести до сути./impeccable delight — добавить моменты радости./impeccable overdrive — техно-экстраординарные эффекты./impeccable typeset — фоны, иерархия, размеры шрифтов./impeccable colorize — стратегический цвет./impeccable layout — разметка, отступы, визуальный ритм./impeccable animate — осмысленное движение./impeccable adapt — адаптация под устройства./impeccable optimize — performance./impeccable clarify — улучшить непрозрачную UX-копию.Если не знаете, какая команда нужна — /impeccable redo this hero section без имени тоже работает: скилл сам выбирает подход.
Два файла в корне проекта, которые читает каждая команда перед генерацией:
/impeccable teach.Эти файлы решают главную проблему AI-генерации — дрейф в «modern SaaS». Каждая последующая команда стартует не с чистого листа, а с явных констант продукта.
Альфа-режим итераций прямо в браузере. Запускается /impeccable live. После старта:
Работает на Vite, Next.js (включая монорепо), SvelteKit, Astro, Nuxt. Умеет автоматически патчить strict-CSP. С v3.0.7 переживает дисконнекты и краши агента — есть durable session journal с командами live status, live resume, live complete.
Два дополнительных инструмента, не требующих AI-harness:
npx impeccable detect src/ — детерминированный детектор 27 anti-patterns без LLM и без API-ключа. JSON-вывод для CI и pre-commit хуков. Сканит локальные файлы, html, и публичные URL через Puppeteer.С версии 3.0 скилл использует диффузионные модели для бренд-работ. /impeccable shape рисует toolkit как настоящие картинки (палитра, типографика, мудборд), /impeccable craft пре-рендерит хи-фай мок и ведёт код к нему. В деле — GPT Image 2, Nano Banana Pro, Imagen 4 Ultra. Самый сильный пайплайн — в Codex с GPT 5.5.
11 AI-кодинг-сред:
/settings),/skills или $impeccable),Универсальный способ:
npx skills add pbakaus/impeccableКоманда сама определяет вашу harness и копирует файлы куда надо. Для Claude Code есть плагин-маркетплейс:
/plugin marketplace add pbakaus/impeccableДальше открывается /plugin в Claude Code. После установки — пишете /impeccable и получаете автодополнение по всем 23 командам.
Для точечной установки можно скачать ZIP под конкретный harness с impeccable.style или скопировать из репозитория dist/<harness>/.
| Инструмент | Сильная сторона | Когда выбирать |
| Impeccable | 23 команды + 7 справочников + Live Mode + CLI/Chrome-детектор | Полный продакшен-цикл AI-фронтенда: от брифа до полировки |
| Anthropic frontend-design | Базовый скилл, ~277k установок, оригинал, на котором всё начиналось | Минимальный entry-level, если хватает дефолтов и не нужны команды |
| Refero Styles | Готовые DESIGN.md из реальных продуктов | Когда нужен формальный «дизайн-вкус» как файл, а не словарь команд |
| Pencil | Агентный канвас с MCP внутри IDE | Когда работа ведётся через визуальный канвас, а не через CLI-команды |
| huashu-design | Терминал как дизайн-студия, китайский подход | Альтернатива от другой школы; см. блог-разбор |
Impeccable и Refero Styles — два слоя одного контура. Refero Styles даёт референс: «возьми вот этот стиль как файл». Impeccable даёт процесс: «вот словарь и команды, которыми ты этот стиль реализуешь и проверяешь». Пользоваться можно вместе.
Отдельный разбор соседей — Refero Styles и Refero.
Классический арк автора: teach → shape → craft. Сначала /impeccable teach собирает PRODUCT.md (аудитория, бренд-голос, anti-references). Потом /impeccable shape рисует мудборд и hi-fi мок как картинки. Потом /impeccable craft ведёт код к этому моку. Каждая последующая команда читает PRODUCT.md и DESIGN.md, и output не уплывает в generic SaaS.
Если пришла кодовая база, написанная без скилла, и она выглядит как «AI-slop»: запустите /impeccable document, чтобы извлечь токены в DESIGN.md, потом /impeccable polish <area> по разделам. Это не редизайн, а выравнивание под систему.
Автор предлагает три команды в очередь: audit → clarify → harden. Audit ловит технику (a11y, performance, респонсив), clarify чистит копии, harden закрывает edge cases (i18n, error states, переполнение текста).
Когда видно, что элемент кривой, но не получается сформулировать: /impeccable live, тычете в элемент, рисуете штрих, получаете три варианта.
/impeccable critique <area> — UX-ревью с разбором иерархии и ясности. Не правит ничего, только говорит что не так. Полезно перед демо и инвест-встречами.
Подключаете CLI: npx impeccable detect src/ --json → парсите вывод → блокируете PR с regression-патернами (Inter в новых файлах, фиолетовые градиенты, карточки в карточках). Никакого LLM в pipeline не нужно.
Chrome-расширение Impeccable работает на любом сайте. Открыли продукт конкурента — увидели подсветку anti-patterns и хороших решений. Бесплатный design research без подписок на Mobbin/Refero.
Если в вашем контуре полезно постоянно дёргать audit и polish — /impeccable pin audit и /impeccable pin polish дают шорткаты /audit и /polish без потери единого namespace.
Явный список того, что скилл считает «AI-slop» и борется с этим в каждой команде:
/impeccable extract и /impeccable document, но за вас не сделает.npx impeccable skills update руками, а не на автомате.register и anti-references, договориться с командой про общий словарь команд. Без этого скилл ускорит работу, но не уберёт generic-вкус.npx skills add pbakaus/impeccable./impeccable teach в новом проекте — заполнить PRODUCT.md осознанно, не пропускать anti-references./impeccable document для генерации DESIGN.md./impeccable pin audit, /impeccable pin polish.npx impeccable detect src/ --fast --json как блокирующий гейт против regression-патернов.npx impeccable skills update для свежих anti-patterns и команд.audit → clarify → harden.Если вы строите продукт с AI-кодингом и хотите, чтобы фронтенд выглядел как работа дизайнера, а не как дефолтный шаблон, — Impeccable сейчас самый компактный способ дать модели общий словарь и процесс. Хотите обсудить, как встроить такой контур в ваш стек, — напишите в Telegram.