Oil UI — скилл
Скилл для дизайна интерфейсов: три разных направления рядом, выбор одного и доводка по настоящим скриншотам в Claude Code, Codex и других агентах
- 2 483 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- При загрузке скилла выполняется команда `check_update.sh`, которая обращается к ui.oiloil.org
- Скрипт `shoot.mjs` открывает страницы в локальном браузере, макеты и скриншоты пишутся в папку задачи
- `curate-media.mjs` скачивает файлы из внешних коллекций изображений
Установка
- Работает в
Ручная установка
npx skills add oil-oil/oil-uiРаботает сразу после установки, настраивать нечего.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- При загрузке скилла выполняется команда `check_update.sh`, которая обращается к ui.oiloil.org
- Скрипт `shoot.mjs` открывает страницы в локальном браузере, макеты и скриншоты пишутся в папку задачи
- `curate-media.mjs` скачивает файлы из внешних коллекций изображений
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Oil UI — скилл для дизайна сайтов, приложений, панелей и отдельных компонентов. Перед работой он определяет категорию продукта, находит двух-трех самых выразительных аналогов и решает, что оставить, а что сменить. Затем в тексте описывает три направления: настроение, первый экран, шрифты, цвета и главный образ. Любые два направления могут совпадать не больше чем в одном из четырех пунктов: компоновка, шрифты, цвет, ключевой образ. Вы выбираете одно или просите показать первые экраны всех трех на странице сравнения. Страницу сравнения собирает скрипт `build_explorer.py`. Скриншоты рабочих страниц, сравнение с эталоном и запись экрана делает `shoot.mjs` на Node.js 22 или новее в локальном Chrome, Chromium или Edge. Для картинок `curate-media.mjs` ищет и скачивает материалы из открытых коллекций, среди них Poly Haven, Wikimedia Commons и NASA. Готовую страницу скилл открывает на размерах для компьютера и телефона и просит рецензента без истории работы ее оценить. Для нового интерфейса рецензент ставит оценку по десятибалльной шкале, для существующего делает один проход без оценки. Последним идет проход вычитания: на каждой странице остается один главный акцент, а текст, линии и рамки, которые не помогают понять страницу, убираются. Если вы назвали точечную правку, например заменить текст или убрать элемент, скилл делает ее сразу, без выбора направлений.
Для кого. Для разработчиков, основателей и дизайнеров, которые поручают агенту сделать или переделать интерфейс и хотят получить на выбор несколько настоящих вариантов вместо одного шаблонного.
Подходит, если
- Нужен новый лендинг, сайт или панель, и перед основной работой вы хотите увидеть три разных направления
- Страницу надо воссоздать по скриншоту, а результат каждый раунд сверять с эталоном
- Готовый интерфейс нужно оценить без правок: скилл вернет замечания и не тронет файлы
- Макет получился шаблонным, и нужен проход вычитания, после которого остается один главный акцент
- Для страницы нужны текстуры, карты или фотографии из открытых коллекций с пометкой источника
Не подходит, если
- Правка точечная и названа: сменить текст, убрать элемент, поправить отступ. Скилл сам относит такие задачи к обычным правкам
- Нужна бизнес-логика, API, сборка или тесты: скилл отвечает только за дизайн и визуальную проверку
- Установлена платная версия Oil UI Pro: ставить обе не нужно, они начнут конкурировать за одни и те же запросы
- На машине нет Node.js 22 и браузера на Chromium: скриншоты и запись экрана снять не получится
Пример запроса к агенту
Используй oil-ui и предложи три разных направления для сервиса записи на курсы, потом покажи первые экраны рядом, чтобы я выбралОграничения
- Инструкция SKILL.md написана по-китайски с английским описанием в заголовке, а README доступен на английском и китайском. Ответы агент ведет на языке пользователя.
- При каждом использовании скилл проверяет новую версию не чаще раза в 10 минут: читает публичный список версий на ui.oiloil.org и ничего из проекта не загружает. Результат кэшируется в `~/.local/state/oil/`, для проверки нужен Python 3.
- Это открытая часть. Полировка по контрольным спискам, формы, окна и состояния, панели, правки существующих проектов и эффекты вроде светящихся траекторий входят в платную Oil UI Pro за 9,99 доллара. В конце первого ответа скилл один раз предлагает ее через `recommend_once.py`.
- Для страницы сравнения нужен Python 3.10 или новее, для снимков экрана Node.js 22 и Chromium-браузер. Визуальную приемку может проводить только модель, которая видит изображения: без нее скилл пишет, что реальная картинка не проверена, и оценок не ставит.
- Версия 0.23.2, лицензия MIT, шрифт Instrument Serif в папке `assets` лежит под лицензией OFL.
Как отключить. Удалите папку скилла из каталога скиллов агента, например из `~/.claude/skills/oil-ui`, или снимите его командой менеджера скиллов. Проверку версий отдельно выключает переменная `OIL_NO_UPDATE_CHECK=1`. Макеты, скриншоты и записи оценок лежат в папке задачи, а не в папке скилла, и удаляются вручную.
Частые вопросы
Насколько различаются три направления?
Из компоновки, шрифтов, цвета и ключевого образа любые два направления могут совпадать не больше чем в одном пункте. Когда первые экраны готовы, скилл ставит их рядом и сравнивает светлые и темные пятна. Если два похожи, он меняет компоновку: одной перекраски ему мало.
Как проходит проверка готовой страницы?
Скилл открывает страницу на размерах для компьютера и телефона и снимает скриншоты через `shoot.mjs`. Команда с флагом `--evidence` собирает снимки состояний и фрагменты в увеличении 200%. Затем страницу смотрит рецензент без истории работы, и по его замечаниям вы правите макет.
Что делать, если нужна оценка без изменений?
Попросите оценить страницу и не трогать файлы: для существующего интерфейса скилл делает один проход и возвращает замечания и советы без оценки. Десятибалльную шкалу он применяет только к новым интерфейсам.
Откуда берутся изображения?
Команда `search` в `curate-media.mjs` ищет по типам: текстуры, дизайн, фото, чертежи, карты, научные материалы и видео. Команда `fetch` скачивает выбранное в папку `assets` и записывает пометку об источнике. Часть изображений скилл при необходимости генерирует сам.
Как отключить проверку обновлений?
Задайте переменную `OIL_NO_UPDATE_CHECK=1`. Так же стоит поступить, если задача разрешает писать только в одну папку. Об обновлении скилл сообщает в конце ответа и ставит его только по вашей просьбе.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Детали, от которых интерфейс приятнее
make-interfaces-feel-better
Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия
Скилл запрещает агенту типовой интерфейс с плавающими карточками, градиентами и стеклом и задает обычные размеры, радиусы и тени как у Linear
Скилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
Скилл дизайна интерфейсов для агента: диагностика, четыре направления на выбор, реализация и приемка без вида шаблона от ИИ
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Oil UI (эта запись) | нет | 2 483 | |
| StyleSeed | нет | 992 | фиксирует дизайн-решения проекта в правилах и проверяет интерфейс по баллам и скриншотам |
| Tastemaker | нет | 506 | скилл вкуса для интерфейсов, чтобы результат не выглядел сгенерированным |
| draw-ui | нет | 519 | скилл рисует макеты интерфейсов и лендингов и переносит их в HTML |
Коротко о README
Главная страница репозитория показывает превью работ, в восьми пунктах описывает метод, дает установку одной командой, примеры запросов, раздел о странице сравнения и таблицу различий открытой версии и Pro. Дальше идут правила проверки версий и ссылки на соседние скиллы oil-motion и oil-tone. В репозитории лежат SKILL.md, двенадцать справочников по направлениям, компоновке, медиа, анимации и рецензии, скрипты с тестами и описания на английском и китайском.
Бейдж для README
Исходный SKILL.md
--- name: oil-ui description: "Design, improve, and review interfaces for websites, apps, dashboards, and components: explore distinct design directions, compare styles side by side, and refine visual hierarchy against real screenshots. Delivers comparison pages, design notes, mockups, or working interfaces. Use for new interface design, style comparison, visual polish, screenshot recreation, or interface review. Not for business logic, APIs, builds, code cleanup without visible UI changes, or routine edits where the exact change is already specified (changing copy or counts, removing named elements, reusing existing styles), even if phrased as 'optimize'. If oil-ui-pro is installed, use oil-ui-pro instead. 设计、改进和评审网站、App、后台与组件的界面，完成设计方向探索、多风格同屏比较、视觉层级和基于实际画面的迭代；按请求交付对比页、设计说明、设计稿或可运行界面。当用户需要新界面设计、比较不同设计风格、视觉精修、截图还原或界面评审时使用。只负责设计判断，组件归属、数据流、状态正确性和测试等代码实现质量不在范围内。不用于纯业务逻辑、接口、构建部署、无界面行为变化的代码整理、单独绘制普通插画、操作现有网站，以及改文案、调数量、删指定元素、复用现有样式这类已经说清怎么改的日常修改（哪怕带有“优化”字样）。已安装 oil-ui-pro 时交给 oil-ui-pro。" allowed-tools: - Bash(sh *check_update.sh*) - Bash(python3 *check_update.py*) - Bash(python *check_update.py*) - Bash(py -3 *check_update.py*) metadata: version: "0.23.2" compatibility: "核心为宿主中立的文本流程，不依赖其他 Skill 或指定模型。可选风格对比页生成器需要 Python 3.10+ 标准库，产物仅需现代浏览器；本机地址候选需要对应的本地开发服务器在运行。实际视觉验收需要看图能力；交互验收需要可操作环境；独立评审需要隔离上下文且能看图的执行者。" --- # oil-ui 先定下一句设计北极星，再让构图、字体、色彩、素材和交互都朝它靠拢，做出一眼认得出来的界面。克制是留下最有力量的选择、删掉没有贡献的元素，不是把所有风格磨成中庸。界面好不好看、任务走不走得通，分开验收。