Системное упрощение перегруженных интерфейсов: анализирует избыточные элементы, дублирующиеся паттерны и визуальный шум. Безжалостная минимизация.
npx -y skills add pbakaus/impeccable --skill distill --agent claude-codeРуководство по дизайну для AI-агентов. 1 скилл, 23 команды, итерации в живом браузере и 44 детерминированных правила детектора для AI-генерируемого фронтенд-дизайна.
Быстрый старт: в корне проекта запустите npx impeccable install, затем выполните /impeccable init внутри вашего AI-инструмента. Документация: impeccable.style
Каждая модель обучена на одних и тех же SaaS-шаблонах. Без руководства результат всегда предсказуем: Inter для всего, градиенты фиолетовый→синий, карточки внутри карточек, серый текст на цветных фонах, иконка-плитка в скруглённом квадрате над каждым заголовком.
Impeccable добавляет:
/impeccable init создаёт PRODUCT.md и предлагает DESIGN.md с данными об аудитории, бренде, стиле, цветах, типографике и компонентах.polish, audit, critique, distill, animate, bolder, quieter и другие.Скилл устанавливается одной командой:
/impeccable <command> <target>
Начинайте каждый новый проект с:
/impeccable init
init уточняет, что это — брендовая поверхность (маркетинг, landing, портфолио) или продукт (app UI, дашборд), затем записывает дизайн-контекст для всех последующих команд.
| Команда | Что делает |
|---|---|
/impeccable craft | Полный пайплайн shape-then-build с визуальной итерацией |
/impeccable init | Разовая настройка: дизайн-контекст, PRODUCT.md и DESIGN.md, режим live |
/impeccable document | Генерировать корневой DESIGN.md из существующего кода проекта |
/impeccable extract | Вынести переиспользуемые компоненты и токены в дизайн-систему |
/impeccable shape | Спланировать UX/UI перед написанием кода |
/impeccable critique | UX-ревью: иерархия, ясность, эмоциональный отклик |
/impeccable audit | Технические проверки качества (a11y, производительность, адаптивность) |
/impeccable polish | Финальный проход, выравнивание с дизайн-системой, готовность к релизу |
/impeccable bolder | Усилить скучный дизайн |
/impeccable quieter | Смягчить слишком жирный дизайн |
/impeccable distill | Свести к сути |
/impeccable harden | Обработка ошибок, i18n, переполнение текста, граничные случаи |
/impeccable onboard | Онбординговые потоки, пустые состояния, пути активации |
/impeccable animate | Добавить осмысленную анимацию |
/impeccable colorize | Ввести стратегический цвет |
/impeccable typeset | Исправить выбор шрифтов, иерархию, размеры |
/impeccable layout | Исправить разметку, отступы, визуальный ритм |
/impeccable delight | Добавить моменты радости |
/impeccable overdrive | Добавить технически выдающиеся эффекты |
/impeccable clarify | Улучшить неясный UX-копирайт |
/impeccable adapt | Адаптировать для разных устройств |
/impeccable optimize | Улучшения производительности |
/impeccable live | Режим визуальных вариантов: итерации на элементах прямо в браузере |
Используйте /impeccable pin <command> для создания самостоятельных ярлыков (например, pin audit создаёт /audit).
/impeccable audit blog # Аудит hub-страниц блога и постов
/impeccable critique landing # UX-ревью дизайна
/impeccable polish settings # Финальный проход перед релизом
/impeccable harden checkout # Добавить обработку ошибок + граничные случаи
npx impeccable install
Определяет папки харнесса (~/.claude, ~/.codex, .cursor), позволяет выбрать провайдеры, устанавливает в текущий проект или глобально. Поддерживает --providers=claude,codex,cursor и --scope=project|global.
npx impeccable update # Обновить существующую установку
git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor
Посетите impeccable.style, скачайте ZIP для вашего инструмента.
# Claude Code (проект)
cp -r dist/claude-code/.claude your-project/
# Claude Code (глобально)
cp -r dist/claude-code/.claude/* ~/.claude/
# Gemini CLI
cp -r dist/gemini/.gemini your-project/
# Codex CLI
cp -r dist/agents/.agents your-project/
mkdir -p your-project/.codex
cp dist/codex/.codex/hooks.json your-project/.codex/hooks.json
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 ignores list # показать игнорируемые правила
npx impeccable ignores add-file "src/legacy/**"
Детектор выявляет 44 детерминированных проблемы: AI-слоп (side-tab borders, фиолетовые градиенты, bounce easing) и общее качество дизайна (длина строки, сжатые отступы, маленькие touch-цели, пропущенные заголовки).
На Claude Code, GitHub Copilot, Codex и Cursor npx impeccable install устанавливает хук детектора дизайна. Хук запускается при прямых правках UI-файлов и возвращает находки в агент-поток.
Установленные хуки:
.claude/settings.local.json (gitignored).github/hooks/impeccable.json.cursor/hooks.json.codex/hooks.jsonCursor · Claude Code · GitHub Copilot · Gemini CLI · Codex CLI · OpenCode · Pi · Kiro · Trae · Rovo Dev · Qoder
Лицензия: Apache 2.0 · Создано Paul Bakaus