关于 codedrobe-one-shot-theme
为 Codex 创建并导出主题的 Skill,根据一句描述生成设计系统、艺术素材与主题包,并强调遵循 Codex 原生界面结构及验证流程。
主要功能
- 01从一句话推导主题设计
- 02生成并配置主题素材
- 03打包导出主题
- 04检查界面状态与截图
- 05管理主题应用及恢复
适用场景
- 01按简短描述制作 Codex 主题
- 02调整首页与对话界面的视觉
- 03验证主题在不同视口的显示
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ qcrao/ codedrobe-one-shot-theme-skill --skill codedrobe-one-shot-theme安装后在 Claude Code 中输入/codedrobe-one-shot-theme确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
agents/openai.yamlassets/examples/doll-sister/codex.csstheme.jsonworkbuddy.cssassets/one-shot-starter/codex.csstheme.jsonassets/theme-starter/codex.csstheme.jsonworkbuddy.cssreferences/cli.mdcodex.mdcss-templates.mddoll-sister-example.mddom-snapshot.mdone-shot-lessons.mdtheme-authoring.mdverification.mdvisual-acceptance-checklist.mdwindows.mdworkbuddy.mdscripts/macos_apply_theme.pyself-test.mjswindows_apply_theme.mjs详细介绍
CodeDrobe 一次性主题
用一个句子生成完整的 Codex 主题。运行时只能使用已发布的 @codedrobe/core;绝不重新创建注入器、修补应用程序包或执行主题 JavaScript。
解读请求
根据用户的句子推断一套雅致的设计系统:主题 slug、名称、配色、排版方向、主页主视觉构图、对话水印和简短标语。对于可以合理设计的细节,不要提问。只有在目标应用不是 Codex、缺少必需的参考图片,或请求的操作会实质性超出主题创建范围时才提问。
将 install、apply、直接安装、直接装上 或同等表述视为授权:如果 Core 有此要求,可以关闭并重启 Codex。仅要求创建/导出,并不代表授权重启或应用主题。
编写设计规范
在制作插画或编写 CSS 之前,记录:
- 保留原生布局,或采用有界编辑式布局
backgroundScope:home 或 workspacedecorDensity:minimal、balanced 或 rich- 浅色/深色模式及其视觉理由
- 插画焦点和文字安全区域
- 语义配色
- 允许更改的表面,以及必须保留的原生几何结构/状态
- 桌面和窄屏验证视口
默认保留原生布局、仅在主页使用插画,并采用适度装饰。只有当用户明确希望对话中使用插画时,才使用 workspace 插画。如果需求偏向浅色、编辑风、花卉、纸张、柔和色彩或效率,不要默认使用深色模式。
仅加载所需内容
- 阅读 references/cli.md,了解运行器选择。
- 阅读 references/codex.md,了解宿主设置和还原方式。
- 在 Windows 上,执行检测、重启、应用或验证之前,先阅读 references/windows.md。
- 编写或修复主题之前,阅读 references/one-shot-lessons.md。
- 更改清单、图片、验证节点或程序包时,阅读 references/theme-authoring.md。
- 阅读 references/dom-snapshot.md 和 references/verification.md,进行实时检查。
- 在最终应用/验证之前,或任何由截图驱动的修复之后,阅读 references/visual-acceptance-checklist.md。
- 仅在需要第二个完整设计示例时,阅读 references/doll-sister-example.md。
一次性工作流
- 使用
references/cli.md中选定的运行器,运行codedrobe apps --json和codedrobe detect --app codex --json。 - 在
~/.codexskins/sources/<theme-slug>/中创建可写源文件,并导出到~/.codexskins/exports/<theme-slug>.codedrobe-theme。只有当用户明确希望将源文件存放在项目中并纳入版本控制时,才使用项目工作区。切勿直接修改已安装的 Skill。 - 将
assets/one-shot-starter/复制到该源目录。 - 如果概念适合配图,请调用可用的图像生成 Skill/工具。生成一张原创宽幅主视觉图,主体位于右侧,左侧留出简洁的 UI 空间。将完整的焦点主体、肢体、衣物、道具和运动轨迹保留在顶部和右侧 8-12% 的安全区域内,避免宽幅 Codex 主视觉图将它们裁掉。将最终图像复制到主题源目录中的
assets/hero.png。不要只将项目资源留在生成图像缓存中。 - 替换
theme.json中的所有占位内容,并自定义顶层 CSS 令牌、标语、竖排印章标签、主视觉图裁剪和响应式行为。保留rendererProfile: codex-theme-v1。 - 保持共享外壳样式不依赖路由。将对话插画保留在
main.main-surface::before中,然后在主页上将其禁用。将大型主页插画保留在.dream-home内;切勿同时显示这两个图层。分别处理两种裁剪:主页主视觉图按高度适配,并与最右边缘对齐;如需工作区背景,则让其覆盖整个对话画布,并置于可读性遮罩之下。右侧不要留出可见的位图边缘、空白接缝或随意缩进。 - 打包并检查
.codedrobe-theme。只有当指定的主页验证节点仍然存在,且选择器与当前 Core 配置文件匹配时,才可接受受保护的.dream-home结构的位置警告。 - 当 CDP 已可访问时,使用隐私安全的 Core 快照捕获当前活动上下文,运行
probe,通过一个 watcher 应用主题,并进行验证。 - 在 Codex 内部应用主题时,优先使用
codedrobe-theme-manager,以便由一个全局管理的 watcher 替换之前的活动主题。如果该 Skill 不可用,则选择捆绑的平台辅助程序:- macOS:运行
scripts/macos_apply_theme.py --theme <absolute-package> --restart-existing。 - Windows:运行
node scripts/windows_apply_theme.mjs --theme <absolute-package> --restart-existing。 两个辅助程序都会启动一个独立运行的 Core watcher,使安装在 Codex 重启后仍然生效。不要为同一主题再启动另一个 watcher。
- macOS:运行
- Codex 返回后,读取辅助程序日志,使用绝对截图路径运行 Core
verify,并检查截图。确认主题 ID/版本、hero、配置文件、必需的界面标记、无溢出以及内容可读性。在桌面宽度下检查主页和普通任务:主页焦点主体必须完整呈现,且右侧没有空隙;工作区背景必须铺满对话区域,不能露出源图边界。观察项目选择器时,重新加载一次或切换到主页。如果 Core 注入前原生首帧为暗色,请将最终项目停靠栏设计为兼容的深色表面,并确保主题化控件清晰可读,以避免从黑色闪变为浅色。保留其原生宽度、高度和位置;只有需要宽幅构图时,才扩展独立的主视觉外壳。不要修补应用,也不要自行添加预加载器。 - 运行
references/visual-acceptance-checklist.md中所有适用的状态。应将原生的仅悬停显示和隐藏控件作为状态进行验证,而不是只检查静态颜色。修复选中项目标签的选择器,不得在修复外层页脚遮罩时显示隐藏的清除项目按钮、重绘 SVG 路径,或移除内层编辑器渐隐效果。 区分各完成阶段:已设计、已静态检查、已应用、已实时验证和已导出。绝不能把预览或成功的包检查说成已验证真实应用。
必须满足的 CSS 不变量
- 将应用规则限定在
html.codedrobe-host-codex或html.codedrobe-codex-skin下。 - 包含
#codedrobe-codex-skin-chrome { pointer-events: none !important; }。 - 只包含一个对话界面插画层,并为其设置
pointer-events: none。 - 当
backgroundScope包含工作区时,让该图层覆盖整个对话界面,并使用单独的半透明蒙层增强对比度。尺寸受限的auto <percent>位图只是水印,不是完整背景,也不得露出明显的图片边缘。 - 在
.dream-home上禁用该图层;改用至少高250px的专用首页主视觉,而不是狭长的图片条带。 - 对于在 Codex 超宽首页横幅中显示的 2:1 源图,优先采用
auto 100%和right center等适应高度的尺寸设置。若cover会裁掉主体,就不要使用;也不要添加会产生空白接缝的右侧偏移。 - 确保原生导航、项目选择、编辑框、滚动、焦点环、菜单和减少动态效果行为正常。
- 绝不使用外部
@import、远程 CSS URL、脚本、本地化文案选择器或伪造的全窗口截图覆盖层。
路由与监视器行为
在任务和新任务之间切换时,Codex 可能会替换渲染器。因此,一次成功的注入可能只为一个路由着色,而另一个路由仍没有主题。为已安装的主题始终使用一个 Core --watch 监视器。只停止或替换此工作流所拥有的监视器;绝不要叠加监视器。
Computer Use 无法控制 Codex 本身。不要绕过此限制。使用 Core 快照检查当前路由,并使用可信渲染器配置文件设置路由样式。准确说明已实时验证的上下文和平台。在工作流通过 Windows 硬件测试之前,将 Windows 支持视为 Beta 版。
修复循环
用户提供截图时,先检查再编辑。只提升一次小版本号,重新打包,停止旧的自有监视器,启动新的监视器,进行验证,并检查新截图。常见修复记录在
references/one-shot-lessons.md 中。
使用保护隐私的实时 DOM 快照,识别可见节点、父级链、计算颜色、背景、边框、阴影、不透明度和几何信息。修复最精简且负责该症状的语义层。应用后重新获取快照,并确认相邻的原生层仍保持之前的计算行为。如果当前路由无法显示临时的原生控件,只能以只读方式检查已安装应用程序包中该组件的类名/状态约定;绝不要将文件补丁或提取回应用程序中。
将平台助手返回空结果视为未知,而非成功。运行 Core verify,并将已安装版本与刚打包的清单进行比较。只有实时版本过期时才重试自有助手,然后再次验证。不要因为打包或助手提交以代码 0 退出,就声称修复已生效。
完成
返回已安装版本、包路径、截图路径、已验证的上下文、平台证据和管理器还原命令。说明还原具有 baseTheme 的 Codex 主题分两阶段进行:Core 首先移除渲染器状态并还原磁盘上的备份;如果助手报告 restart-required,Codex 随后必须完全重启。经授权重启后,验证新的 DOM 快照中没有活动主题或主题类。不要仅凭打包或重启前的还原就声称成功。
导出已验证的包后,提供手动提交页面
https://www.codexskins.org/submit/ 和专用的
codedrobe-theme-submitter skill。不要通过此创建器 skill 上传,也不要将创建/应用授权视为发布批准。