unslop — навык для Claude Code и Codex, который помогает переделать интерфейс, собранный с помощью ИИ, если тот выглядит шаблонно. Он сначала указывает на конкретные проблемы, затем предлагает направление оформления и только после этого правит экран. Это вариант для тех, кто уже получил работающую страницу, но не хочет вручную перебирать отступы, цвета, подписи и иконки.
Как unslop разбирает экран и меняет оформление
Навык — это набор инструкций для ИИ-агента: вы обращаетесь к нему внутри Claude Code или Codex, а агент выполняет описанную в нём работу. Если вы пока не работали с такими дополнениями, начните с объяснения, что такое навыки для Claude и других агентов. unslop рассчитан на интерфейсы, которые появились в том числе благодаря вайб-кодингу — когда человек описывает желаемый результат, а ИИ помогает написать код.
Первый этап — разбор экрана. По README навык ищет характерные признаки шаблонного ИИ-дизайна: фиолетовые градиенты, свечения, эмодзи вместо подписей, чересчур громкие формулировки и неровные отступы. Он перечисляет проблемы и указывает, где они находятся, чтобы вы могли проверить его выводы, а не принимать общий вердикт «выглядит плохо».
Затем unslop предлагает направление, опираясь на ваш продукт: характер оформления, визуальный мир, один-два цветовых акцента и узнаваемую деталь. Разработчик сравнивает дальнейшую работу с разбором макета дизайнером: агент проходит по экрану несколькими заходами. Порядок указан в README: отступы, цвет, иконки, тексты, шрифты, компоновка, детали, изображения и движение элементов.
Навык работает с экранами на Next.js, React, Vue, Svelte, Tailwind, а также на обычных HTML и CSS. В README названы панели показателей, приложения и посадочные страницы. Можно дать и ссылку на действующий сайт, если исходный проект не указан; это не означает, что навык сам опубликует изменения на таком сайте.
Для крупных иллюстраций на первом экране unslop может предложить генерацию изображения через fal, Replicate, OpenAI images или Higgsfield. Если сервис не подключён, агент предлагает подключить его как MCP-сервер — способ дать агенту доступ к внешнему инструменту. Перед каждой платной генерацией он, согласно README, показывает запрос для генератора и спрашивает разрешение; подробнее о механизме — в материале что такое MCP и как подключить сервер.
Когда правка через Claude Code или Codex пригодится
Вы ведёте проект в Claude Code, быстро собрали страницу, но видите смесь градиентов, эмодзи и случайных отступов. Здесь удобно начать с аудита: unslop должен назвать проблемные места и предложить направление до изменения файлов. На этом этапе можно скорректировать его предложение, а уже потом переходить к правкам.
Другая ситуация — у вас есть посадочная страница, и вы хотите привести к одному стилю текст, иконки, типографику и первый экран. Навык не ограничивается заменой цвета: в README перечислены и формулировки, и компоновка, и визуальные детали. Если вы работаете в Codex, для него предусмотрены отдельные установка и вызов.
Третий случай — нужно оценить оформление действующего сайта по ссылке или сделать короткий ролик с изменением экрана для публикации. README допускает работу со ссылкой и создание квадратного видео длительностью менее десяти секунд. Для видео нужны дополнительные программы; для обычной правки экрана их устанавливать по этой инструкции не требуется.
Если экран вас уже устраивает, полный редизайн не нужен. По README unslop в такой ситуации должен сказать об этом и предложить несколько небольших улучшений. Не нужен он и тогда, когда вы не работаете с Claude Code или Codex и не собираетесь поручать агенту разбор интерфейса: самостоятельным графическим редактором репозиторий не назван.
Установка unslop в папку навыков агента
Для Claude Code README предлагает скопировать навык в общую папку навыков. Выполните команды из каталога, где хотите разместить клонированный репозиторий:
git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/Если навык нужен только одному проекту, README предлагает вместо общей папки поместить его в .claude/skills/ внутри этого проекта. Готовой команды для такого варианта там нет. Путь установки важен: агенту нужны файлы навыка, а не только ссылка на GitHub.
Для Codex автор предлагает попросить установщик навыков забрать unslop из репозитория. В README эта строка приведена как команда для Codex:
$skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslopЕсть и ручной вариант для Codex — скопировать файлы в общую папку. Для одного проекта README также называет .agents/skills/ внутри него, но не приводит отдельной команды копирования туда.
git clone https://github.com/heydamir/unslop
mkdir -p ~/.agents/skills && cp -r unslop/skills/unslop ~/.agents/skills/Если хотите получать снимок действующего сайта или делать видео, установите Playwright и браузер Chromium из каталога проекта, где запускаете навык. Playwright здесь нужен для работы с браузером. Для видео дополнительно требуется ffmpeg, доступный через PATH; команду его установки README не даёт.
npm install -D playwright
npx playwright install chromiumТри запроса для панели, сайта и ролика
В Claude Code вызов начинается с /unslop, в Codex — с $unslop. README также допускает просьбу своими словами: агент должен подобрать навык сам. Чтобы проверить результат первого запуска, используйте пример автора для панели показателей:
/unslop this dashboardВ ответе по описанному сценарию сначала ожидайте список проблем экрана и предложение по стилю, а не немедленную замену всего оформления. После согласования направления агент проходит по отступам, цвету, иконкам и другим частям интерфейса. README не показывает готовый результат этой конкретной команды, поэтому заранее обещать определённый вид панели нельзя.
Второй пример обращается к первому экрану сайта по ссылке. Первый экран часто называют hero: это верхняя часть страницы, которую посетитель видит сразу после открытия.
/unslop the hero of https://example.comТретий запрос добавляет к работе над посадочной страницей ролик, где экран меняется в процессе. Для такого результата уже нужны Playwright и ffmpeg, а не только файлы навыка.
/unslop my landing page and make the story video so I can post itЧто проверить перед доступом к проекту
На момент обзора репозиторий создан 29 октября 2026 года, последний коммит указан 1 ноября 2026 года; у него 4517 звёзд и 222 форка. Это молодой проект: число звёзд говорит об интересе к нему, но не заменяет проверку на вашем экране. Основным языком репозитория в карточке указан JavaScript.
Лицензия — CC BY 4.0. README разрешает использовать, менять и распространять навык, в том числе коммерчески, при условии указания Дамира Соколовского и ссылки на репозиторий. Если планируете передавать копию навыка коллегам или включать его в свой набор инструментов, сохраните эту атрибуцию.
Помните, что агент работает с файлами проекта и выполняет действия по правке интерфейса. Для снимка сайта он запускает браузер через Playwright, а для ролика использует ffmpeg; подключение сервиса изображений даёт ему ещё и внешний инструмент. До запуска определите, какие файлы и сервисы готовы ему предоставить, и проверьте предложенное направление до правок. Ключи API и подписки как обязательное условие обычного запуска README не указывает.
Источник: репозиторий heydamir/unslop на GitHub.