Unslop·Damir Sokolovsky (@heydamir)
Unslop — скилл для доработки AI-интерфейсов
Убирает шаблонные признаки AI-дизайна: проводит аудит, предлагает направление и помогает доработать отступы, цвета, тексты и композицию в Claude Code и Codex.
Что помогает сделать скилл
Находит признаки шаблонной AI-вёрстки и объясняет, где они мешают интерфейсу.
Предлагает визуальное направление на основе продукта, а не случайного модного стиля.
Помогает поэтапно доработать отступы, цвета, иконки, тексты, типографику, компоновку и анимацию.
Работает с кодом проекта, а по ссылке или скриншоту может подготовить отдельный вариант страницы.
По запросу помогает сделать story-видео изменений; для этого нужны Playwright, Chromium и ffmpeg.
Аудит без правок
Примени unslop к главной странице проекта. Найди признаки шаблонного AI-дизайна и предложи направление. Пока не изменяй файлы.
Доработка дашборда
Примени unslop к дашборду. Сохрани структуру, данные и функции. Упорядочи отступы и типографику, убери лишние эффекты. Сначала покажи план.
Вариант по ссылке
Примени unslop к первому экрану https://example.com. Подготовь отдельную локальную копию, сохрани смысл контента и объясни, как перенести результат в проект.
Как подключить
Выберите подходящий способУстановить Unslop в Claude Code
Локальная установка скилла для всех проектов пользователя. Для одного проекта используйте каталог .claude/skills/ внутри этого проекта.
Что понадобится
- Установленный Claude Code или Codex с поддержкой скиллов и доступом к файлам проекта.
- Git и доступ к GitHub для команд копирования; вручную можно скачать ZIP репозитория.
- 01
Скачайте репозиторий
Выполните git clone в удобной рабочей папке. Если папка unslop уже есть, сначала проверьте её содержимое, а не перезаписывайте.
- 02
Скопируйте папку скилла
Перенесите unslop/skills/unslop целиком в ~/.claude/skills/. Для проектной установки используйте .claude/skills/.
- 03
Откройте новую сессию
Перезапустите сессию Claude Code в нужном проекте и вызовите /unslop с описанием экрана.
Скачать и скопировать Unslop
git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills
cp -r unslop/skills/unslop ~/.claude/skills/Пример вызова в Claude Code
/unslop проверь главную страницу проекта. Сначала покажи аудит и направление, пока не изменяй файлы.Как проверить
Попросите /unslop провести только аудит одного компонента. Убедитесь, что агент нашёл инструкцию и сначала показал проблемы и направление, не начав несогласованный редизайн.
Копируйте всю папку skills/unslop, а не один SKILL.md. Примеры команд ниже рассчитаны на shell macOS/Linux или совместимую среду; в Windows можно перенести папку вручную. Сам скилл не требует отдельного API-ключа, но агент и дополнительные сервисы могут требовать оплату.
Установка в README автораЧто такое Unslop и кому он пригодится
Unslop — скилл Дамира Соколовского для Claude Code и Codex, который помогает доработать интерфейс после вайбкодинга. Он ищет типичные следы шаблонной AI-вёрстки: повсеместное свечение, случайные градиенты, эмодзи вместо иконок, кричащие надписи и неровные отступы. Затем предлагает визуальное направление, связанное с самим продуктом.
Это не тема для сайта и не отдельный графический редактор. Скилл задаёт агенту порядок анализа и изменения кода. Он подходит для лендингов, дашбордов и экранов приложений на React, Next.js, Vue, Svelte, Tailwind и обычном HTML/CSS. Перечень сред и сценариев приведён в README автора.
Unslop полезен, когда прототип уже работает, но выглядит безлико или перегруженно. Если у проекта есть узнаваемый стиль, укажите, какие элементы бренда нужно сохранить. Если нужен только аудит, прямо попросите не редактировать файлы до согласования.
Как проходит доработка интерфейса
Сначала агент изучает экран и перечисляет конкретные проблемы. После этого формулирует направление: что делает продукт, какой у него характер, с каким визуальным миром он связан, где должны находиться главные акценты и какая небольшая деталь сделает интерфейс узнаваемым.
По инструкции автора направление нужно показать пользователю до правок и дождаться ответа. Исключение — когда пользователь заранее попросил действовать самостоятельно. Это удобно: можно остановить неподходящую идею до того, как агент перепишет страницу.
Далее работа идёт в девять проходов:
- Отступы и ритм элементов.
- Цветовая система и акценты.
- Иконки и их согласованность.
- Тексты интерфейса.
- Типографика.
- Компоновка.
- Детали оформления.
- Изображения и визуальные акценты.
- Анимация.
В конце агент должен повторно открыть результат, сверить его с аудитом и объяснить, что изменил. Если исходный экран уже хорош, инструкция предлагает небольшие уточнения, а не обязательный редизайн ради редизайна.
Как поставить задачу, чтобы получить полезный результат
Вместо «сделай красиво» дайте агенту цель, аудиторию и границы изменений. Например:
Примени unslop к дашборду в этом проекте. Аудитория — владельцы небольших магазинов. Сохрани структуру разделов, данные, логотип и основной зелёный цвет. Сначала покажи проблемы и предложи направление. Не меняй бизнес-логику, не добавляй новые функции и не подключай платные сервисы без согласования.
Для локального экрана полезно указать маршрут, путь к компоненту и команду запуска проекта. Для публичной страницы — ссылку и нужную тему оформления. При работе по скриншоту объясните, что именно нужно воспроизвести и какие части можно переработать.
Не оценивайте результат только по первому экрану. Проверьте мобильную ширину, длинные подписи, состояния кнопок, контраст текста и работу элементов управления. Unslop помогает организовать эту проверку, но сам по себе не гарантирует отсутствие ошибок или улучшение конверсии.
Если есть только ссылка или скриншот
Доступ к исходникам не обязателен для подготовки варианта редизайна. Для публичного сайта в скилле есть скрипт снимка страницы: он сохраняет локальную HTML-копию и скриншот исходного вида. Если дан только скриншот, инструкция предлагает сначала восстановить экран в отдельном HTML-файле.
Локальная копия не меняет рабочий сайт. Результат нужно передать разработчику или перенести в исходный проект. Скриптовые анимированные фоны могут не сохраниться, поэтому автор требует сравнить копию с настоящей страницей до начала работы.
Для снимков нужны Playwright и установленный Chromium. Команды зависимостей вынесены в отдельную вкладку установки. Не требуется ставить их, если вы только читаете инструкции скилла и не используете браузерные скрипты.
Изображения, видео и дополнительные расходы
Если для первого экрана действительно нужен визуал, агент может использовать подключённый сервис генерации изображений. В инструкции перечислены fal, Replicate, OpenAI Images и Higgsfield. Это дополнительные интеграции, а не встроенный в Unslop бесплатный генератор: доступ и оплата зависят от выбранного сервиса.
Перед платной генерацией скилл требует показать промпт и запросить согласие. Для большинства дашбордов отдельная генерация иллюстрации, по описанию автора, вообще не нужна.
По запросу можно подготовить короткое story-видео с поэтапным изменением экрана. Для этого нужны Playwright, Chromium и ffmpeg в PATH. В README видео описано как квадратный ролик короче 10 секунд; в инструкции также есть ориентир «около 10 секунд», поэтому точную длительность стоит проверить в готовом файле.
Лицензия, автор и исходные файлы
Автор — Damir Sokolovsky (@heydamir). Unslop распространяется по лицензии CC BY 4.0: разрешены использование, изменение и распространение, в том числе коммерческие, с указанием авторства, ссылкой на лицензию и обозначением внесённых изменений. Автор дополнительно просит сохранять ссылку на репозиторий.
Исходные материалы и показанный выше пример принадлежат автору проекта. Описание и пояснения на этой странице подготовлены редакцией Нейролюба. Мы изучили опубликованные инструкции; самостоятельный прогон редизайна по этому скиллу здесь не демонстрируется.