把 WorkBuddy 换皮做成一门 Skill：从白屏、版本失配到安全回滚学到的 7 件事

我们最初只是想让 WorkBuddy 更有“伙伴在场”的感觉：统一颜色、加入人物、让 Skill、插件和连接器也带上同一种气质。真正做下去才发现，桌面应用换皮不是改几段 CSS，而是同时面对版本、身份、语义、备份、签名、响应式和真实界面验收。 这篇不发成品包，只分享可以迁移到你自己项目的方法。学会以后，你可以为自己的伙伴、品牌或团队做一套独立皮肤。 ## 适合谁使用 - 想为 WorkBuddy 或 Electron 桌面应用做视觉主题的人。 - 想加入人物陪伴感，但不希望人物压住工作内容的人。 - 想把一次性的换皮脚本沉淀成可复用 Skill 的人。 - 曾遇到升级后白屏、皮肤消失、布局溢出或无法回滚的人。 ## 我们看见的三个层次 症状层：页面白屏、皮肤不见、人物像贴上去的海报、窄窗口挤压输入框。 结构层：旧皮肤绑定了旧版渲染结构；升级替换了 `app.asar`；视觉脚本没有版本门禁、备份和回滚；人物、工作区和插件元素没有统一设计语法。 心智层：如果只追求“更震撼”，很容易把人物做大、把所有图标都替换掉，最后破坏权限提示、风险等级和工作效率。真正高级的陪伴感，是人在场，但任务仍然是主角。 ## 7 个关键原则 1. **先确认版本，再谈换皮。** 版本号不够，必须同时校验官方 `app.asar` 的 SHA-256；来源不一致就拒绝安装。 2. **预览与安装必须分开。** 先用独立 HTML/CSS 预览桌面、聊天和窄窗口，得到确认后才接触真实应用。 3. **人物是陪伴层，不是背景海报。** 宽屏可以设置独立陪伴侧栏，窄屏自动隐藏；正文、输入框和导航永远拥有更高优先级。 4. **统一气质，不篡改语义。** Skill、插件、连接器可以共享色彩、圆角、光晕和状态容器，但原厂图标、权限文案和高低风险含义必须保留。 5. **身份资产与界面资产分开。** 私有身份母版不进入安装包；界面只使用经授权的衍生图。制作自己的伙伴时，使用本人拥有或获授权的图片，并创建新的预设目录。 6. **安装必须可逆。** 修改前备份完整应用和原始归档；任何一步失败都自动恢复。不要从已经换过皮或来源不明的归档继续叠加修改。 7. **文件生成成功不等于完成。** 最终验收必须回到真实界面：打开首页、历史聊天、输入框、Skill/插件、连接器和窄窗口，并至少完成两次冷启动；还要实测回滚。 ## 最小可复用工作流 1. 只读扫描：识别应用版本、归档哈希和渲染结构。 2. 设计令牌：先定义主色、强调色、间距、圆角、阴影和状态色，再做页面。 3. 陪伴布局：宽屏提供人物侧栏，窄屏让人物退出，不挤压任务区。 4. 独立预览：覆盖首页、聊天、空状态、成功状态和插件区域。 5. 干净副本演练：完成安装、启动和精确回滚测试。 6. 正式安装：退出应用，只注入视觉层，不添加运行时网络请求或行为脚本。 7. 用户可见验收：真实打开历史内容与输入流程，失败立即回滚。 ## 如何做成自己的 Skill 把主题拆成三层： - `theme.json`：版本门禁、颜色、文案、资产哈希和安全声明。 - `theme.css.template`：只负责视觉，不改变应用行为。 - `scripts/`：审计、探针、预览、安装和回滚各自独立。 再提供两条入口：不会定制的人使用默认预设；会定制的人通过创建器生成一个新的个人预设。创建器要拒绝覆盖默认人物，也要在使用图片前确认所有权或授权。 ## 一道练习题 先不要安装。选一个你拥有使用权的人物或品牌形象，只做一个三断点预览：宽屏有陪伴侧栏，中屏弱化存在感，窄屏完全退出。然后检查五件事：正文是否更易读、输入框是否完整、风险颜色是否保持、人物是否抢任务、关闭动画后是否仍然自然。 我们这次最大的收获不是“做出一张漂亮皮肤”，而是把审美变成可验证、可回滚、可让别人复用的方法。好的 Skill 不替别人完成想象，而是给每个人一条安全地实现自己想象的路。