codedrobe-theme

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

CodeDrobe Theme

CodeDrobe 主题

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.

使用已发布的

@codedrobe/core

CLI 作为唯一运行时。本 Skill 仅包含指令：请勿在 Skill 内部重新实现注入器、启动脚本、包解析器或应用补丁工具。

Route the request

请求路由

Identify the target app explicitly. Run
```
codedrobe apps --json
```
when support or defaults are uncertain.
Read references/cli.md before choosing an installed, npm, or Bun command runner.
Read only the target-specific reference:
- Codex: references/codex.md
- WorkBuddy: references/workbuddy.md
- QoderWork: references/qoderwork.md
- TRAE SOLO: references/traework.md
For theme creation, images, CSS, packaging, or legacy conversion, read references/theme-authoring.md.
When the request includes an attached or local visual reference, read references/reference-image.md.
For new or repaired CSS, read references/dom-snapshot.md and references/css-templates.md.
For the complete Miku Future Beats / 初音未来 example, read references/miku-future-beats-example.md.
For probe, verification, screenshots, missing nodes, CDP failures, or app updates, read references/verification.md.
To publish or submit a theme to the CodeDrobe store, read references/publish.md.

明确识别目标应用。若不确定支持情况或默认配置，运行
```
codedrobe apps --json
```
。
在选择已安装的、npm 或 Bun 命令运行器之前，请先阅读 references/cli.md。
仅阅读对应目标应用的参考文档：
- Codex：references/codex.md
- WorkBuddy：references/workbuddy.md
- QoderWork：references/qoderwork.md
- TRAE SOLO：references/traework.md
涉及主题创建、图片、CSS、打包或旧版转换时，阅读 references/theme-authoring.md。
当请求包含附件或本地视觉参考图时，阅读 references/reference-image.md。
涉及新建或修复 CSS 时，阅读 references/dom-snapshot.md 和 references/css-templates.md。
查看完整的 Miku Future Beats / 初音未来示例，请阅读 references/miku-future-beats-example.md。
涉及探测、验证、截图、节点缺失、CDP 故障或应用更新时，阅读 references/verification.md。
要将主题发布或提交到 CodeDrobe 商店，请阅读 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.

“参考这张图片，帮我生成一个 Codex 皮肤”：检查提供的图片，基于实时 Codex DOM 快照创建 Codex 目标主题，打包后验证 Codex 中的原生 UI 效果。
“把这个视觉风格同时做成 Codex 和 WorkBuddy 皮肤”：创建一个主题包，包含各目标应用独立的 CSS 和共享的命名图片资源。
“用玩偶姐姐示例改成蓝色版本”：将内置示例复制到可写项目中，修改其 tokens/资源，更新实时选择器，然后验证两个请求的上下文效果。
“这个主题更新应用后错位了”：重新捕获快照，修复主题 CSS 和主题专属的验证节点，然后重新打包并对比截图。
“帮我安装这个
```
.codedrobe-theme
```
”：检查、探测、应用并验证提供的主题包；除非验证失败且用户要求修复，否则不要重新创建该主题包。
“从商店装一个复古主题到 Codex”：使用
```
codedrobe theme search
```
解析对应的 slug（若有多个匹配项需确认用户选择），执行
```
codedrobe theme download
```
（已做完整性校验，下载至
```
~/.codedrobe/themes
```
），然后按照标准的检查→探测→应用→验证流程操作。
“把这个主题发布到 CodeDrobe 商店”：完善
```
theme.catalog
```
列表元数据，打包后与用户确认，然后执行
```
codedrobe theme publish
```
（仅在用户单独确认后才添加
```
--submit
```
参数）。

将明确指定的目标应用视为确定项。如果未指定目标应用，且无法从提供的主题包或当前任务中推断出目标，则在启动或执行任何操作前，提出一个简洁的问题询问用户。

Apply an existing theme

应用现有主题

Inspect the package before applying it.
Detect the application and resolve any user-provided installation path or CDP port.
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.
Apply the theme. Never add
```
--restart-existing
```
unless the user authorized closing and restarting the running application.
Verify the installed theme and capture an absolute-path screenshot when visual confirmation matters.
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
codedrobe probe --app <app-id> --theme /absolute/theme.codedrobe-theme
codedrobe apply --app <app-id> --theme /absolute/theme.codedrobe-theme
codedrobe verify --app <app-id> --theme /absolute/theme.codedrobe-theme --screenshot /absolute/preview.png

应用主题包前先进行检查。
检测应用，解析用户提供的安装路径或 CDP 端口。
使用选定的主题探测实时渲染进程。兼容性按窗口判断：缺少所需适配器或主题节点的窗口会被跳过，仅当没有符合条件的窗口时，应用操作才会失败。如果应用仍处于加载界面时运行探测，会报告所有地标节点缺失——请等待根地标节点出现后，再判定为不兼容。
应用主题。除非用户授权关闭并重启正在运行的应用，否则切勿添加
```
--restart-existing
```
参数。
验证已安装的主题，在需要视觉确认时截取绝对路径的截图。
如果主题会同时样式化主页和普通对话界面，则需同时检查这两个场景。

选择

references/cli.md

中描述的运行器后，使用以下命令格式：

bash

codedrobe theme inspect /absolute/theme.codedrobe-theme
codedrobe probe --app <app-id> --theme /absolute/theme.codedrobe-theme
codedrobe apply --app <app-id> --theme /absolute/theme.codedrobe-theme
codedrobe verify --app <app-id> --theme /absolute/theme.codedrobe-theme --screenshot /absolute/preview.png

Create or repair a theme

创建或修复主题

Inspect any supplied reference image and turn it into a short visual brief before writing CSS. Never use the reference screenshot as a full-window overlay.
Copy
```
assets/theme-starter/
```
for a neutral base or
```
assets/examples/miku-future-beats/
```
for a complete multi-app example. Never edit the installed Skill in place.
Open each app context the theme will style and capture a separate
```
codedrobe dom snapshot
```
; do not infer selectors from the template alone.
Select semantic candidates from the snapshot, then write app-specific CSS under
```
html.codedrobe-host-<app-id>
```
.
Keep shared artwork in named
```
images
```
; keep app-specific selectors under the relevant target CSS.
Keep adapter landmarks generic and theme layout assumptions in theme-specific verification nodes.
Pack with Core, inspect the output, then probe and apply it on a real renderer.
Iterate from home and conversation screenshots. Do not claim success from static CSS, a snapshot, or package validation alone.

在编写 CSS 前，检查所有提供的参考图并整理成简短的视觉说明。切勿将参考截图用作全窗口覆盖层。
复制
```
assets/theme-starter/
```
作为中性基础模板，或复制
```
assets/examples/miku-future-beats/
```
作为完整的多应用示例。切勿直接编辑已安装的 Skill 文件。
打开主题将要样式化的每个应用场景，分别捕获
```
codedrobe dom snapshot
```
；不要仅从模板推断选择器。
从快照中选择语义化候选节点，然后在
```
html.codedrobe-host-<app-id>
```
下编写应用专属的 CSS。
将共享的美术资源放在命名的
```
images
```
目录中；将应用专属的选择器放在对应目标的 CSS 中。
保持适配器地标节点的通用性，将主题布局假设放在主题专属的验证节点中。
使用 Core 打包，检查输出结果，然后在真实的渲染进程上探测并应用主题。
基于主页和对话界面的截图进行迭代优化。切勿仅通过静态 CSS、快照或包校验就判定成功。

Restore

恢复

Use Core restore instead of deleting application data or manually editing host settings:

bash

codedrobe restore --app <app-id>

Confirm that the CodeDrobe renderer state and theme style are gone. For Codex, also confirm that the transactional base-theme backup was restored when one existed.

使用 Core 的恢复功能，而非删除应用数据或手动编辑宿主设置：

bash

codedrobe restore --app <app-id>

确认 CodeDrobe 渲染器状态和主题样式已被清除。对于 Codex，若存在事务性基础主题备份，还需确认其已恢复。

Guardrails

安全与操作规范

Never patch, replace, re-sign, or take ownership of application bundles,
```
app.asar
```
, or WindowsApps files.
Bind CDP to loopback only and use one consistent port for launch, apply, watch, verify, and restore.
Do not terminate or restart an existing application without explicit user authorization.
Do not run competing theme watchers against the same renderer.
Treat theme packages as untrusted input. Do not evaluate theme JavaScript or allow external CSS resources.
Keep decorative layers noninteractive and preserve native navigation, composer, menus, and accessibility behavior.
Do not upload private reference images to an unapproved image service.
Publish only through
```
codedrobe theme publish
```
, never through an improvised endpoint. Publishing and submitting for review each require the user's explicit confirmation, and sign-in stays a user-approved device flow.

切勿对应用包、
```
app.asar
```
或 WindowsApps 文件进行补丁、替换、重签名或夺取所有权。
CDP 仅绑定回环地址，启动、应用、监听、验证和恢复操作使用同一个一致的端口。
未经用户明确授权，不得终止或重启正在运行的应用。
不要在同一个渲染进程上运行相互冲突的主题监听器。
将主题包视为不可信输入。不要执行主题中的 JavaScript，也不允许加载外部 CSS 资源。
保持装饰层为非交互性，保留原生导航、消息撰写栏、菜单和无障碍行为。
不要将私人参考图上传到未获批准的图片服务。
仅通过
```
codedrobe theme publish
```
发布主题，切勿使用临时端点。发布和提交审核均需用户明确确认，登录操作需走用户授权的设备授权流程。