Oh My Design (3x-haust) — плагин
Oh My Design
Плагин ведет дизайн-задачу одной командой /ultradesign: изучает проект, строит, рендерит, чинит и проверяет интерфейс
- 209 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Меняет файлы проекта в объявленной области записи и пишет служебные записи в `.omd/`
- Рендерит страницы в Chromium через Playwright, ходит за референсами и в Figma, а установка прописывает плагин в настройки агентов
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/3x-haust-oh-my-designОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Меняет файлы проекта в объявленной области записи и пишет служебные записи в `.omd/`
- Рендерит страницы в Chromium через Playwright, ходит за референсами и в Figma, а установка прописывает плагин в настройки агентов
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Oh My Design работает в Claude Code, Codex и совместимых с Pi агентах и ведет дизайн-задачу одним сквозным процессом. Единственная точка входа, команда `/ultradesign`, сохраняет исходный запрос, выбранную модель, стек проекта и разрешенную область записи. Агент изучает репозиторий, маршруты и компоненты, при необходимости ищет референсы, выбирает направление, собирает интерфейс, рендерит его в десктопной и мобильной версиях, чинит найденные дефекты и проверяет результат. Состояние процесса ведет утилита `omd`: `omd stage next` подсказывает очередное действие, `omd guard production` проверяет границы записи, `omd first-render check` ловит дефекты первой отрисовки, а `omd lifecycle finish` запускает проверки пакета, оценку в браузере, независимую рецензию и публикацию итога. Рецензию делает встроенный агент `omd-eye` с доступом только на чтение. Если в запросе есть ссылка на файл Figma, она становится целью реализации: `omd figma pull` снимает файл, `omd figma diff` сравнивает кадр со страницей, и работа считается законченной при совпадении не ниже 90% и вердикте рецензента `match`.
Для кого. Фронтенд-разработчикам и дизайнерам-инженерам, которые отдают агенту целый экран, редизайн или реализацию макета из Figma и хотят проверку отрисовки на выходе.
Подходит, если
- В проекте на Next.js или React нужен новый экран, и результат должен пройти проверку на десктопе и мобильном размере
- Есть макет в Figma, и страницу требуется довести до совпадения не ниже 90% с независимой проверкой
- Существующий интерфейс надо переделать без потери стека и компонентов проекта
- Агент часто сдает экраны с дефектами первой отрисовки, и нужен барьер перед тем, как работу примут
Не подходит, если
- Нужна одна правка цвета или отступа: многошаговый процесс с рецензией слишком тяжел для такой задачи
- В среде нет Chromium и Playwright, а ставить их нельзя: рендер и оценка идут через браузер
- Дизайн-задача небольшая и разовая, а набор команд `omd` и записи в `.omd/` в проекте не нужны
- Нужна дизайн-система компании без разработки интерфейса: плагин собирает и проверяет страницы, а не токены
Пример запроса к агенту
/ultradesign Переделай страницу тарифов в проекте: сохрани текущий стек, проверь на мобильном размере и покажи результат проверкиОграничения
- Полный процесс требует браузера: основной провайдер `browser-rs` работает на Darwin arm64 и Linux x64, на остальных нужны Playwright и Chromium, который ставится командой `npx playwright install chromium`.
- Пакет `oh-my-design` без префикса в npm не связан с проектом, ставить нужно `@3xhaust/oh-my-design`.
- Референсы служат материалом для сравнения, а не ассетами продукта. Отправка форм, вход, оплата и скачивание при захвате состояний отклоняются.
- Результат Figma-задачи принимается только при свежем снимке, совпадении кадра не ниже 90% и вердикте рецензента `match`.
Как отключить. Команда `oh-my-design uninstall` снимает установку с агентов и не трогает записи проекта в `.omd/`. Плагин Claude Code удаляется через `/plugin`, пакет для Pi командой `pi remove`, глобальный пакет npm командой `npm uninstall -g @3xhaust/oh-my-design`.
Частые вопросы
Как поставить Oh My Design в Claude Code?
Выполните `/plugin marketplace add 3x-haust/oh-my-design`, затем `/plugin install oh-my-design@omd` и запустите `/ultradesign`. Для других агентов подходит `npm install -g @3xhaust/oh-my-design`, а за ним `oh-my-design install` и `oh-my-design doctor`.
Чем Oh My Design отличается от одноименного пакета в npm?
Это разные проекты. Пакет `oh-my-design` без префикса автор прямо называет посторонним, а ставить нужно `@3xhaust/oh-my-design`.
Что такое `/ultradesign`?
Единая команда для любой дизайн-задачи: нового продукта, новой функции, редизайна, исправления, реализации макета Figma. Она переносит в процесс ваш запрос, модель, стек и разрешенные для записи файлы.
Как работать с Figma?
Вставьте в запрос ссылку на файл или дизайн Figma. Команды `omd figma pull`, `omd figma diff` и `omd figma review` снимают данные, сравнивают кадр со страницей и запрашивают независимую рецензию. Для приемки нужно совпадение не ниже 90%.
Где хранится история работы?
В папке `.omd/` проекта: там лежат записи процесса и рецензий. Удаление плагина командой `oh-my-design uninstall` эту папку не трогает.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныOh My Design
oh-my-design
Одной командой ставит агенту дизайн-систему: каталог оцененных дизайн-систем компаний, токены и правила. README на четырех языках
Рабочее место для Claude Code: десять команд ведут от идеи продукта к экранам на React и пакету передачи с готовыми промптами для реализации
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Открытая альтернатива Claude Design: прототипы, презентации, дашборды и видео через ваших локальных агентов
Генератор DESIGN.md для Figma
DESIGN.md generator for Figma
Плагин Figma от TypeUI: собирает стили файла и генерирует DESIGN.md и SKILL.md для Claude Code, Codex и Cursor
Набор подключает к агенту дизайн-сценарии, системы оформления и примеры, чтобы создавать и проверять макеты прямо в репозитории.
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Oh My Design (3x-haust) (эта карточка) | нет | 209 | |
| Oh My Design | нет | 572 | каталог дизайн-систем компаний и токенов, который ставится агенту; здесь процесс разработки экрана с рендером и рецензией |
| Impeccable | нет | 105 073 | скилл с 23 командами критики и полировки интерфейса; здесь один вход `/ultradesign` и проверка отрисовки с рецензентом только для чтения |
Коротко о README
README начинается с обещания «ИИ, который проектирует как человек» и описания единственной точки входа. Затем идут таблица агента-рецензента, девять шагов обычного пути, раздел о референсах и Figma, три способа установки, требования к браузеру и таблица публичных команд `omd` по группам: запуск и здоровье, процесс и проверка, референсы и входные данные.