CodeDrobe Skills
Скилл меняет оформление десктопных ИИ-приложений, Codex и WorkBuddy, по картинке-образцу и умеет вернуть все назад
- 251 ★ репозитория
- Последний коммит
- Apache-2.0
Широкий доступ
Почему такой уровень
- Применение темы может потребовать запуска приложения с отладочным портом CDP и внедряет CSS в окно приложения
- Перезапуск работающего приложения возможен, но скилл должен спрашивать разрешение
- Публикация темы в магазин отправляет файлы наружу после входа в аккаунт
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/codedrobe-skillsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемШирокий доступИнструмент может менять данные, выполнять команды или работать с секретами.
- Применение темы может потребовать запуска приложения с отладочным портом CDP и внедряет CSS в окно приложения
- Перезапуск работающего приложения возможен, но скилл должен спрашивать разрешение
- Публикация темы в магазин отправляет файлы наружу после входа в аккаунт
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
В репозитории два скилла, пользователю нужен codedrobe-theme. Он берет картинку-образец и превращает ее в обратимую тему для Codex, WorkBuddy, QoderWork или TRAE SOLO. Скилл не накладывает скриншот поверх окна: он снимает снимок живого DOM приложения через отладочный порт и пишет CSS под реальные узлы интерфейса. Работу выполняет командная утилита @codedrobe/core, а скилл только ведет агента по шагам: осмотреть пакет темы, проверить совместимость, применить, сделать снимок экрана и сравнить главную страницу с обычным диалогом. Сломавшуюся после обновления приложения тему он чинит по свежему снимку DOM. Команда codedrobe restore возвращает исходный вид. Темы лежат в файлах .codedrobe-theme, их можно искать и ставить из магазина codedrobe.app. Публикация в магазин требует входа и отдельного подтверждения. Второй скилл, codedrobe-adapter-dev, нужен тем, кто добавляет в Core поддержку нового приложения.
Для кого. Для пользователей Codex и WorkBuddy, которые хотят свою цветовую схему и фон, и для авторов тем, которым нужен проверяемый процесс от образца до публикации.
Подходит, если
- Есть картинка с нужной стилистикой, и из нее нужен скин для Codex с сохранением родных элементов управления
- Одну тему надо собрать сразу для Codex и WorkBuddy с общими картинками и разными CSS под каждое приложение
- Тема сломалась после обновления приложения, и нужно перерисовать селекторы по новому снимку DOM
- Готовый файл .codedrobe-theme нужно осмотреть, проверить и применить, не создавая тему заново
- Тему из магазина надо найти по названию и поставить: поиск, загрузка с проверкой целостности, затем применение
Не подходит, если
- Приложение не из списка Codex, WorkBuddy, QoderWork и TRAE SOLO: поддержка новых приложений добавляется адаптерами в Core
- Вам нужна тема для обычного сайта или редактора кода: скилл рассчитан на Chromium и Electron-приложения с отладочным портом
- Нельзя запускать приложение с включенным CDP или перезапускать его: применение темы может этого требовать
- Вы хотите менять файлы самого приложения: скилл запрещает править app.asar и пакеты приложения
Пример запроса к агенту
Возьми эту картинку, сделай по ней тему для Codex с сохранением родного интерфейса и проверь главную страницу и диалогОграничения
- Работа идет через утилиту @codedrobe/core, ее нужно поставить отдельно командой npm install --global @codedrobe/core. Скилл содержит только инструкции.
- Для применения темы приложению может понадобиться запуск с включенным CDP. Перезапуск уже работающего приложения скилл выполняет только с вашего явного разрешения.
- Шаблоны CSS не считаются постоянным контрактом: после обновления приложения селекторы приходится снимать заново.
- Публикация в магазин требует входа через codedrobe auth login.
- Проект независимый и не одобрен OpenAI или Tencent.
Как отключить. Верните исходный вид командой codedrobe restore --app codex, подставив нужное приложение, затем проверьте, что следов темы не осталось. Сам скилл удаляется из папки скиллов вашего агента, а утилиту снимает npm uninstall --global @codedrobe/core.
Частые вопросы
Как поставить скилл для тем Codex?
Выполните npx skills add CodeDrobe/skills --skill codedrobe-theme --global --agent codex --yes. Параметр --agent выбирает агента, который получит скилл, а приложение для темы называют позже флагом --app codex или --app workbuddy. Команда npx skills add CodeDrobe/skills --list покажет все доступные скиллы.
Для каких приложений есть темы?
Описание скилла называет OpenAI Codex, Tencent WorkBuddy, QoderWork в китайской и глобальной версиях и TRAE SOLO в тех же двух версиях. Список поддерживаемых приложений в вашей установке выводит codedrobe apps.
Скилл ставит тему поверх окна скриншотом?
Нет. Он снимает DOM живого окна через CDP, выбирает по снимку нужные узлы и пишет CSS под реальный интерфейс. Скриншот образца служит только художественным ориентиром.
Как убрать тему и вернуть прежний вид?
Выполните codedrobe restore --app и имя приложения. Для Codex скилл дополнительно проверяет, что восстановлена резервная копия базовой темы, если она существовала.
Нужен ли аккаунт для магазина тем?
Для поиска и установки темы по названию аккаунт не упомянут. Для публикации нужен вход через codedrobe auth login и подтверждение, а флаг --submit добавляют только после отдельного согласия.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыНавык просит Codex сменить оформление: по одной картинке он строит тему и применяет ее к приложению Codex на Windows и macOS.
Скилл для Codex: три разных визуальных концепта, ревью по скриншотам и чистка лишнего, чтобы интерфейс не выглядел шаблонно.
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
design-to-code — сайт из изображения дизайна
design-to-code
Скилл превращает скриншот, макет, кадр Figma или живую страницу в адаптивный сайт и сверяет результат с дизайном
Дизайн-система в виде промптов для Codex, Cursor и Claude Code: каталоги стилей, раскладки, блоки и свои правила интерфейса.
Скилл и CLI превращают скриншот или текстовую идею в редактируемый интерфейс с кодом и отдельными картинками.
Коротко о README
README объясняет, что репозиторий содержит два скилла, а поведение живет в @codedrobe/core. Дальше идут команда установки, примеры запросов к агенту, установка утилиты и список файлов для авторов: заготовка темы и готовые примеры. Завершают страницу ссылки на связанные репозитории и оговорка о правах на торговые марки.
Бейдж для README
Исходный SKILL.md
--- name: codedrobe-theme description: Create, inspect, convert, apply, replace, verify, troubleshoot, update, publish, or restore reversible CodeDrobe themes for supported Chromium/Electron AI desktop apps, including OpenAI Codex, Tencent WorkBuddy, QoderWork (CN/global), and TRAE SOLO (global/CN). Use when a user asks to turn an attached or local reference image into a Codex, WorkBuddy, QoderWork, or TRAE SOLO skin, reproduce a visual style with native UI, build a multi-app theme, work with .codedrobe-theme packages or theme images, analyze a live CDP DOM snapshot, repair DOM compatibility failures, use a custom port or installation path, capture verification screenshots, search the CodeDrobe store or install a store theme by name, publish or submit a theme to the CodeDrobe store, or migrate a legacy .codex-theme file. --- # CodeDrobe Theme Use the published `@codedrobe/core` CLI as the only runtime. Keep this Skill instruction-only: do not recreate injectors, launch scripts, package parsers, or application patchers inside the Skill. ## Route the request 1. Identify the target app explicitly. Run `codedrobe apps --json` when support or defaults are uncertain. 2. Read [references/cli.md](references/cli.md) before choosing an installed, npm, or Bun command runner. 3. Read only the target-specific reference: - Codex: [references/codex.md](references/codex.md) - WorkBuddy: [references/workbuddy.md](references/workbuddy.md) - QoderWork: [references/qoderwork.md](references/qoderwork.md) - TRAE SOLO: [references/traework.md](references/traework.md) 4. For theme creation, images, CSS, packaging, or legacy conversion, read [references/theme-authoring.md](references/theme-authoring.md). 5. When the request includes an attached or local visual reference, read [references/reference-image.md](references/reference-image.md). 6. For new or repaired CSS, read [references/dom-snapshot.md](references/dom-snapshot.md) and [references/css-templates.md](references/css-templates.md). 7. For the complete Miku Future Beats / 初音未来 example, read [references/miku-future-beats-example.md](references/miku-future-beats-example.md). 8. For probe, verification, screenshots, missing nodes, CDP failures, or app updates, read [references/verification.md](references/verification.md). 9. To publish or submit a theme to the CodeDrobe store, read [references/publish.md](references/publish.md). ## Interpret common requests - “参考这张图片,帮我生成一个 Codex 皮肤”:inspect the supplied image, create a Codex target from a live Codex DOM snapshot, package it, and verify the native UI in Codex. - “把这个视觉风格同时做成 Codex 和 WorkBuddy 皮肤”:create one theme package with separate target CSS and shared named image assets. - “用玩偶姐姐示例改成蓝色版本”:copy the bundled example to a writable project, change its tokens/assets, refresh live selectors, and verify both requested contexts. - “这个主题更新应用后错位了”:capture fresh snapshots, repair theme CSS and theme-specific verification nodes, then repack and compare screenshots. - “帮我安装这个 `.codedrobe-theme`”:inspect, probe, apply, and verify the supplied package; do not recreate it unless validation fails and the user asks for repair. - “从商店装一个复古主题到 Codex”:`codedrobe theme search` to resolve the slug (confirm the pick when several match), `codedrobe theme download` (integrity-verified, lands in `~/.codedrobe/themes`), then the normal inspect → probe → apply → verify flow. - “把这个主题发布到 CodeDrobe 商店”:complete the `theme.catalog` listing metadata, pack, confirm with the user, then `codedrobe theme publish` (and `--submit` only with separate confirmation). Treat the named target app as explicit. If no target is named and it cannot be inferred from the supplied package or current task, ask one concise question before launching or applying anything. ## Apply an existing theme 1. Inspect the package before applying it. 2. Detect the application and resolve any user-provided installation path or CDP port. 3. Probe the live renderer with the selected theme. Compatibility is judged per window: a window missing required adapter or theme nodes is skipped, and the apply fails only when no window qualifies. A probe run while the app is still on its loading screen reports every landmark missing — wait for the root landmark before treating that as incompatibility. 4. Apply the theme. Never add `--restart-existing` unless the user authorized closing and restarting the running application. 5. Verify the installed theme and capture an absolute-path screenshot when visual confirmation matters. 6. Inspect both the home screen and a normal conversation when the theme styles both contexts. Use these command shapes after selecting the runner described in `references/cli.md`: ```bash codedrobe theme inspect /absolute/theme.codedrobe-theme