Impeccable 3.9.1: как убрать фиолетовые градиенты из AI-кода за 10 секунд

Андрей Отинов -

Вы сидите за столом, смотрите на свежесгенерированный AI-инструментом макет страницы. И видите знакомую картину: шрифт Inter, фиолетовый градиент на кнопке, карточка внутри карточки, ещё одна карточка. Всё чисто, аккуратно — и совершенно безлико. Разработчик пожимает плечами: «AI так сделал».

Источник: GitHub репозиторий Impeccable

Это не брак инструмента. Это проблема обучения. AI-помощники по коду — Codex, Claude Code, Cursor — умеют писать код, но не умеют отличать хороший дизайн от шаблонного. Они не знают, что Inter — не единственный шрифт в мире, а фиолетовый градиент — не универсальное решение для кнопки.

В июле 2026 года вышла версия 3.9.1 открытого инструмента Impeccable, который решает именно эту проблему. Он не заменяет дизайнера, но учит AI-инструменты видеть разницу между «сделано» и «сделано хорошо». И устанавливается одной командой.

Что на самом деле даёт этот репозиторий

Impeccable — это не программа, которую вы запускаете. Это набор инструкций, словарей и правил, которые вы подключаете к вашему AI-инструменту для кода. Внутри три вещи:

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

23 команды. Это готовые запросы, которые вы даёте AI-инструменту, когда хотите проверить или поправить дизайн. Например, команда «проверь отступы» заставит инструмент пройтись по коду и найти места, где расстояния между элементами нарушают логику.

Детектор, который ловит слабые места прямо в коде. Он не ждёт, пока вы скажете «проверь». Он сам находит типовые ошибки: карточки, вложенные без нужды, кнопки без hover-состояния, текст, который сливается с фоном.

В версии 3.9.1 появился дизайн-хук — детектор проверяет правки прямо в момент редактирования. То есть вы меняете строчку, а инструмент сразу говорит: «С этим цветом текст будет нечитаем». Раньше нужно было запускать проверку отдельно.

Куда это встраивается в рабочий процесс

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

Разработчик тратит время на правки. Дизайнер тратит время на объяснения. Продакт тратит время на согласование.

Impeccable ставится между AI-инструментом и кодом. Он не блокирует генерацию, но добавляет слой проверки. Когда AI пишет <div class="card"><div class="card-inner">, детектор может сказать: «Зачем здесь вложенная карточка? Можно одним элементом». Когда AI ставит font-family: 'Inter', словарь напоминает: «В проекте используется системный шрифт, не меняй».

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

Как попробовать за вечер, не перестраивая команду

Установка в версии 3.9.1 — одна команда. Если вы используете Codex, Claude Code или Cursor, достаточно выполнить в терминале:

npm install -g impeccable

Или, если предпочитаете установку через curl:

curl -sSL https://raw.githubusercontent.com/andrew--r/impeccable/main/install.sh | bash

После установки нужно подключить скилл к вашему инструменту. Для Codex это файл конфигурации, куда добавляется строка "impeccable": true. Для Cursor — настройка в .cursorrules. Для Claude Code — инструкция в системном промпте.

Дальше можно проверить на реальном проекте. Возьмите страницу, которую недавно генерировал AI, и запустите детектор:

impeccable check ./src/components

Детектор пройдётся по файлам и покажет, где дизайн отклоняется от правил. Вы увидите не абстрактные «улучшите UX», а конкретные строки кода с пояснением: «шрифт не соответствует проекту», «отступ между заголовком и текстом меньше стандартного», «кнопка без состояния при наведении».

Что проверить за первую неделю:

  • Совместимость с вашей версией инструмента. Impeccable — открытый проект, он может отставать от обновлений Codex или Cursor. Перед установкой проверьте, поддерживается ли ваша версия.
  • Количество ложных срабатываний. Детектор может находить проблемы там, где их нет, особенно если в проекте нестандартные дизайн-решения. Первую неделю лучше проверять каждое предупреждение вручную.
  • Реакция команды. Разработчики могут воспринять автоматические проверки как контроль. Объясните, что это инструмент, который экономит их время на правках, а не способ ловить ошибки.

Какие риски стоит проверить до внедрения

Impeccable — открытый инструмент, и у этого есть обратная сторона.

Поддержка может быть нерегулярной. Автор обновляет проект, но это не коммерческий продукт с SLA. Если выйдет новая версия Codex, которая ломает совместимость, исправление может появиться не сразу.

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

45 правил — это много. Для небольшого проекта или прототипа часть правил может быть избыточной. Например, проверка микроанимации на странице, которая будет жить две недели. Придётся либо отключать правила вручную, либо мириться с шумом.

Зависимость от одного разработчика. Репозиторий ведёт один человек — Andrew R. Если он потеряет интерес или уйдёт в другой проект, развитие остановится. Форкнуть можно, но поддерживать форк — отдельная работа.

Что делать прямо сейчас

Impeccable 3.9.1 — не серебряная пуля, но полезный инструмент для команд, которые регулярно используют AI-инструменты для генерации кода и хотят получать на выходе не просто рабочий, а аккуратный результат.

Если вы разработчик: установите, проверьте на одном проекте, посмотрите, сколько ложных срабатываний. Если их мало — оставьте в рабочем процессе.

Если вы продакт или техлид: дайте команде неделю на тест. Попросите разработчика записать, сколько времени ушло на правки дизайна до и после подключения Impeccable. Если разница заметна — внедряйте.

Если вы дизайнер: это ваш инструмент контроля. Вы можете написать свои правила для детектора и быть уверенным, что AI-инструмент не «улучшит» макет без спроса.

Главное — не ждать, что инструмент сделает дизайн сам. Он только не даёт AI-инструменту скатываться в шаблон. Хороший дизайн по-прежнему начинается с человека.

Источники

Темы журнала

Что почитать дальше