MIT License

技术解读

以下内容由 GitRead 中文社区 编辑团队基于项目 README 与官方资料整理, 结合中文开发者的常见使用场景补充技术选型建议。具体以项目官方文档为准。

HeiGeAi/heige-codex-skin-studio 深度技术分析

项目背景与痛点

Codex 和 ChatGPT 在桌面环境中的应用,由于其官方界面设计和功能的局限,用户往往希望对应用界面进行个性化定制。然而,对桌面应用进行个性化定制通常是复杂且技术要求高的任务,需要深入了解应用的内部结构和渲染机制。HeiGeAi/heige-codex-skin-studio 项目通过 CDP(Chrome DevTools Protocol)注入的方式,使用户能够方便快捷地对 Codex Desktop 界面进行换肤,从而满足个性化需求。因此,该项目的价值在于解决了用户界面定制难的问题,同时提供了预设主题和自定义选项。

核心技术揭秘

heige-codex-skin-studio 项目利用 Chrome DevTools Protocol (CDP) 从外部注入 CSS 和 JavaScript,以实现无侵入式的应用界面换肤。这项技术的核心在于如何在不修改应用核心代码的情况下,动态地修改界面样式。应用启动后,客户端通过 CDP 连接到 Codex Desktop 浏览器进程,并注入特定的样式和脚本以达到换肤效果。

技术架构分析

项目的技术架构大致可以分为两个部分:客户端注入逻辑和前端界面配置。客户端负责通过 CDP 注入 CSS 和 JavaScript,前端负责提供用户界面和配置保存。

客户端注入逻辑

客户端通过监听 Codex Desktop 的启动事件,建立与浏览器进程的连接,并注入预先准备好的主题 CSS 和修改脚本。具体步骤如下:

  1. 监听 Codex Desktop 启动事件。
  2. 通过 CDP 连接到浏览器进程。
  3. 注入 CSS 和 JavaScript,实现页面修改。
  4. 维护 CDP 连接,确保应用状态同步。
前端界面配置

前端则提供了用户界面,允许用户选择预设的主题或上传自定义图片进行取色。保存的配置同时会被客户端引用,实现个性化的界面更改。

graph TD A[用户启动 Codex Desktop] --> B[客户端监听启动事件] B --> C[通过 CDP 连接到浏览器进程] C --> D[注入 CSS 和 JavaScript] D --> E[前端界面配置] E --> F[用户选择/上传主题] F --> G[保存配置] G --> H[客户端应用配置更改]

功能亮点与差异

功能亮点

  • 零修改注入:项目利用 CDP 实现无侵入式渲染更改,无需修改 Codex Desktop 内部代码。
  • 多样主题:预设多个主题,包括但不限于 Miku、原神、鸣潮、火影等,同时也支持用户自定义主题。
  • 跨平台支持:支持 macOS 和 Windows 系统。

竞品比较

相比同类应用,heige-codex-skin-studio 的差异化优势在于其灵活的主题配置和 CDP 注入机制。许多换肤应用仅提供部分定制选项,且往往要求对应用本身进行一定程度的代码修改。heige-codex-skin-studio 则通过 CDP 进行动态注入,降低了用户的操作复杂度,同时提供更高的定制自由。

应用场景与落地建议

适合在生产环境使用 heige-codex-skin-studio 的场景有很多,尤其是在需要多个用户频繁切换应用界面以满足不同需求的情况下。例如在多人协作、小组讨论或团队展示中,成员可以根据个人喜好迅速调整界面风格,提高工作和讨论的舒适度。

注意事项

  • 兼容性:需注意不同版本的 Codex Desktop 可能会对注入的 CSS 和 JavaScript 有不同的兼容性表现,建议定期检查新版的兼容性。
  • 安全操作:虽然 CDP 注入方式相对安全,但仍需确保客户端的代码安全,防止注入恶意脚本。

综合评价

优点

  • 高效简洁的实现方式:利用 CDP 进行无侵入式修改,允许用户快速切换和定制主题。
  • 灵活的自定义设置:支持多样预设及自定义主题,满足用户个性化需求。

缺点

  • 文档和教程支持有限:官方文档或许需要更详细的说明和使用案例,以进一步帮助用户理解和使用。
  • 安全性依赖第三方库:项目的安全性和稳定性依赖于 CDP 注入机制的可靠程度,可能存在一定的安全漏洞。

综上所述,heige-codex-skin-studio 在解决桌面应用个性化定制问题上发挥了重要作用,尤其对于需要频次较高主题切换的场景,它提供了高效便捷的解决方案。其核心技术和实现方式展示了现代 Web 应用周边工具的灵活性和强大能力。

简要分析

热度分
641
价值分
322
活跃状态
活跃

语言占比

Batchfile
JavaScript
PowerShell
Shell
Swift

README

HeiGe Codex Skin Studio | Codex 换肤工作室

写代码的地方,也该是你喜欢的样子。

一张图片就是一套主题。装好之后,换肤只是顶部菜单里的一次点击,随时一键还原官方界面。

Reskin OpenAI Codex Desktop with one image. Native controls stay fully interactive.

License: MIT Platform Codex Desktop

快速开始 · 做你自己的主题 · 晒图区 · 完整手册 · English · 官网

出品:公众号「问问黑哥」 · 短视频「问问黑哥」 · 更多开源见 HeiGeAi 组织主页

赞助与推荐

HeyRoute HeyRoute|AI 编程与多模态 API 入口

💻 AI 编程接入:一个 API Key 可接入 Codex、Claude Code、Cursor 及 OpenAI 兼容客户端,替换 Base URL 即可开始。
🎨 多模态创作:支持语言模型、AI 生图、生视频和图像编辑,适合内容创作、应用开发与 Agent 工作流。
🧠 多模型入口:覆盖 OpenAI、Claude、Gemini、Grok、DeepSeek、Kimi、Qwen、GLM 等模型系列,具体可用模型以平台实时页面为准。
📊 调用记录可查:统一管理 API Key、用量与调用记录,方便测试不同模型并核对实际消耗。
🎁 注册福利:通过 专属注册链接 完成注册,即送 US$15 试用额度。先跑通真实任务,再决定是否充值。

🆕 5.5.15 更新:Mac 专属双产品皮肤启动器

macOS 安装后会得到独立的「HeiGe 皮肤启动器」。它能分别打开或关闭 Codex、WorkBuddy 的当前皮肤,并提供一键修复和诊断日志入口。电脑重启、客户端更新或皮肤意外丢失后,无需重新执行命令,点击启动器即可恢复最近使用的皮肤。

本版同时集中修复 WorkBuddy 的透明浮层问题。权限确认、任务归档、专家召唤等同源对话框恢复不透明主题底色,并补齐文件管理下拉菜单的实底保护。

真机截图:HeiGe 皮肤启动器 5.5.15

5.5.15 真机截图:Codex 与 WorkBuddy 独立控制,支持打开皮肤、关闭皮肤、一键修复和诊断日志,夜间模式保持清晰可读。

🆕 重大升级:现已支持国产 AI 编程工具 WorkBuddy

同一套引擎,现在也能给腾讯 CodeBuddy 桌面端(WorkBuddy)换肤。一次性皮肤、即点即换、一键还原原生界面,用法见 WorkBuddy 章节。

真机截图:WorkBuddy 换上 Miku 488137 主题

真机截图:WorkBuddy 5.3.11 换上 Miku 488137 主题,顶部中间同样是「主题」入口,主题中心即点即换。

真机截图:Miku 主题与顶部主题切换入口

真机截图:Miku 488137 高精度主题,顶部中间的「主题」入口直接打开主题中心。

真机截图:HeiGe 主题中心

真机截图:主题中心。当前主题、自定义图片、原生界面、内置主题预览、阅读增强和皮肤常驻开关都在一屏里,主题卡片即点即换。

它长这样

下面全部是真机截图,侧栏、输入框、建议卡都是 Codex 原生控件,可以正常点。

鸣潮 原神 · 星夜
真机截图:鸣潮主题 真机截图:原神星夜主题
原神 · 破晓 大佬 · 点烟
真机截图:原神破晓主题 真机截图:大佬点烟彩蛋主题

Windows 版

Windows 11 版本现已发布:查看最新 Release。

  • Windows 安装与恢复:使用 scripts\windows\install.bat / apply.bat,不修改 app.asar、应用二进制或签名资源。
  • 随 Windows 登录启动:开启「皮肤常驻」后会为当前用户注册登录计划任务,无需再次运行安装脚本。首次启用后请重启 Windows 或注销后重新登录一次;后台皮肤控制器将随登录启动,并在随后普通启动 Codex 时恢复主题与顶部入口。
  • 隐藏按钮:顶部主题入口可选择「隐藏此按钮」,收起为小圆点;点击即可恢复,状态会保存。
  • 随机主题:提供持久化的随机主题开关,随机选择主题并尽量避免连续重复。

Microsoft Store/MSIX 客户端仍需真机验证。商店版若报回环隔离,可先运行 scripts\windows\enable-loopback.bat(一次管理员权限)再重试 apply;自动接管在端口仍不可达时无法完成。

WorkBuddy(腾讯 CodeBuddy 桌面端)

同一套引擎也能给 WorkBuddy 换肤,走本机回环 CDP(127.0.0.1:9342,与 Codex 的 9341 互不干扰),同样不修改 app.asar:

"<仓库路径>/scripts/workbuddy-apply.command" --restart

应用后 WorkBuddy 顶部出现 🎨 主题中心,内置主题即点即换;还原运行 scripts/workbuddy-restore.command。三点实话:

  • WorkBuddy 侧只做一次性皮肤,不支持常驻。它的 renderer 是本地 file:// 页面,回调控制服务时带的来源是 Origin: null,放行会削弱控制服务的来源校验,所以这版直接不开控制通道。重启 WorkBuddy 后皮肤消失属预期,重跑一次 apply 即可。
  • 需要本机 Node.js 22 或更新版本(WorkBuddy 自身不带可执行的 Node)。
  • macOS 在 WorkBuddy 5.3.11 真机验证;Windows 侧只写了结构,未在真机验证。

快速开始(macOS)

需要已装好的 Codex Desktop。下载本仓库后双击安装:

open "<仓库路径>/scripts/install.command"

装完默认应用 Miku 预设,并在 $HOME/Applications 创建或升级带 Miku 图标的「HeiGe 皮肤启动器」。电脑重启、Codex 或 WorkBuddy 更新、原生启动导致皮肤不在时,直接点击这个 APP。原生面板会显示 Codex 与 WorkBuddy 两张产品卡片,以及各自最近使用的皮肤;每张卡可以打开或关闭当前产品的皮肤。底部「一键修复」会对已安装产品执行干净重启并恢复各自最近皮肤,使用前先保存当前任务。启动器不重复提供主题选择,日常切换仍在目标 APP 顶部的 🎨 菜单里完成。

open "$HOME/Applications/HeiGe 皮肤启动器.app"

Codex 卡片只恢复当前会话,不会擅自打开「皮肤常驻」;WorkBuddy 卡片保持一次性皮肤,不创建常驻服务。「关闭皮肤」只暂停当前会话,保留最近主题和常驻选择。「一键修复」会重启已安装的目标 APP,但不会修改 app.asar。启动器不会创建新的登录项、联网下载代码或请求管理员权限。运行失败会在卡片内显示并允许重试,「诊断与日志」可打开两个产品各自隔离的状态目录。

Windows 用 scripts\windows\install.bat 安装;日常入口是 scripts/windows/apply.ps1、兼容名 scripts/windows/enable-skin.bat(只恢复当前会话)、scripts/windows/pause.ps1、scripts/windows/resume.ps1、scripts/windows/restore.ps1、scripts/windows/close-codex.bat(只安全完整退出 Codex/GPT 桌面端并保持关闭,不改常驻、不自动重启)和 scripts/windows/enable-loopback.bat(商店版回环隔离时一次性提权豁免,不在每次 apply 时弹 UAC)。彻底移除时运行 scripts\windows\uninstall.bat:它会注销当前用户计划任务、移除开始菜单入口、清理 AppData 状态和稳定安装目录。即使稳定安装目录已被手动删除,也可从源码目录运行该卸载入口清理残留。Microsoft Store/MSIX 真机待验证,细节见完整手册。Windows 各功能的验证状态、已知问题和自助排查见 Windows 兼容状态。

用一张图做你自己的主题

三条路,从省事到好玩:

  1. 菜单直接传:🎨 菜单里选「+ 自定义图片」,上传成功后写入本机用户主题库,成为正式用户主题,并自动取色、自动配深浅外观。
  2. 做成正式主题:双击 customize.command,任意 PNG、JPG、JPEG、WebP 都能生成一套完整皮肤(配色 + 背景底图)。
  3. 让 AI 全包:把 output/heige-codex-skin-studio.skill 交给 Codex,直接说「先生成一张蓝紫色赛博城市主图,再做成皮肤」,从生成到应用全自动,不需要额外 API Key。

现成的生图提示词在主题提示词库:8 套风格,复制就能用。做出好看的主题,来晒图区贴一张,或者用主题晒图模板投稿,被选中会进 README 精选。

一个实话:菜单新上传会写入本机用户主题库并记入启动器,和内置主题一样可在「皮肤常驻」下跨重启复现(同名同图幂等覆盖)。只有旧版 custom-upload 是本地兼容槽,可由 renderer 本地存储继续显示;新上传不再以该快捷槽作为权威存储。也可用第 2 / 第 3 条路从文件或 AI 生成主题。

内置 13 套主题

高精度定制的 Miku 488137 打底,原神、鸣潮、火影忍者、恋与深空各两款轻量主题,再加入「龙珠 · 筋斗云」「龙珠 · 超级赛亚人」「财神 · 清爽可读」和彩蛋预设「大佬 · 点烟」。预设主题会同步切换 Codex 自身的浅色或深色外观。安装包里还带可选的 Miku Future 动画桌面宠物,装不装由你,不覆盖 Codex 内置宠物。

这些概念图展示「一张图就是一个皮肤方向」的设计效果,内置的轻量预设使用无文字干净壁纸版本:

财神 · 清爽可读
财神清爽可读主题主视觉
龙珠 · 筋斗云 龙珠 · 超级赛亚人
龙珠筋斗云主题主视觉 龙珠超级赛亚人主题主视觉
原神 原神
原神 Codex UI 概念一 原神 Codex UI 概念二
鸣潮 鸣潮
鸣潮 Codex UI 概念一 鸣潮 Codex UI 概念二
火影忍者 火影忍者
火影忍者 Codex UI 概念一 火影忍者 Codex UI 概念二
恋与深空 恋与深空
恋与深空 Codex UI 概念一 恋与深空 Codex UI 概念二

使用须知(都是实话)

  • 注入走本机回环 CDP(127.0.0.1:9341),不修改 app.asar、应用二进制或签名资源;未来 Codex Desktop 改变启动参数或界面结构时,本项目仍可能需要适配。
  • 常驻由你决定:顶部菜单「皮肤常驻」开关是唯一受支持的开启常驻入口,关闭时会先确认,并提示「关闭后本次继续使用;下次启动恢复原生界面」。
  • 阅读增强默认开启:默认 50 档时,最终回复和过程回复都使用 90% 主题自适应半透明底色,并保留对称留白保护文字可读性;可在主题中心随时关闭,不使用大面积实时模糊、阴影、观察器、滚动监听或后台请求。
  • 界面通透度:主题中心滑杆支持 0 至 100 档,50 档保持原有观感,越大越通透且遮罩不透明度不低于 60%;关闭阅读增强时回答背景仍完全通透,偏好本地保存并跨窗口同步;对 Codex 全部主题生效,WorkBuddy 换肤不显示该滑杆。
  • 想让皮肤重启后一直在:先打开「HeiGe 皮肤启动器」恢复当前会话,再到顶部菜单打开开关进入常驻。开启成功时开关应在数秒内变绿,且状态与计划任务或 LaunchAgent 已写入;失败会立刻提示,不会长时间停在「正在等待后台确认」。常驻开启后,正常重启 Codex 也会由后台控制器接管并恢复皮肤(Windows 与 macOS 均支持;Store 若屏蔽调试端口则无法接管)。
  • macOS 每次安装都会生成或升级 Schema 5 原生「HeiGe 皮肤启动器」。启动器使用独立的初音未来窗口 Logo,并自动读取 Codex 与 WorkBuddy 的本机真实 APP 图标;universal AppKit 二进制、Dock 图标、窗口 Logo 和入口均纳入本地 ad hoc 完整性签名,并注册到 LaunchServices。ad hoc 签名用于发现本地篡改,不等于 Apple Developer ID 签名或公证,也不承诺绕过未来系统安全策略。
  • 「HeiGe 皮肤启动器」按产品走专用 launch-skin.command、close-skin.command、repair-skin.command 和版本绑定的内部路由。Codex 使用 9341,WorkBuddy 使用 9342,各自优先恢复最近一次非原生主题;关闭只暂停当前会话,一键修复会干净重启并恢复最近皮肤。没有历史选择时才使用 miku-488137。enable-skin.command 仍是 session-only 兼容入口;enable-persist.command 是弃用的非零退出入口。
  • 整窗突然变卡(帧率骤降、输入滚动全局迟滞):跑 scripts/apply.command --restart 先彻底退出 Codex 再拉起注入;健康会话下直接重跑 apply 是幂等的,不会重启进程。
  • 支持范围:macOS 有日期化真机验证;Windows 走跨 PowerShell 自动化,Microsoft Store/MSIX 真机待验证;使用系统 Node 时要求 Node.js 22 或更新版本。
  • 安全边界:CDP 即使只绑定本机回环也无认证,本机同权限进程在威胁边界内,完整说明见 SECURITY.md;素材来源逐文件登记在 ASSET_PROVENANCE.md。
  • 更新后背景消失或配色异常:运行 DOM 兼容巡检,随 issue 附上巡检输出。
  • 命令行、主题 JSON 格式、常驻细节、全部 FAQ 和设计边界,都在完整手册。

投稿与贡献

想提主题预设或改代码,先看贡献指南。一句话版本:基于最新 main 开发,主题预设必须登记素材来源,代码改动先开 issue 对齐范围,本地 npm test 全绿再提交。

交流群

微信群「Codex 皮肤共创交流」已满 200 人上限,扫码加我微信,我手动拉你进群。加好友记得备注:codex。纯技术交流,非盈利,互相学习,分享你做的主题、聊实现、提问题都欢迎。

加黑哥微信(备注 codex)手动拉进 Codex 皮肤共创交流群

English

HeiGe Codex Skin Studio reskins Codex Desktop through loopback CDP injection without modifying app.asar, binaries, or signature resources. One image becomes one theme; a top menu switches themes instantly and controls next-launch persistence. Full English documentation: README.en.md.

作者与同系项目

由 问问黑哥(HeiGeAi) 打造。公众号「问问黑哥」写 AI 落地深度文章,短视频账号「问问黑哥」在抖音、B站、视频号、小红书讲人话 AI 科普。同系开源项目见 HeiGeAi 组织主页,内容被 AI 引用优化用的是自家的 HeiGe-GEO-SEO。

许可证与素材

代码使用 MIT License。该许可只覆盖软件代码,不授权角色、商标或第三方视觉素材。逐文件来源与授权状态见 ASSET_PROVENANCE.md,发布边界见 NOTICE.md。

素材风险提示:免责声明与非商业用途声明不能替代转载、再分发或商标使用许可。来源或授权无法核实的素材在 provenance 表中标为未验证,分发者应自行取得许可或替换。若涉及安全问题,请按 SECURITY.md 私密报告;一般素材权利问题可提交 Issue。


觉得不错就点个 Star。换好了皮肤,来晒图区贴一张。

评论

暂无评论