写给 Windows 用户
虽然本次实践的是 macOS,但整个换肤的流程是通用的,Windows 用户记得在 Codex Dream Skin 下载安装包中找到对应的 Windows 版本,按照下面的步骤一步步操作。

素材准备
开始之前,我们先了解下这个 Fei-Away 开源出来的换肤项目,没有它,我们今天的实践就不能实现了。
这是一个 Codex 换肤项目,会把你定制化的背景、主题样式注入到官方 Codex Desktop。同时,保持侧栏、建议卡、项目选择器、输入框和任务内容布局不变,仍可点击,此外这个项目也不会修改官方 .app、app.asar 或代码签名。

下面,我们来看下本次实践的所需内容:

一台 Mac

已安装并至少启动过一次的官方 Codex / ChatGPT Desktop

可以生成图片的 ChatGPT 账号

一张参考图,本文这里是 Dario 小宠参考图

Codex Dream Skin 项目

先打开一次原版 Codex,截两张图留档:一张首页,一张真实任务页面。

2

图注:换肤之前的 Codex 界面

先记住 Codex 现在朴素的模样,后面装完皮肤,我们会用同一个位置再截一张。有没有换成功,一图胜千言。

Codex 皮肤制作
其实制作皮肤图片,不是图越好看越好,因为软件界面会有很多图标,如果你的皮肤是个靓仔、靓妹,他 / 她放在界面正中间,会被首页标题挡住;左边细节太多,会看不清侧栏和文字;背景是高亮霓虹,估计和 Codex 交流五分钟眼睛就开始疼了。

所以,我们制作 Codex 皮肤的第一步不是直接丢图,让它生成界面样式。而是让它根据 Codex 的界面,先进行构图规划,让我们的 Codex 皮肤兼顾美感和实用。

下面,打开你的 ChatGPT,新建一个对话,把 Dario 小宠截图上传进去,再粘贴下面这段 Prompt:

我想根据这张参考图,制作一张用于 Codex Desktop 的横版背景皮肤。

请先不要生成图片,先帮我规划画面。

主题是“像素 Dario 的深夜 AI 实验室”。参考图只用来确定人物的核心识别特征和像素气质:卷曲的深色头发、黑框眼镜、皱眉、略带怀疑的表情。

这张图不是普通海报,而是软件工作界面的背景,需要满足:

  1. 横版 16:9 构图
  2. 人物和主要视觉焦点放在画面右侧三分之一
  3. 左侧约 40% 保持安静、低对比、少细节,为 Codex 首页标题和控件留空间
  4. 画面底部中间不要出现强光和复杂物体,避免影响输入框
  5. 整体适合长时间作为编程工具背景,不能太亮、太花
  6. 不要绘制 Codex 界面,不要画按钮、输入框和侧栏
  7. 不要添加大标题、水印或大段可读文字

请给我 3 个视觉方向。每个方向说明场景、主色、光线、人物位置和适合作为软件背景的原因。等我选择后再生成图片。
3

这个 Prompt 的主要作用是让 ChatGPT 把“什么不能画”说清楚,避免我们生成的皮肤图片挡住 Code 的功能图标。

由于个人偏好蓝色和橙色系,所以最后选的是“窗边的凌晨调试现场”:午夜蓝和灯光橙做底色,用微弱的城市灯点衬托高手的孤寂。

让 ChatGPT 生成第一版皮肤
选好方向后,继续在同一个对话里发下面的 Prompt:

请根据我上传的参考图,生成一张可以直接用作 Codex Desktop 皮肤的纯背景图。

参考图的使用方式:

  • 参考图只用于保持人物的核心识别特征和像素气质
  • 保留卷曲的深色头发、黑框眼镜、皱紧的眉毛和略带怀疑的表情
  • 不要照搬参考图的构图、动作和背景
  • 人物保持像素角色,不要变成照片、3D 模型或平滑的数字插画

主题:窗边的凌晨调试现场。

场景设定:

  • 场景位于高层建筑内,是一个安静、克制的深夜工作空间
  • 人物坐在右侧窗边的小桌前,刚从电脑屏幕前转过头
  • 他的眉头紧皱,神情像是在思考:“它刚才为什么会这样做?”
  • 窗外是像素化的深夜城市和远处月色,只保留少量稀疏灯点
  • 桌面最右端放一台很小的机器人原型,机器人处于休眠状态,只亮一个非常暗的指示点

构图必须严格遵守:

  • 输出单张横版 16:9 纯背景图,使用宽镜头,不要人物特写
  • 画面左侧 0%-45% 是暗色墙壁和窗帘阴影,只使用平缓的蓝灰渐变
  • 左侧区域不出现人物、家具、城市、文字、灯具、屏幕或明显装饰
  • 画面中间 45%-60% 作为安静的阴影过渡区,不放视觉主体
  • 人物中心位于画面横向约 72% 的位置,头部略高于水平中心线
  • 人物坐姿整体不要超过画面高度的 45%,不要画得像半身肖像
  • 窗户和城市景观集中在右上区域,不向左侧扩张,也不要延伸到底部中央
  • 人物、桌面和机器人全部收在右侧 62%-98% 的区域
  • 桌面不要跨过画面横向 60% 的位置,也不要贴住画面最底边
  • 底部中央约 35%-65% 保持暗、平、空,不放物体、灯光和纹理,为软件输入框预留安全区

视觉风格:

  • 精致、统一的 16-bit 像素艺术,像素边缘清晰,像素颗粒尺度一致
  • 主色为炭灰蓝、午夜蓝和低饱和月光蓝
  • 只使用极少量暗橙色城市灯点,不使用明亮黄色窗格
  • 月光从窗外提供柔和轮廓光,显示器只提供很弱的冷色补光
  • 人物面部整体保持低亮度,只轻微强调眼镜、眉毛、鼻梁和嘴部表情
  • 氛围安静、真实、略带疲惫感,适合长时间作为工作软件背景
  • 控制对比度和饱和度,不要赛博霓虹,不要密集发光元素

最终输出限制:

  • 只输出背景图,不要放进笔记本电脑、显示器或软件样机中展示
  • 不要绘制 Codex 或任何软件界面
  • 不要出现侧栏、按钮、卡片、输入框、窗口边框和鼠标指针
  • 不要添加标题、Logo、水印、字幕、可读文字或乱码
  • 不要增加额外人物、宠物、机器人或大面积装饰
  • 不要让城市灯光成为视觉中心
  • 不要让左侧和底部中央出现新的细节
    用过 ChatGPT 生图的小伙伴都知道,ChatGPT 你和它对话就能直接生图。所以,把这个 Prompt 丢给 ChatGPT,等着收图。

4

图注:第一个版本的背景图

第一版感觉还行,我们先来看看它能不能放进 Codex:

人物有没有跑到中间

左边是不是足够干净

输入框附近有没有太亮

有没有擅自生成英文字母或乱码

整体是不是过度锐利、饱和度太高

如果出现这些问题,原地让 ChatGPT 基于原图继续修改。

适配 Codex
虽然第一版的图片能放进 Codex,又不是不能用。但左侧接近三分之二是个暗蓝渐变,假如右侧的图案被预览窗口之类的挡住,那整个皮肤就换了和没换没区别。

所以,一个新的教训:给界面留空间,不等于把这部分画面彻底清空。

现在来重新构图。把第一版图片继续留在当前对话里,给 ChatGPT 递上下面的需求:

请以第一版图片为视觉基础重新构图。保留像素 Dario 的脸、卷发、黑框眼镜、皱眉表情、坐姿、深夜窗景和整体像素画风,但不要只做局部修色,也不要简单扩大画布。

第一版的问题是:主要人物和窗景过度集中在最右侧,左侧接近三分之二几乎完全空白。Codex Desktop 的建议卡和预览内容会覆盖右侧区域,导致真正能看到的背景只剩暗色渐变。

请按下面的结构重新生成:

  1. 把 Dario、椅子、电脑和窗边桌面整体向左移动约画面宽度的 12%-15%
  2. Dario 的脸部中心放在横向约 58%-62%、纵向约 38%-42% 的位置,保持完整可辨认,不要变成半身特写
  3. 窗户从横向约 48%-52% 开始,让月光和少量城市景观进入画面中部,不要全部挤在最右侧
  4. 最右侧 78%-100% 作为可被界面覆盖的次要区域,只放机器人、桌柜和部分城市建筑,不放人物的脸和主要动作
  5. 最左侧 0%-28% 仍然保持低对比,方便叠加 Codex 标题,但不要是完全空白的纯色渐变
  6. 在左侧加入克制、低对比的像素环境细节:窗帘褶皱、柔和的月光投影、墙面分缝和极暗的窗框阴影
  7. 画面 28%-48% 可以有淡淡的空间纵深和光影变化,让用户即使只看到左半边,也能感受到“窗边凌晨调试”的主题
  8. 左侧细节必须比人物低一个视觉层级:不出现高亮灯点、可读文字、屏幕、Logo 或第二个角色
  9. 底部中央保持低对比、少细节,可以有地面阴影或桌脚轮廓,但不要出现强光和抢眼物体
  10. 保留炭灰蓝、午夜蓝、低饱和月光蓝和少量暗橙灯点,整体适合长时间作为工作软件背景

输出仍然是单张横版 16:9 纯背景图。不要添加 Codex 界面、侧栏、按钮、卡片、输入框、窗口边框、水印和文字。

目标不是让左侧更花,而是让整张图在右侧被软件界面部分遮挡后,仍然保留明确的像素场景、月光氛围和人物识别度。
如果 ChatGPT 仍然只改了亮度,没有移动人物,继续补一句:

这不是在原画布上做局部编辑。请把第一版只作为角色和画风参考,重新生成一张新构图;必须改变人物、窗户和桌面的像素坐标,并让 Dario 的脸部中心落在画面横向 58%-62% 的范围内。
5

图注:第一版本和第二版对比图,多了点屏幕细节,Dario 也柔和了许多。

图片已经备好,下面开始让 Codex Dream Skin 给我们制作皮肤:

下载 Codex Dream Skin
打开 GitHub 项目点击绿色的 Code 按钮,选择 Download ZIP。

6

下载完成后解压,打开项目里的 macos 文件夹。里面会看到几个名字很直白的文件:

Install Codex Dream Skin.command:安装

Customize Codex Dream Skin.command:更换图片和主题

Start Codex Dream Skin.command:启动或重新应用皮肤

Verify Codex Dream Skin.command:检查运行状态

Restore Codex Dream Skin.command:恢复官方外观

在继续之前,先确认官方 Codex Desktop 已经安装,并且至少正常打开过一次。

安装皮肤工具
双击 Install Codex Dream Skin.command,这个脚本会把主题引擎安装到~/.codex/codex-dream-skin-studio 路径,而状态、日志和用户图片将会放在~/Library/Application Support/CodexDreamSkinStudio。

如果你的 macOS 打开这个文件,报了一下权限问题:

7

别删除,选择完成(Done)。去系统设置里,给这个文件打开对应的权限。参考下图:

8

安装完成后,项目会创建用来启动、定制、验证和恢复的入口。参考下面的安装完成图:

9

换上你的皮肤图片
安装完成后,双击 Customize Codex Dream Skin.command(上图放大的那个文件)。

这个脚本会打开 Finder 选图窗口。

10

选择刚才保存的图片,就是 pixel-dario-codex-skin.png。再给这个主题选一个名字,后面可以用来切换主题。

11

查收你的 Codex 皮肤
上面操作之后,会让你重启。重启完成之后,你就会得到一个定制化的 Codex 界面

12

看得出来,Codex Dream Skin 对我们的页面进行了一些定制化的设置。虽然图标这块有些错位了,到此换肤算是成功了。我们需要检查一下的是,菜单栏们能不能使用:

13

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐