ai-design-check CLI
Проверка по 147 правилам дизайна: находит признаки ИИ-интерфейса, чинит механические и передает остальное скиллу агента
- 247 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Команда --fix изменяет файлы проекта, поэтому сначала запустите ее с --dry-run
- Команда `scan` открывает запущенную страницу в вашем Chrome
- Скилл и `redesign` дают агенту право править код, `redesign` работает на отдельной git-ветке
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add cli/ai-design-checkОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Команда --fix изменяет файлы проекта, поэтому сначала запустите ее с --dry-run
- Команда `scan` открывает запущенную страницу в вашем Chrome
- Скилл и `redesign` дают агенту право править код, `redesign` работает на отдельной git-ветке
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
ai-design-check читает веб-проект (React, Vue, Svelte, Laravel Blade, HTML; Tailwind, Bootstrap или чистый CSS) и приложения на SwiftUI, Jetpack Compose, Flutter и React Native. Проверяльщик без зависимостей и без ключа API по 147 правилам указывает файл и строку: убранный фокус, размеры шрифта вне шкалы, Title Case в переводах, декоративный капс. Команда `--fix` исправляет то, что имеет один ответ: отступы и скругления сдвигаются к ближайшему шагу шкалы, слишком тяжелый шрифт становится жирным. Цвета, смысл слов и иерархия остаются в отчете, потому что требуют решения. `--fix --dry-run` сначала покажет изменения. Скилл (`npx skills add enmerasoftware/ai-design-check`) отдает остальное агенту: он измеряет экран, пишет короткий бриф из описания продукта, чинит и показывает счет до и после. Команда `scan` открывает запущенную страницу в вашем Chrome и проверяет контраст, размеры, перекрытия и ошибки скриптов. `redesign` просит агента изучить страницу и переделать ее на отдельной git-ветке с проверкой каждого шага.
Для кого. Фронтендерам и дизайнерам, которые делают интерфейс с Claude Code, Cursor или Codex и хотят убрать шаблонный вид сгенерированных экранов.
Подходит, если
- Интерфейс собран агентом и выглядит шаблонно, но в чем причина, неясно
- В компоненте убрана рамка фокуса без замены, и это надо найти по всему проекту
- Размеры отступов и шрифтов разошлись со шкалой, и нужно подтянуть их автоматически
- Нужно проверить запущенный `localhost` на контраст, перекрытия и ошибки в консоли
- Агента просят переделать страницу на ветке и проверить каждый проход
Не подходит, если
- Нужна замена дизайнеру: инструмент находит нарушения и чинит механические, а вкус и бренд остаются за вами
- Страница за входом и нет желания отдавать `cookie`: для `redesign` можно сохранить страницу в файл и передать его
- Нужна проверка серверного рендеринга без запуска: `scan` работает на запущенной странице
Пример запроса к агенту
Проверь этот проект командой ai-design-check, покажи, что можно исправить автоматически, и почини остальноеОграничения
Часть правил исправляется автоматически, остальное оставлено отчету, и агенту скилла нужно решать, что делать с цветом, словами и иерархией. Команде `scan` нужен локально установленный Chrome. Для `redesign` требуется агент Claude Code или Codex, потому что решение о содержимом страницы принимает модель. С флагом `--in-place` ветка и коммиты не создаются, и проход, потерявший улучшения, откатывается. Пакет в npm, а правила покрывают веб и четыре мобильных стека.
Как отключить. Проверку отдельно удалять не нужно: она запускается через npx и ничего не ставит. Скилл уберите из каталога .agents/skills проекта. Ветки `redesign` удаляются обычной командой `git branch -D`.
Частые вопросы
Что проверяет инструмент?
147 правил: доступность (фокус, размеры касаний), типографику и шкалу размеров, отступы и скругления, регистр в переводах и признаки шаблонного интерфейса. Каждое нарушение имеет файл, строку и имя правила.
Нужен ли ключ API?
Нет. Проверка, механические исправления и команда `scan` работают без модели и без ключа. Агент нужен только для скилла и команды `redesign`.
Что делает флаг --nearest-type?
Сдвигает размеры вида text-[Npx] к ближайшему размеру темы, например lg:text-[64px] превращается в lg:text-6xl.
Какие платформы поддерживаются?
Веб-проекты на React, Vue, Svelte, Laravel Blade и HTML со стилями Tailwind, Bootstrap или CSS, а также приложения на SwiftUI, Jetpack Compose, Flutter и React Native.
Как проверить запущенную страницу?
Выполните `npx @enmera/ai-design-check scan http://localhost:3000`. Страница открывается в вашем Chrome на ширине настольного экрана и телефона.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
CLI-инструментыИщет в сгенерированном фронтенде приметы ИИ, от фиолетовых градиентов до терракотового тона, и переписывает интерфейс
Скилл и CLI для агентов: интерфейс без шаблонного вида, 25 команд, проверка шаблонности правилами и оценка качества от 0 до 100
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
Скилл для агента с базой из 107 стилей, 127 палитр и 107 шрифтовых пар: генерирует дизайн-систему и проверяет код интерфейса
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Скилл дизайна интерфейсов: арт-дирекция под продукт, общий DESIGN.md, токены, проверка верстки и доступности в браузере.
Коротко о README
Описание обещает найти признаки сгенерированного интерфейса, исправить их и не дать вернуться. Три шага: проверка, исправление без агента, скилл для остального. Затем таблица инструментов (проверка, скилл, `scan`, `redesign`), раздел про живую страницу и примеры результата.