1 / 12
换肤工作流

Pencil 换肤工作流与
工程化架构方案

设计稿与代码同构、资产管线自动化、主题一键切换。

Cover Visual 1 Cover Visual 2 Cover Visual 3
为什么要做

传统换皮 vs 本方案

传统：设计稿当参考、研发猜结构；多马甲包后硬编码泛滥；每次换皮全链路人力大。

传统

❌ 画稿≠所得，研发盲猜 DOM。
❌ 硬编码多，代码腐化快。
❌ 每次换皮：美术→切图→前端，投入大。

本方案

✅ 设计稿图层 = DOM 树，一一对应。
✅ 每元素唯一 ID，AI 与代码共用。
✅ 切图与重组用母盘+脚本批量完成。

Figma → Pencil

从 Figma 到 Pencil 结构

设计稿进 Pencil 后变成带 ID 的节点，供自动化与代码映射使用。

  • 1
    Figma 定稿 → 设计师完成视觉。
  • 2
    导入 Pencil →
    可以从 Figma 选定块无缝粘贴结构，一键复制到 Pencil 里。
    也可以单独把整个 Figma 文件完整导入至 Pencil 中。
  • 3
    带 ID 节点 → 自动化管线与代码映射共用。
Pencil 映射
架构蓝图

根据不同业务需求的三种换肤模式

时效：1~2 天

1. 极速换皮（纯视觉替换）

让 AI 根据描述词快速出图，自动切片出大盘风格。底层骨架和交互一点不碰，主打一个“快”，适合马甲包火速上架。

时效：3~6 天

2. 现有老项目结构大改

用 MAPPING 映射和独立目录隔开新旧皮肤，防止 AI 乱改导致逻辑崩溃。一句话让 AI 自动翻新界面，不影响老代码。

时效：视复杂度而定

3. 从 0 到 1 全新开发

不再靠人工慢慢切图和写结构，Pencil 直接把设计稿1:1转成代码骨架，省去了初期对着 Figma 的苦力活。

第一种：极速换皮

场景 1.1：描述词一键生成 Q 版 (约 1 小时)

直接拿老图给 AI，一句话就能在保持原有结构的情况下，快速换成 Q 版界面。

原设计稿

原设计稿

AI 描述词转换 (Q版稿)

Q版设计稿
第一种：极速换皮

场景 1.2：整版截图一键切换风格

只给一张原版的完整截图，配合 Banana AI 和一句提示词，任意切换海盗风或赛博风等各种画风。

基础大盘

原始素材结构

海盗风格快速衍生

瞬息衍生：海盗风

赛博风格定型

品质定稿：赛博风

第一种：极速换皮

场景 1.2 延续：母盘合并、自动切图与高清放大

AI 画出主视图后，不再靠人工切图，纯自动化脚本一条龙解决模糊和切片问题。

① AI 统一出母盘图

让 AI 把所有零散的按钮、弹窗拼成一张母盘大图，避免各个部件分开画导致的画风撕裂或大小不一。

Sprite Sheet

② Python 脚本自动拿高清切图

  • OpenCV 透明抠图： 脚本自动分析大图，把上面的部件一个个透明抠出来。
  • Real-ESRGAN 高清放大： 把抠出来的小图放大变清晰，去噪点去毛刺，直接给游戏和网页用。
[STEP 1] OpenCV -> Extracted 120 elements
[STEP 2] Real-ESRGAN -> Upscaled x4 to /cdn_ready
第二种：现有老项目结构大改

Mapping 映射与代码文件夹隔离

必须防止 AI 在瞎改排版时，把核心的老代码逻辑给改崩了。

建立设计与代码的绑定契约

用一份 DESIGN-VIEWS-MAPPING.md 把设计稿节点和代码组件绑死。
即使 AI 去重写外观，也只能改表皮，无权动功能状态。

设计映射 Pencil 节点图

换肤代码的纯文件夹隔离

直接在文件夹层面复刻视图，原来是 src/app/(views)，新皮肤就用 src/app/(views-luxury)。

打包时敲个不同命令就换一套目录。老代码稳如泰山，新皮肤再怎么造也不会污染主干。

第二种：现有老项目结构大改

一句话让 AI 自动翻新界面

在安全区建立好之后，说句话就能让 AI 来重新排版。

AI 帮你做精装修

咱们只要跟 AI 说一声：“把 Header 的圆角去掉，换成新样式”。AI 就会认准 Mapping 里的规矩，把活干漂亮。

老交互一点不丢

虽然 UI 外观已经彻底改头换面，但这只换了一层干净的皮。老项目里复杂的交互逻辑一条都没断。

第三种：从 0 到 1 全新开发

全程 1:1 傻瓜式高保真还原 (Pencil)

告别照着 Figma 苦哈哈切图

直接用 Pencil 直接把设计稿里的画板、文字解析提取成写好的 DOM 结构。把我们从“按图搬砖、强行对齐”的体力活里解放出来。

本套架构演示方案与报告本身（如 index.html 和对应的 Markdown）便源于该管线的孵化能力示例，还原度达到极速且惊艳的级别。

0 → 1

无限拓展的边界

探索中，但未来可期

效率革命

别让“体力活”拖垮了生产力

从“周”到“小时”，这不仅仅是快，更是生产方式的降维打击。

旧 传统“磨洋工”模式

1. 苦哈哈切图： 照着 Figma 一个个切素材，命名、合图，一天就过去了。
2. 样式硬编码： 把颜色、间距写死在业务代码里，改个皮像动手术，稍不留神就崩。
3. 交付靠等： 设计改个方向，研发重写一套。排期按“周”计算，黄花菜都凉了。

新 Pencil “极速开挂”模式

1. AI 一键出片： 想要啥风格动动嘴，素材自动铺满，像素级对齐，10分钟搞定。
2. 物理层隔离： “肤色”和“骨架”彻底分开，换皮不碰逻辑，稳如老狗，上线不慌。
3. 交付按小时： 一个指令全端变脸，极速上包马甲包，今天提需求，今天就上线。

结论：同样的任务，过去需要 两三周 的人力投入，现在只需 1～3天。

总结与致谢

少写业务屎山，把时间留给灵感

不管是极速上架换皮，还是老项目翻新重建，
把代码结构隔离开、保护好，才能让团队少加班，让项目活得久。

感谢您的聆听，携手共筑优质架构生态。