Pencil 换肤工作流与
工程化架构探索方案 (PoC)
打通设计、产品与研发链路的早期概念验证框架。
关于底层架构分离、组件解耦，以及 AI 全自动视觉管道的技术探索。
为什么要做这个方案？打破研发与设计的“黑盒”
解决传统换皮工程中“沟通成本高、代码腐化快、交付周期长”的三座大山。
传统痛点：玄学重构
❌ “画稿不等于所得”：设计稿只是像素堆叠，研发需盲猜 DOM 结构。
❌ “样式污染”：硬编码颜色导致代码库随着马甲包增加迅速腐化。
❌ “人力瓶颈”：每次换皮都需要全链路（美术重绘 $\rightarrow$ UI切图 $\rightarrow$
前端重写）的巨大投入。
本方案核心价值：契约化研产一体
✅ 结构强对齐：强制设计稿图层列表 100% 等于前端 DOM 树。
✅ 全息映射（Pencil）：赋予每个设计元素唯一的 ID 指纹，为自动化铺路。
✅ AI 产能释放：基于组件母盘和单图，让机器替代人工完成繁复的切图与重组。
无缝衔接：从 Figma 像素到 Pencil 结构的跨越
设计工具不再是孤岛，通过 Pencil 将创意转化为可消费的数据资产。
-
1Figma 定稿：设计师在熟悉的 Figma 中进行完整视觉创作。
-
2结构复制：通过 Pencil 插件或粘贴，将图层按组件逻辑导入 Pencil 环境。
-
3自动转换：Pencil 将视觉层转换为带 ID 的全息节点，作为自动化管线的唯一输入源。
第一环：Banana AI 引擎，快速生成风格变体
不再等待漫长的美术重绘周期。仅需一张基础截图作为“姿态引子”，即可衍生出无限风格与高清图层。
基础参考图 (Base)
自动变体 A (Pirate)
最终定稿风格 (Cyber)
第二环：实战效能展示—— 1小时极速重绘
仅利用描述词驱动图象生成，实现了从“周”到“小时”的工作量质变。
参照基准：原设计稿
包含大量复杂细节，传统美术工序重置到新风格需耗费极高的人力重构图层。
突破点：Q版风格生图
利用描述词约束，在保留整体界面结构的前提下，AI 高效秒级推演全新 Q版图层。
第三环：自动化输出母盘与 Python 切片闭环
打通美术生图后，研发无需手动切图的最后一步。
第①步：输出统一组件母盘
为什么要用 Sprite Sheet？
单纯散图输出会导致画风、光影和尺寸脱节。通过全量母盘输出，我们能确保所有按钮、图标在同一批次生成，保持视觉100%统一性（网格对齐）。
第②步：Python 解剖与超分入库
利用 OpenCV 轮廓算法，强制将带背景的大图按网格肢解为数百个带 Alpha 通道的透明 PNG 素材。
对机器切图后的毛边和低分辨率资产执行 AI 补点去污，确保输出质量达到工业生产标准。
[QA] Real-ESRGAN 4x completed. Stored in /perfect_sprites/
路线 B 技术核心：视图强隔离，秒级安全出包
针对极速马甲包：无需改动原代码逻辑，如何让新切图瞬间生效并过 QA？
痛点解决：消灭极高风险的条件判断联调
传统换皮充斥着恶心的 `if (skin === 'a')`。现在我们在构建期直接物理软链指向：
🚀 交付飞跃： 强业务代码（Context, Hooks, 状态机）在
/core
库被彻底锁死保护。真正的“换壳”免除了新代码污染老逻辑导致的全量回归测试灾难。
补充加持：CSS 变量大统揽
即便两个皮肤跑在两套壳子上，它们的共用骨架（如全局排版色、底层安全色）依然走统一的
[data-ui-theme] 变量，通过一套 JSON 字典实现项目级“一键滤镜调色板”支持。