企业官网建设流程全解析

又是一个免责声明：本文系 macOS 下的个人实践记录，不是 OpenAI 官方教程。文中使用的 Codex Dream Skin 是第三方开源项目，不属于 OpenAI；像素 Dario 也是基于公开人物特征创作的非官方像素形象。不同版本的 Codex Desktop、macOS 和项目脚本跑出来的结果可能不同，建议把本文当作一条可参考的实践路径，而不是唯一正确答案。

在开始之前，本文默认你已经有 ChatGPT 会员，可以直接使用 ChatGPT 的图片生成和图片编辑能力。不会写专业生图提示词也没关系，后面我会把用到的 Prompt 全部放出来。

今年五月，Codex 小宠小火了一波。大家都给自己的 Codex 塞进了猫猫、恐龙和各种动漫角色。其中有一只名为像素 Dario 的小宠很受欢迎。它有着小卷发、戴着黑框眼镜，再配上一张“我对这件事保持怀疑”的脸。它站在 Codex 旁边 ，有一种很难形容的 BOSS 感。

刚好昨天社交平台掀起了一股 Codex 换肤风，是时候让 Dario 一统 Codex，占领全部的 Codex UI 了。你的 Codex 目之所及，均是 Dario。当然如果你不喜欢黑框 Dario，可以把 Codex 变成你的初音、热巴和刘宇宁。

写给 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，截两张图留档：一张首页，一张真实任务页面。

图注：换肤之前的 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 个视觉方向。每个方向说明场景、主色、光线、人物位置和适合作为软件背景的原因。等我选择后再生成图片。

这个 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，等着收图。

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

第一版感觉还行，我们先来看看它能不能放进 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% 的范围内。

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

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

下载 Codex Dream Skin

打开 GitHub 项目点击绿色的Code按钮，选择Download ZIP。

下载完成后解压，打开项目里的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 打开这个文件，报了一下权限问题：

别删除，选择完成（Done）。去系统设置里，给这个文件打开对应的权限。参考下图：

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

换上你的皮肤图片

安装完成后，双击Customize Codex Dream Skin.command（上图放大的那个文件）。

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

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

查收你的 Codex 皮肤

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

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

测试下来，基本上都没问题。下面，我们来学习下如何卸妆，一键还原 Codex 原本面貌。

一键卸载 Codex 皮肤

我们换上皮肤之后，下一个需求一定是换别的皮肤，或者是恢复 Codex 的原貌。这里教你如何恢复原貌，换回那个朴素的它。

点击codex-dream-skin-studio文件夹下的Restore Codex Dream Skin.command命令，

Restore Codex Dream Skin.command

点击之后，重新打开 Codex，确认它已经回到官方外观。

好的，到这里整个换肤教程已经结束了。

最后

和小七分享下你换皮后的界面，让小七学习下你的审美吧~