1. 为什么我放弃了改 app.asar 这条路Codex 桌面版用久了界面看腻是迟早的事。我最早接触换肤走的就是最经典的那条路解包app.asar把里面的 CSS 和图片资源替换掉再重新打包回去。第一次成功的时候确实挺爽界面焕然一新但好景不长——Codex 一升级所有改动全部失效重新解包发现文件结构变了之前记的路径全对不上折腾一晚上才勉强恢复。后来我换了个思路用 CDPChrome DevTools Protocol在运行时注入样式。Codex 桌面版本质上是 Electron 应用Electron 内部跑的就是 Chromium只要启动时带上远程调试端口就能用 CDP 连上去动态往页面里塞 CSS 和 DOM 节点。整个过程不碰app.asar不覆盖任何官方资源文件官方升级后重新注入一次就行。这套方案就是 Codex Dream Skin 的核心逻辑。它适合三类人一是想给 Codex 换个顺眼界面但不想折腾打包的二是被app.asar升级失效坑过的三是需要长期用 Codex 写代码、希望美化方案稳定不破坏功能的。下面我把完整落地路径拆开讲包括 CDP 启动参数、注入脚本、目录结构以及升级前后的验证和回滚。先说清楚它到底改了什么、没改什么。Dream Skin 注入的内容分两块一块是 CSS 变量和样式覆盖负责配色、圆角、字体这些视觉层另一块是顶部 Banner 的 DOM 插入用独立效果图裁切后放上去。下方四个功能卡、选择项目区域、输入框全部保留 Codex 原生组件点击、输入、快捷键都不受影响。所以它不是一张截图盖住整个界面而是真正的 UI 换肤——你能点、能输、能选项目只是看起来不一样了。我实测下来注入后 Codex 的交互逻辑没有任何变化项目选择正常展开输入框正常输入原有快捷键全部可用。这一点很关键很多截图式美化看着好看实际用起来什么都点不了那种方案直接排除。2. TaoToken 前置准备与 CDP 注入环境搭建在动手之前先把两件事准备好一是 Codex 桌面版本身二是 TaoToken 的 API 接入配置。为什么要提 TaoToken因为换肤只是视觉层你真正用 Codex 写代码时模型请求走的是 API。如果你用 TaoToken 作为模型接入层Codex 的auth.json和config.toml需要配对换肤和接入是两条独立的线但都指向同一个 Codex 实例配置错了会互相干扰。先看 TaoToken 这边。官网入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 地址不带 UTM 参数。你需要先去控制台生成一个 API Key地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite Key 生成后在 API Keys 页面管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。Codex 的配置文件在C:\Users\你的用户名\.codex\目录下核心是两个文件auth.json和config.toml。auth.json管认证config.toml管模型和 provider。如果你用 Codex 的 OAuth 登录auth.json里会有 token 字段如果用 API Key就填OPENAI_API_KEY或对应的 provider key。这里要注意Codex 的认证方式和 TaoToken 的 Key 是两套东西别混在一起。CDP 注入环境这边你需要确认三件事Codex 安装路径、Node.js 环境用于跑注入脚本、以及 PowerShell 执行权限。Codex 默认装在C:\Users\你的用户名\AppData\Local\Programs\下面具体路径可以在开始菜单右键 Codex 图标打开文件位置查看。Node.js 建议 18 以上注入脚本依赖chrome-remote-interface这个库。PowerShell 执行权限用管理员模式打开运行Set-ExecutionPolicy RemoteSigned -Scope CurrentUser即可。目录结构是整个交付物的关键。完整目录如下C:\Users\Administrator\.codex\skills\codex-dream-skin │ ├── agents ├── assets ├── references ├── scripts ├── SKILL.md注意codex-dream-skin是一个完整文件夹交接或迁移时必须整个目录一起复制。只复制 CSS 或只复制 Banner 图片脚本会找不到依赖路径注入直接失败。我踩过的坑就是第一次只拷了assets和scripts结果SKILL.md里的路径引用对不上排查了半天才发现是目录不完整。scripts目录里有两个核心脚本install-dream-skin.ps1负责首次安装和桌面入口生成restore-dream-skin.ps1负责恢复官方界面。assets放 Banner 效果图和 CSS 文件references放配置参考agents放注入逻辑的辅助模块。整个结构是自包含的不依赖外部网络下载。3. 可复制的 CDP 启动参数与注入配置这一节是核心直接给可复制的配置。先看 CDP 启动参数。Codex 桌面版启动时需要带上--remote-debugging-port参数默认用 9222 端口。如果你是通过桌面快捷方式启动需要修改快捷方式的目标在 exe 路径后面加上参数C:\Users\Administrator\AppData\Local\Programs\Codex\Codex.exe --remote-debugging-port9222但 Dream Skin 的做法更优雅它不修改官方快捷方式而是通过install-dream-skin.ps1生成一个独立的启动入口叫Codex Dream Skin。这个入口内部会先拉起 Codex 并带上调试端口然后等端口就绪后执行注入。这样官方快捷方式保持原样你随时可以用官方入口启动不带皮肤的 Codex。注入脚本的核心逻辑是连接 CDP、找到目标页面、注入 CSS 和 DOM。下面是一个可复制的 Node.js 注入脚本片段放在scripts\inject.jsconst CDP require(chrome-remote-interface); const fs require(fs); const path require(path); async function inject() { const client await CDP({ port: 9222 }); const { Page, Runtime, DOM } client; await Page.enable(); await Runtime.enable(); await DOM.enable(); // 读取 CSS 文件 const cssPath path.join(__dirname, .., assets, dream-skin.css); const css fs.readFileSync(cssPath, utf8); // 注入 CSS await Runtime.evaluate({ expression: (function() { const style document.createElement(style); style.id codex-dream-skin-style; style.textContent ${JSON.stringify(css)}; document.head.appendChild(style); })(); }); // 注入 Banner const bannerPath path.join(__dirname, .., assets, banner.png); const bannerBase64 fs.readFileSync(bannerPath).toString(base64); await Runtime.evaluate({ expression: (function() { const existing document.getElementById(codex-dream-skin-banner); if (existing) existing.remove(); const banner document.createElement(div); banner.id codex-dream-skin-banner; banner.style.cssText width:100%;height:120px;background-image:url(data:image/png;base64,${bannerBase64});background-size:cover;background-position:center;; const main document.querySelector(main) || document.body; main.insertBefore(banner, main.firstChild); })(); }); console.log(Dream Skin injected successfully.); await client.close(); } inject().catch(err { console.error(Injection failed:, err.message); process.exit(1); });这段脚本做了三件事连接 9222 端口的 CDP、注入 CSS 样式、在main元素顶部插入 Banner。注意 Banner 插入前会先检查是否已存在避免重复注入。CSS 注入用style标签带id方便后续清理。再看 Codex 的config.toml配置如果你用 TaoToken 接入模型需要这样写model gpt-4o model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY对应的auth.json里如果你用 API Key 方式填{ OPENAI_API_KEY: 你的TaoToken Key, TAOTOKEN_API_KEY: 你的TaoToken Key }这里三件套必须齐全Base URL 是https://taotoken.net/apiKey 是你在控制台生成的Model ID 是gpt-4o或你实际使用的模型。三者缺一Codex 请求就会报 401 或 model not found。换肤和这个配置是独立的但都作用于同一个 Codex 实例建议先确认模型请求正常再叠加换肤这样出问题好定位。install-dream-skin.ps1的内容大致如下负责生成桌面入口$codexPath C:\Users\Administrator\AppData\Local\Programs\Codex\Codex.exe $skinDir C:\Users\Administrator\.codex\skills\codex-dream-skin $shortcutPath $env:USERPROFILE\Desktop\Codex Dream Skin.lnk $ws New-Object -ComObject WScript.Shell $sc $ws.CreateShortcut($shortcutPath) $sc.TargetPath powershell.exe $sc.Arguments -WindowStyle Hidden -Command $skinDir\scripts\launch.ps1 $sc.Save() Write-Host Dream Skin shortcut created.launch.ps1负责启动 Codex 带调试端口等待端口就绪后调用inject.js。这样你双击桌面Codex Dream Skin就能一键完成启动加注入。4. 验证注入结果与升级前后检查步骤配置写完接下来是验证。验证分两层一层是 CDP 注入是否成功一层是 Codex 功能是否正常。先看注入验证。启动Codex Dream Skin后等 Codex 窗口出现打开浏览器访问http://localhost:9222/json你会看到当前可调试的页面列表。找到title为 Codex 的那个页面记下webSocketDebuggerUrl说明 CDP 端口已经通了。然后检查注入结果。在 Codex 窗口里按CtrlShiftI打开开发者工具如果被禁用可以用 CDP 的 Runtime.evaluate 远程执行在 Console 里输入document.getElementById(codex-dream-skin-style) ! null document.getElementById(codex-dream-skin-banner) ! null两个都返回true说明 CSS 和 Banner 都注入成功了。如果第一个是false检查assets\dream-skin.css是否存在、路径是否正确如果第二个是false检查assets\banner.png是否存在、Base64 编码是否正常。再看功能验证。注入后你需要确认四件事项目选择能正常展开、输入框能正常输入、四个功能卡能点击、快捷键能用。我实测下来这四项在 Dream Skin 下全部正常因为注入只动了视觉层和顶部 Banner没有覆盖任何交互组件。如果你发现某个按钮点不了大概率是 CSS 里用了pointer-events: none或者z-index把原生组件盖住了检查dream-skin.css里有没有这类属性。升级前后的验证步骤要单独走一遍。Codex 官方升级后app.asar会被替换但 Dream Skin 不依赖app.asar所以升级本身不会破坏皮肤文件。升级后你需要做的是关闭 Codex重新双击Codex Dream Skin入口让注入脚本重新跑一次。验证方法和上面一样检查两个getElementById是否返回true。升级前建议先记录当前状态。打开 Codex确认皮肤正常然后在scripts目录下运行.\scripts\verify-skin.ps1这个脚本会输出当前注入的 CSS 哈希、Banner 尺寸、以及 Codex 版本号。升级后再跑一次对比版本号变化确认注入仍然成功。如果升级后注入失败先检查 Codex 的安装路径有没有变再检查 CDP 端口是否被占用。恢复官方界面也很简单。双击桌面Codex Dream Skin - Restore或者手动运行.\scripts\restore-dream-skin.ps1这个脚本会通过 CDP 移除注入的style和banner节点然后关闭 Codex。重新用官方入口启动界面就回到默认状态。整个过程不涉及文件替换所以不会有残留。我试过恢复后再升级 Codex一切正常官方校验也不会报错。5. 常见报错排查401、local proxy failed 与注入失败这一节对照真实报错把最容易卡住的几个点讲清楚。第一个是 401。如果你在 Codex 里发请求报 401先确认auth.json里的 Key 和config.toml里的env_key是否对应。常见错误是config.toml写了env_key TAOTOKEN_API_KEY但auth.json里只有OPENAI_API_KEY两者对不上就会 401。解决方法是把两个字段都填上同一个 Key或者统一用一个字段名。第二个是local proxy failed。这个报错通常出现在 Codex 启动时原因是 CDP 端口被占用或者启动参数没生效。检查 9222 端口是否被其他程序占用netstat -ano | findstr 9222如果有输出说明端口被占换一个端口比如 9223同时修改launch.ps1和inject.js里的端口号。如果端口没被占检查 Codex 启动参数是否真的带上了--remote-debugging-port9222可以在任务管理器里看 Codex 进程的命令行。第三个是reading choices报错。这个通常和模型请求有关出现在 Codex 解析响应时。如果你用 TaoToken 接入确认base_url是https://taotoken.net/api注意结尾没有多余的斜杠。有些配置写成https://taotoken.net/api/会导致路径拼接错误报reading choices或unexpected end of JSON。改成不带斜杠的版本即可。第四个是 OAuth 相关报错。如果你用 Codex 的 OAuth 登录auth.json里会有tokens字段这时候不要再手动填OPENAI_API_KEY否则会冲突。OAuth 和 API Key 是两种认证方式选一种就行。如果你同时用 TaoToken 的 Key建议把 Codex 切成 API Key 模式避免 OAuth token 过期导致请求失败。第五个是注入脚本报Cannot find module chrome-remote-interface。这是 Node.js 依赖没装在scripts目录下运行npm install chrome-remote-interface如果网络慢可以换国内镜像。装完后重新运行注入脚本即可。第六个是 Banner 显示但样式没生效。这种情况通常是 CSS 注入成功但选择器没匹配上。Codex 升级后 DOM 结构可能变化检查dream-skin.css里的选择器是否还指向正确的元素。可以用 CDP 的DOM.querySelector远程查询确认目标元素存在。如果选择器失效更新 CSS 里的类名或属性选择器即可。最后提醒一点所有排障都建议先确认模型请求正常再叠加换肤。因为换肤只影响视觉不影响请求链路如果请求本身有问题换肤再漂亮也没用。TaoToken 的接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有完整的 Base URL、Key、Model ID 三件套说明配置前可以先过一遍。6. 长期使用建议与接入入口如果你打算长期用 Codex 写代码换肤只是锦上添花真正影响效率的是模型接入的稳定性。我的建议是把 Dream Skin 当作一个可随时开关的视觉层模型接入走 TaoToken 的 Coding Plan这样升级、换肤、模型切换三条线互不干扰。Coding Plan 的入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 适合需要长期编码和 Agent 场景的用户。日常使用中我习惯每周检查一次 Codex 版本和 Dream Skin 的注入状态。如果 Codex 自动升级了重新双击一次Codex Dream Skin入口就行不需要重新安装。如果哪天不想用皮肤了运行restore-dream-skin.ps1恢复官方界面整个过程不到十秒。另外交接或迁移时记得把整个codex-dream-skin目录打包带走不要只拷 CSS 或图片。目录里的SKILL.md记录了所有脚本的调用关系和路径依赖缺了它新环境里脚本会找不到资源。这一点我在前面提过但值得再强调一次因为这是最常见的换台机器就失效的原因。如果你在配置过程中遇到模型请求问题先去模型对话页面验证 Key 是否可用https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 。确认 Key 正常后再回到 Codex 里检查config.toml和auth.json。换肤和接入是两条独立的线分开排查效率更高。