Oil UI — навык для ИИ-агентов, который помогает не останавливаться на первом варианте интерфейса. Вы просите агента сделать несколько разных дизайнов, смотрите их рядом и выбираете, какой развивать дальше. Затем агент проверяет результат по скриншотам на десктопном и мобильном размерах.
Как Oil UI превращает запрос о дизайне в варианты на выбор
Oil UI рассчитан на сайты, приложения, панели управления и отдельные компоненты — например, часть страницы. Это не редактор с кнопками для ручной сборки макета, а навык для Claude и других агентов: набор инструкций, по которым агент ведёт работу над интерфейсом. В README прямо названы Claude Code и Codex; поддержку любого другого конкретного агента перед установкой лучше проверять отдельно.
Сначала навык предлагает разобраться в продукте. Агент определяет его категорию, рассматривает два-три проекта с заметным стилем и решает, какие приёмы подходят вашей задаче. Поэтому запрос «сделай чисто и дорого» он должен перевести в выбор шрифтов, свободного пространства, цвета и плотности элементов, а не оставить эти слова описанием результата.
Следующий шаг — разные направления дизайна. По правилам навыка два варианта могут совпадать не более чем по одному признаку из четырёх: расположение элементов, типографика, цвет и ключевые изображения. Если первые экраны вышли похожими, агент должен менять композицию, а не перекрашивать ту же страницу. Для страниц, где посетитель выбирает товар или работает с данными, на первом экране приоритет получает сам контент; эффектное вступление оставляют страницам, которым нужно убеждать.
Варианты Oil UI собирает на одной странице сравнения. Там можно поставить рядом HTML-файлы, изображения или работающие страницы проекта, а текущую версию показать первой для ориентира. Вы переключаете десктопный и мобильный размеры, открываете вариант в натуральном масштабе, выбираете понравившийся кнопкой «Select» и вставляете скопированную фразу в разговор с агентом. После выбора можно сказать, что сохранить, а что переделать.
В конце агент сверяет готовую страницу со скриншотами на большом и маленьком экранах. README также описывает проверку результата свежим взглядом и удаление деталей, которые не помогают понять страницу. Это важно для работы с ИИ-агентами: здесь задача не только получить код по запросу, но и увидеть промежуточные решения до того, как выбрать окончательное.
Кому пригодится выбор между макетами, а кому хватит одного запроса
Вы ведёте сайт в Claude Code и хотите обновить главную страницу, но не знаете, какую визуальную идею задать. Oil UI поможет запросить несколько направлений и сравнить их на одном экране, вместо того чтобы по очереди оценивать ответы агента в переписке. Такой порядок полезен, если решение о стиле ещё не принято.
Вы запускаете новый продукт и можете описать, для кого он сделан, но у вас нет готового макета. Навык начнёт с категории продукта и его визуального тона, а затем подготовит страницы для просмотра. Если у вас уже есть фирменные материалы, скриншоты или проект, передайте их агенту: README прямо предлагает использовать эти исходники.
Вы получили страницу от агента и хотите понять, что исправить, не меняя файлы сразу. В README есть отдельный запрос на разбор главной страницы без правок. Ещё один сценарий — дать скриншот и попросить воспроизвести страницу вместе с мобильной компоновкой. Компоновка здесь означает расположение блоков под размер экрана.
Если вам не нужны альтернативные варианты и проверка визуального результата, Oil UI добавит лишние шаги. Он также не нужен для работы только с текстом: его задача — интерфейсы. Не путайте навык с MCP-сервером: README предлагает устанавливать его через команду для навыков, а не подключать сервер.
Установка Oil UI и файлы, которые он создаёт в проекте
README даёт два способа установки. Можно отправить агенту, который умеет устанавливать навыки, готовую фразу:
Install this skill for me: run npx skills add oil-oil/oil-uiИли выполнить команду в терминале самостоятельно:
npx skills add oil-oil/oil-uiАвторы пишут, что после установки дополнительная настройка не нужна. В README не указана версия Node.js и нет отдельного списка требований к среде для этой команды, поэтому не будем придумывать недостающие шаги. Команда использует npx; убедитесь, что он доступен там, где вы её запускаете.
Промежуточные варианты, скриншоты и кеш медиафайлов навык размещает в рабочей папке проекта .oil-ui. Финальный код и материалы для готовой страницы записывает в сам проект, ориентируясь на его существующие правила. Значит, агенту понадобится доступ к файлам проекта; в некоторых сценариях он будет изменять их. Если хотите только оценку без правок, так и напишите в запросе.
Для DeepSeek Harness в README указан отдельный нативный плагин, а не общая команда установки Oil UI:
dsh plugin --profile web add github:oil-oil/dsh-oil-uiОн включает бесплатную редакцию и, по описанию авторов, обнаруживает локальную установку Pro. Если у вас уже установлен Oil UI Pro, открытую версию ставить не нужно: README предупреждает, что две редакции будут конкурировать за одни и те же запросы.
Три запроса из README: сравнить, оценить, воспроизвести
Чтобы получить разные варианты для нового продукта, авторы предлагают такой запрос:
Use oil-ui to explore a few design directions for this course booking product and build pages I can preview.Речь о продукте для записи на курсы. Агент должен подготовить несколько направлений и страницы, которые вы сможете просмотреть. Если вам важно именно сравнение на одном экране, в README есть более точная формулировка:
Create three designs with different typography, colors, and compositions. Put them on a comparison page so I can choose.Здесь вы просите три дизайна с разными шрифтами, цветами и расположением элементов. Результат — страница сравнения, после которой вы выбираете один вариант и сообщаете агенту, что в нём нравится или мешает. В отличие от запроса «сделай красивее», вы получаете явную точку выбора до дальнейшей доработки.
Если код трогать пока нельзя, используйте пример запроса на разбор:
Review this homepage and explain what to change and how. Leave the files untouched.Вы просите объяснить, что и как изменить на главной странице, но оставить файлы нетронутыми. Для воспроизведения страницы по образцу README также предлагает передать скриншот и попросить мобильную версию. Сами изображения и материалы бренда нужно приложить к разговору с агентом, если вы хотите, чтобы он на них опирался.
Что проверить перед работой: редакции, обновления и зрелость проекта
У Oil UI есть открытая версия под лицензией MIT и платная Oil UI Pro. Открытая версия покрывает разные направления дизайна, страницу сравнения и воссоздание страницы по скриншоту. Таблица в README относит более глубокую доработку существующих проектов, проверку удобства форм и диалогов, а также дополнительную полировку к Pro. Если ваша основная задача — исправлять сложный готовый интерфейс, не рассчитывайте, что бесплатная редакция содержит весь набор Pro. Указанная авторами цена Pro — $9.99 за разовую покупку с пожизненными обновлениями.
Навык проверяет наличие новой версии при использовании, обращаясь к публичному списку версий не чаще одного раза в десять минут. По описанию авторов, он не загружает файлы проекта при этой проверке и не заменяет установленную версию без вашей просьбы. Результат проверки хранится в ~/.local/state/oil/, либо в XDG_STATE_HOME, если переменная задана; на Windows — в %LOCALAPPDATA%\oil\. Для этой функции нужен Python 3. Проверку можно отключить настройкой:
OIL_NO_UPDATE_CHECK=1Репозиторий создан 30 сентября 2026 года. На момент обзора у него 2342 звезды, 134 форка, а последний коммит датирован 24 октября 2026 года. Это молодой проект: перед использованием в рабочем репозитории учитывайте, что навык создаёт промежуточные файлы и может записывать итоговый код в ваш проект. Начните с запроса на сравнение вариантов или разбор без правок, если пока не готовы поручать агенту изменение интерфейса.
Источник: репозиторий oil-oil/oil-ui на GitHub.