unslop — скилл, который превращает вайб-кодед интерфейсы в дизайн с характером

Вайб-кодинг выдаёт узнаваемые экраны: фиолетовые градиенты на кнопках, свечение вокруг карточек, эмодзи в каждой подписи, крикливые заголовки и отступы «какие получились». Код рабочий, скриншот на первый взгляд приличный, но за секунду видно, что интерфейс сделан нейросетью. Репозиторий heydamir/unslop — скилл для Claude Code и Codex, который борется именно с этим. Автор — дизайнер Дамир Соколовский (@heydamir), начавший на X серию Unslopping. Скилл находит признаки slop, задаёт визуальное направление из самого продукта и правит экран проход за проходом, как дизайнер при редлайн-ревью — разметке правок поверх макета.

Что делает скилл

Возможности описаны в пяти пунктах README:

• Аудит. Перечисляет каждый признак slop и указывает, где он живёт в коде.
• Направление. Характер, мир, один-два момента, которые понесут цвет, и фирменная деталь — всё выводится из вашего продукта, а не из трендов.
• Проходы. Отступы, цвет, иконки, копирайт, типографика, layout, детали, визуалы и движение — строго по порядку.
• Визуалы. Показывает продукт вместо глянцевого блоба. Если герою нужна сцена или объект, скилл сгенерирует её через сервис картинок — fal, Replicate, OpenAI images или Higgsfield. Ничего не подключено — предложит подключить как MCP-сервер, покажет промпт и спросит перед каждой платной генерацией. Дашбордам и приложениям генерация почти не нужна.
• Стори-видео. Квадратное видео до 10 секунд, где экран «расшламливает» себя сам, готовое к посту. Нужны Playwright и ffmpeg.

Работает с любым стеком: Next.js, React, Vue, Svelte, Tailwind или чистые HTML и CSS. Берёт дашборды, приложения и лендинги, а по одной ссылке — и живой сайт.

Как устроен рабочий процесс

Скилл идёт по восьми шагам:

1. Посмотреть экран. Найти файлы, которые его рендерят, и по возможности открыть страницу в браузере — судить по тому, что видят люди, а не только по коду. Есть только ссылка на живой сайт? Встроенный скрипт snapshot.mjs сохраняет копию страницы и её скриншот для сравнения. Есть только картинка? Скилл сначала пересоберёт экран в один статичный HTML-файл.
2. Аудит. Пройтись по справочнику признаков signs.md и выписать каждый находкой по строке.
3. Оценить масштаб. Тяжёлый slop — полный процесс. Лёгкий — режим полировки: правятся только находки аудита, направление берётся из существующего бренда. Slopa нет — скилл скажет об этом прямо и предложит максимум два-три мелких уточнения. Хороший экран он менять не будет.
4. Направление и стоп. Аудит и направление показываются пользователю до любых правок, потому что смена направления потом означает переделку всего.
5. Девять проходов. Каждый проход завершается на всём экране, прежде чем начнётся следующий.
6. Проверка по чеклисту: рендер снова, сравнение со списком аудита, доработка остатков.
7. Отчёт с направлением и кратким описанием каждого прохода.
8. Запись стори-видео, если вы её просили.

Есть и ограничение на темп: рендерить экран для проверки можно не больше трёх раз за прогон.

Направление: пять строк

Перед правками скилл пишет пять коротких строк. Источник — то, что страница говорит о продукте и его аудитории:

• Продукт — что делает и для кого, одним простым предложением.
• Характер — два-три конкретных слова вроде «спокойный, точный, чуть тёплый» или «быстрый, технический, игривый». Слова clean, modern, sleek, minimal и premium запрещены: они подходят к любому шаблону и ничего не описывают.
• Мир — материал и обстановка, к которым продукт принадлежит сам собой. Приложение заметок живёт рядом с бумагой и чернилами, инструмент мониторинга — с приборами и ночными сменами. Мир задаёт оттенок нейтральных цветов, акцент и визуал.
• Моменты — одно-два места, где экран получает насыщенный цвет и материал: отрендеренный объект внутри превью, график, где каждый цвет означает свою серию данных.
• Фирменная деталь — одна маленькая деталь, которую имел бы только этот продукт: живая точка статуса у мониторинга, кейкапы у инструмента для разработчиков, рукописное подчёркивание у обучающего приложения. Одна деталь, а не пять.

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

Девять проходов

Порядок не случайный, и скилл его объясняет. Отступы идут первыми: при правильном ритме всё остальное читается иначе. Копирайт — раньше типографики и layout, потому что длина заголовка определяет его размер и место. Визуалы и движение — в конце, потому что они должны ложиться на экран, который уже работает без них.

За каждым проходом стоит набор конкретных правил. Границы — тонкие линии цвета текста с прозрачностью 6–10%. Плашки «New ✨» и «Beta 🚀» исчезают без нужды. Цифры с базой сравнения: «+12% к прошлому месяцу». Утверждения вроде «Loved by 10,000+ teams» скилл спрашивает у пользователя: подтвердят — сделает их тихими и конкретными, не подтвердят — удалит. В графиках — приглушённая сетка, один акцент на главном элементе и никакого радужного набора столбцов внутри одной серии.

Почему это не просто «сделай красиво»

Философия скилла: разница между slop и ремеслом — в том, куда уходит насыщенность. Slop размазывает цвет и эффекты по «хрому» — фонам, кнопкам, рамкам и подписям. Ремесло держит хром тихим и вкладывает насыщенность в один-два момента контента, которые человек запомнит: отрендеренный объект, красивый график, картинку из мира продукта.

Поэтому уборка мусора — только половина работы. Чистый экран, который мог бы принадлежать чему угодно, — это следующий шаблон. Цель каждого прогона — экран, который мог бы быть только у этого продукта. В чеклисте для этого есть шаблонная проверка: подставьте в готовый экран имя другого продукта. Если он всё равно подходит — направление усилено недостаточно.

Стори-видео

Вирусное видео из серии Unslopping — это квадратный ролик примерно на 10 секунд, где экран исправляет себя шаг за шагом, с красной разметкой на slop. Правила сборки:

• Ничего не подменяется, всё морфится. Одна страница, каждый шаг меняет только CSS, и значения твинятся на месте: отступы раскрываются, фиолетовый уходит, углы смягчаются.
• Волна. Элементы стартуют с задержкой в десятки миллисекунд сверху вниз, и изменение бежит по экрану, а не переключается разом.
• Текст катится. Старые слова уплывают с размытием, новые въезжают по буквам.
• Сначала красные линии. На slop появляются красные рамки с тегами, на шаге отступов — красные измерения, которые белеют, когда значение исправлено.
• Близко и коротко. Кадр обрезан по самой заметной части изменений, чтобы читалось с телефона.

Технически строится файл unslop-story/story.html — автономная копия экрана, где изменения каждого шага лежат классами .s1, .s2 и дальше поверх исходных стилей. Рендер запускает скрипт story.mjs, ему нужны Playwright и ffmpeg; есть режим предпросмотра --play и --wide для 16:9. В каждом видео стоит маленький кредит «unslop by @heydamir» — этого требует лицензия.

Установка

Для Claude Code скилл копируется в папку навыков:

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

Для одного проекта — в .claude/skills/ внутри проекта. Для Codex есть два пути: попросить агента установить скилл прямо из репозитория командой $skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop или скопировать вручную в ~/.agents/skills/.

Для скриншотов живых сайтов и стори-видео поставьте Playwright с браузером Chromium и убедитесь, что ffmpeg есть в PATH:

npm install -D playwright
npx playwright install chromium

Запуск — командой /unslop в Claude Code или $unslop в Codex, либо просто своими словами: агент подхватит скилл сам. Примеры из README: «/unslop this dashboard», «/unslop the hero of https://example.com» или «/unslop my landing page and make the story video so I can post it».

Границы

Скилл явно перечисляет, чего не делает:

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

Примеры двух вайб-кодед экранов для тренировки лежат в папке examples. Подробные справочники — признаки slop, токены, работа с визуалами и готовые референсы — внутри папки skills/unslop. Лицензия — CC BY 4.0 (LICENSE): использовать, менять и распространять можно, в том числе коммерчески, с указанием авторства. Если не хочется настраивать скилл самому, Дамир правит ключевые экраны под заказ за три дня — детали на heydamir.design/unslop.