北京
左边是Codex，我每天都在用的AI编程工具。右边是同一个应用，只不过它穿了件Windows XP的衣服——Luna蓝、Bliss壁纸、开始按钮，还有“我的文档”那样的面包屑导航。点一下就能切换，再点一下恢复原样，没有任何一个应用文件被修改过。
这篇文章要讲的是它背后的运作方式。有意思的地方不在于怀旧感，而在于底层的技术引擎。整套东西都是开源的，而且不只是给Codex用，它能在四个不同的AI编程应用上跑。
给AI编程应用换皮肤，这事儿已经悄悄成了一种小潮流。我老是碰到一些付费的Codex“皮肤包”和安装脚本，自己也想要一个。但试了几个之后，我发现我真正想做的事还得再往前推一步。
不光是一张背景壁纸——我想把整个界面重新打扮一遍：侧边栏、对话编写器、卡片、按钮，通通换个模样。把它变成2007年QQ的风格，或者Windows XP的样子，而不是只在背后垫张图片。还有，不只是给Codex用，我用着不止一个AI编程应用。最后，这些主题得能打包分享，最好还能让AI根据一张参考图直接帮我生成出来。既然现有的东西做不到这些，我就动手做了CodeDrobe。
那么，它到底是怎么在不碰应用本身的情况下给界面换皮的呢？核心机制是这样的：CodeDrobe连接到应用自身的Chrome开发者工具协议，绑定地址严格限制在127.0.0.1本地回环。然后向渲染进程注入可逆的CSS代码。没有对app.asar进行任何编辑，没有替换二进制文件，也用不着重新签名。点一下恢复，所有东西立刻回到原样。
整个设计里，让我最满意的是主题的自适应方式。很多换肤方案本质上就是扔一张静态背景图，再配合一些自动调和的颜色。但CodeDrobe不这么干。
它会通过CDP协议，从运行中的应用里拉取一份只读的DOM快照。这份快照经过了隐私过滤处理，不包含任何文本内容、输入框里的值、网址，也不含链接和媒体资源的指向信息，只保留语义类名、稳定的选择器候选对象，以及元素的尺寸大小。接下来，让AI去读这份真实的DOM结构，针对实际的界面架子生成一套完整的CSS主题——侧边栏、对话区域、编写器、按钮，无所不包。
这就是为什么一个主题能让应用看上去像换了款软件，而不是简单变个颜色。当应用升级、DOM结构发生变化的时候，你只需要重新拉取快照再生成一次就好，不必对着大堆的选择器一个个手动打补丁。
当然，这个方案有个实打实的取舍：让AI每次都去读DOM再生成CSS，比直接发布一套静态样式规则消耗的token要多得多。但你换回来的是主题本身的深度，还有它们在应用下次更新后不至于全军覆没的顽强生命力。
生成私密过滤的DOM快照，只需要一行命令，整个过程不启动应用也不做任何修改。
所有东西都建立在一个开放的包格式之上，规则由一份JSON模式严格定义。一个文件就是一个主题，里面装着JSON清单、CSS代码以及内嵌的图片。分享、上传、导入，都是同一个文件到处用。而且，一个主题包能同时适配多个不同的应用。在配置当中，targets.codex、targets.workbuddy这些字段各自携带着对应应用的CSS样式，但归在同一个视觉身份之下。
应用主题之前会做预检，失败了就自动回滚。主题声明了它依赖哪些界面地标，如果发现不兼容，会直接报错，而不是把一套残破的样式乱糟糟地糊在应用界面上。整个机制不含任何JavaScript代码，全靠声明式配置驱动。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
