Unslop — навык для Claude Code и Codex, который превращает «вайбкоженный» интерфейс, выглядящий как сгенерированный ИИ, в оформленный экран с собственным характером. Сначала он находит «слоп» — фиолетовые градиенты, свечения, подписи с эмодзи, крикливый текст и неровные отступы, — затем задаёт направление исходя из продукта и исправляет экран проход за проходом, как дизайнер при редлайн-ревью.
Навык работает с экраном на том стеке, на котором он собран, включая Next.js, React, Vue, Svelte, Tailwind или обычные HTML и CSS, и применяется к дашбордам, приложениям и лендингам. Если есть только ссылка на живой сайт, Unslop может работать и с ним, но для снимка живого сайта нужны Playwright и браузер Chromium, установленные из каталога проекта.
Перед любыми правками навык проводит аудит экрана и предлагает направление, чтобы пользователь мог скорректировать курс заранее. Аудит перечисляет каждый признак слопа и указывает, где он находится. Направление включает характер, мир, один или два момента, которые несут цвет, и фирменную деталь; всё берётся из продукта пользователя. Если экран уже хорош, навык сообщает об этом и предлагает несколько небольших доработок вместо редизайна.
Правки выполняются проходами в порядке: отступы, цвет, иконки, текст, типографика, раскладка, детали, визуалы и движение. Визуалы показывают сам продукт вместо глянцевого пятна; если герою нужна сцена или объект, навык может сгенерировать их через сервис изображений, но показывает промпт и спрашивает перед каждой платной генерацией. При запросе Unslop может создать story video — квадратное видео короче 10 секунд о том, как экран «анслопится», готовое к публикации.
- Находит «слоп» в интерфейсе и указывает, где он находится
- Предлагает направление дизайна из продукта пользователя
- Исправляет экран проходами от отступов до движения
- Работает с проектами на Next.js, React, Vue, Svelte, Tailwind, HTML и CSS
- Снимает живой сайт по ссылке через Playwright
- Создаёт story video короче 10 секунд
В Claude Code навык вызывается командой /unslop с описанием задачи, в Codex — командой $unslop; можно также сформулировать просьбу своими словами, и агент подхватит навык сам. Для Claude Code навык копируется в ~/.claude/skills либо, для одного проекта, в .claude/skills внутри этого проекта. Для Codex навык можно установить через skill-installer по адресу репозитория skills/unslop либо скопировать вручную в ~/.agents/skills или в .agents/skills одного проекта.
Снимок живого сайта и создание story video используют Playwright и его браузер Chromium, устанавливаемые из каталога проекта командами npm install -D playwright и npx playwright install chromium. Story video дополнительно требует ffmpeg, установленный и доступный в PATH. Генерация изображений подключается к сервисам вроде fal, Replicate, OpenAI images или Higgsfield, в том числе как MCP-сервер, если сервис ещё не подключён.
Код и материалы доступны по лицензии CC BY 4.0: их можно использовать, изменять и распространять, в том числе коммерчески, при условии указания Damir Sokolovsky (@heydamir) и ссылки на репозиторий.
Блог