mcpField
C
codedrobe-one-shot-theme

codedrobe-one-shot-theme

github.com/qcrao设计与 UI1247 次安装15 周前更新
代码仓库

关于 codedrobe-one-shot-theme

为 Codex 创建并导出主题的 Skill,根据一句描述生成设计系统、艺术素材与主题包,并强调遵循 Codex 原生界面结构及验证流程。

主要功能

  1. 01从一句话推导主题设计
  2. 02生成并配置主题素材
  3. 03打包导出主题
  4. 04检查界面状态与截图
  5. 05管理主题应用及恢复

适用场景

  1. 01按简短描述制作 Codex 主题
  2. 02调整首页与对话界面的视觉
  3. 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.yaml
assets/examples/doll-sister/
codex.css
theme.json
workbuddy.css
assets/one-shot-starter/
codex.css
theme.json
assets/theme-starter/
codex.css
theme.json
workbuddy.css
references/
cli.md
codex.md
css-templates.md
doll-sister-example.md
dom-snapshot.md
one-shot-lessons.md
theme-authoring.md
verification.md
visual-acceptance-checklist.md
windows.md
workbuddy.md
scripts/
macos_apply_theme.py
self-test.mjs
windows_apply_theme.mjs

详细介绍

CodeDrobe 一次性主题

用一个句子生成完整的 Codex 主题。运行时只能使用已发布的 @codedrobe/core;绝不重新创建注入器、修补应用程序包或执行主题 JavaScript。

解读请求

根据用户的句子推断一套雅致的设计系统:主题 slug、名称、配色、排版方向、主页主视觉构图、对话水印和简短标语。对于可以合理设计的细节,不要提问。只有在目标应用不是 Codex、缺少必需的参考图片,或请求的操作会实质性超出主题创建范围时才提问。

将 install、apply、直接安装、直接装上 或同等表述视为授权:如果 Core 有此要求,可以关闭并重启 Codex。仅要求创建/导出,并不代表授权重启或应用主题。

编写设计规范

在制作插画或编写 CSS 之前,记录:

  • 保留原生布局,或采用有界编辑式布局
  • backgroundScope:home 或 workspace
  • decorDensity:minimal、balanced 或 rich
  • 浅色/深色模式及其视觉理由
  • 插画焦点和文字安全区域
  • 语义配色
  • 允许更改的表面,以及必须保留的原生几何结构/状态
  • 桌面和窄屏验证视口

默认保留原生布局、仅在主页使用插画,并采用适度装饰。只有当用户明确希望对话中使用插画时,才使用 workspace 插画。如果需求偏向浅色、编辑风、花卉、纸张、柔和色彩或效率,不要默认使用深色模式。

仅加载所需内容

一次性工作流

  1. 使用 references/cli.md 中选定的运行器,运行 codedrobe apps --json 和 codedrobe detect --app codex --json。
  2. 在 ~/.codexskins/sources/<theme-slug>/ 中创建可写源文件,并导出到 ~/.codexskins/exports/<theme-slug>.codedrobe-theme。只有当用户明确希望将源文件存放在项目中并纳入版本控制时,才使用项目工作区。切勿直接修改已安装的 Skill。
  3. 将 assets/one-shot-starter/ 复制到该源目录。
  4. 如果概念适合配图,请调用可用的图像生成 Skill/工具。生成一张原创宽幅主视觉图,主体位于右侧,左侧留出简洁的 UI 空间。将完整的焦点主体、肢体、衣物、道具和运动轨迹保留在顶部和右侧 8-12% 的安全区域内,避免宽幅 Codex 主视觉图将它们裁掉。将最终图像复制到主题源目录中的 assets/hero.png。不要只将项目资源留在生成图像缓存中。
  5. 替换 theme.json 中的所有占位内容,并自定义顶层 CSS 令牌、标语、竖排印章标签、主视觉图裁剪和响应式行为。保留 rendererProfile: codex-theme-v1。
  6. 保持共享外壳样式不依赖路由。将对话插画保留在 main.main-surface::before 中,然后在主页上将其禁用。将大型主页插画保留在 .dream-home 内;切勿同时显示这两个图层。分别处理两种裁剪:主页主视觉图按高度适配,并与最右边缘对齐;如需工作区背景,则让其覆盖整个对话画布,并置于可读性遮罩之下。右侧不要留出可见的位图边缘、空白接缝或随意缩进。
  7. 打包并检查 .codedrobe-theme。只有当指定的主页验证节点仍然存在,且选择器与当前 Core 配置文件匹配时,才可接受受保护的 .dream-home 结构的位置警告。
  8. 当 CDP 已可访问时,使用隐私安全的 Core 快照捕获当前活动上下文,运行 probe,通过一个 watcher 应用主题,并进行验证。
  9. 在 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。
  10. Codex 返回后,读取辅助程序日志,使用绝对截图路径运行 Core verify,并检查截图。确认主题 ID/版本、hero、配置文件、必需的界面标记、无溢出以及内容可读性。在桌面宽度下检查主页和普通任务:主页焦点主体必须完整呈现,且右侧没有空隙;工作区背景必须铺满对话区域,不能露出源图边界。观察项目选择器时,重新加载一次或切换到主页。如果 Core 注入前原生首帧为暗色,请将最终项目停靠栏设计为兼容的深色表面,并确保主题化控件清晰可读,以避免从黑色闪变为浅色。保留其原生宽度、高度和位置;只有需要宽幅构图时,才扩展独立的主视觉外壳。不要修补应用,也不要自行添加预加载器。
  11. 运行 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 上传,也不要将创建/应用授权视为发布批准。

评论

支持 Markdown