adaptадаптация дизайна под все устройства

pbakaus/impeccable

Трансформирует существующий дизайн для разных устройств: анализирует что ломается при переходе с desktop на mobile, планшет, print или email.

адаптивный дизайн mobile responsive кросс-платформа адаптация

Установка

npx -y skills add pbakaus/impeccable --skill adapt --agent claude-code

Impeccable

Руководство по дизайну для AI-агентов. 1 скилл, 23 команды, итерации в живом браузере и 44 детерминированных правила детектора для AI-генерируемого фронтенд-дизайна.

Быстрый старт: в корне проекта запустите npx impeccable install, затем выполните /impeccable init внутри вашего AI-инструмента. Документация: impeccable.style

Зачем Impeccable?

Каждая модель обучена на одних и тех же SaaS-шаблонах. Без руководства результат всегда предсказуем: Inter для всего, градиенты фиолетовый→синий, карточки внутри карточек, серый текст на цветных фонах, иконка-плитка в скруглённом квадрате над каждым заголовком.

Impeccable добавляет:

Один процесс настройки: /impeccable init создаёт PRODUCT.md и предлагает DESIGN.md с данными об аудитории, бренде, стиле, цветах, типографике и компонентах.
23 команды — общий дизайн-словарь с AI: polish, audit, critique, distill, animate, bolder, quieter и другие.
44 детерминированных правила детектора плюс только-LLM проверки. CLI и браузерное расширение запускают детерминированные правила без LLM и без API-ключа.

Скилл: impeccable

Скилл устанавливается одной командой:

/impeccable <command> <target>

Начинайте каждый новый проект с:

/impeccable init

init уточняет, что это — брендовая поверхность (маркетинг, landing, портфолио) или продукт (app UI, дашборд), затем записывает дизайн-контекст для всех последующих команд.

23 команды

Команда	Что делает
`/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      # Добавить обработку ошибок + граничные случаи

Анти-паттерны

Не использовать заезженные шрифты (Arial, Inter, системные по умолчанию)
Не использовать серый текст на цветных фонах
Не использовать чистый чёрный/серый (всегда добавляйте оттенок)
Не оборачивать всё в карточки и не вкладывать карточки в карточки
Не использовать easing bounce/elastic (выглядит устаревшим)

Установка

Вариант 1: CLI-установщик (рекомендуется)

npx impeccable install

Определяет папки харнесса (~/.claude, ~/.codex, .cursor), позволяет выбрать провайдеры, устанавливает в текущий проект или глобально. Поддерживает --providers=claude,codex,cursor и --scope=project|global.

npx impeccable update   # Обновить существующую установку

Вариант 2: Git Submodule

git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor

Вариант 3: Скачать с сайта

Посетите impeccable.style, скачайте ZIP для вашего инструмента.

Вариант 4: Скопировать из репозитория

# 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

CLI детектора

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-цели, пропущенные заголовки).

Design hook

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

Установленные хуки: