PSD2UnityUI

把 Photoshop 设计稿一键变成 Unity UGUI 界面 + 绑定代码的开源自动化管线。 An open-source pipeline that turns PSD designs into Unity UGUI prefabs & C# binding code.

PSD2UnityUI 让美术按规范作图、程序少写重复代码:设计稿经导出工具变成「切图 PNG + layout.json」,Unity 编辑器读取后自动生成 UGUI 节点树、切图、九宫格、TextMeshPro 文本,并能一键生成控件绑定代码。layout.json 作为"通用语言"把三层解耦,上游换工具不影响下游。

---

解决的三大痛点

痛点	怎么解决
程序员手动拼 UI 浪费时间	自动生成节点树 + 自动生成 C# 绑定代码
设计稿和成品不一致	命名规范 + 精确坐标换算 + 自适应锚点
切图 / 导图 / 命名 / 拖拽太麻烦	自动切图 + 命名前缀识别组件 + 九宫格 + 免拖拽绑定

三层架构

① 上游·出图           ② 中游·切图导出              ③ 下游·转 Unity
PS / GIMP / 素材   →   psd-export(Python)       →   unity-importer(C#)
(按命名规范分层)        gimp-export(GIMP)            读 layout.json:
                        ↓                            校验 → 生成 UGUI → 九宫格
                     切图 PNG + layout.json          → 绑定代码 → 后处理 → 增量

快速开始

1️⃣ 导出(中游)

cd psd-export
pip install -r requirements.txt
python3 export_psd.py 你的设计稿.psd -o output      # 产出 output/(切图 + layout.json)

2️⃣ 接入 Unity(下游)

1. Unity 2021.3+,通过 Package Manager 装 Newtonsoft Json(com.unity.nuget.newtonsoft-json)+ TextMeshPro。
2. 把 unity-importer/Editor 和 unity-importer/Runtime 两个文件夹拷进工程 Assets/。
3. 把第 1 步的 output/ 拷进 Assets/。
4. 菜单 Tools/PSD2UnityUI/导入 layout.json 生成 UGUI → 选 layout.json。
5. (可选)菜单 Tools/PSD2UnityUI/生成控件绑定代码,继承 UIPanelBase 写逻辑、用 UIManager 管界面。

手把手详见 unity-importer/接入步骤详解.md。

命名前缀速查(美术必看)

前缀	生成组件	前缀	生成组件
img_ icon_ bg_	Image	scroll_ list_	ScrollRect
txt_ lbl_	文本(TMP)	input_	输入框
btn_	Button	grp_ panel_	容器(父节点)

九宫格底板用 bg_ frame_ box_,可加 @12 标边界(如 bg_panel@12)。完整规范见 PSD作图规范.md。

目录结构

PSD2UnityUI/
├── psd-export/        中游·Python(PSD → 切图 + layout.json)
├── gimp-export/       中游·GIMP 开源切图(导入已有图)
├── unity-importer/    下游·C#(Editor 导入器 + Runtime UI 框架)
├── verify-csharp/     纯逻辑验证(.NET 9)
├── tools/             辅助脚本(生成架构总览图)
├── skills/            配套 AI 图层自动命名 skill
├── assets/            文档配图
└── *.md / *.html      文档与上手指南

文档导航

• 📐 PSD作图规范.md — 美术作图规范(命名/分组/切图/九宫格)
• 🗺️ UI管线改造总蓝图.md — 三层管线总路线图
• 🔬 VectoUI研究与UI管线自研方案.md — 立项研究与方案
• 🤖 自动命名上手指南.md — AI 图层自动命名
• 📦 项目交付总结.md — 完整能力与状态
• 🎨 管线上手指南.html — 可视化小白上手(浏览器打开)
• 🛠️ unity-importer/增强功能说明.md — 进阶能力(锚点/九宫格/字体/UI框架/无障碍)

验证状态(诚实说明)

环节	验证
PSD → 切图 + JSON(Python)	✅ 实测
坐标换算 / 绑定代码 / 增量 / 命名校验(C# 纯逻辑)	✅ .NET 9 独立验证
Unity 集成(生成 GameObject / Runtime 框架)	⏳ 需在 Unity 工程编译运行验证
GIMP 开源切图	⏳ 需在 GIMP 3.0 实测

纯逻辑(坐标/解析/生成)已脱离 Unity 验证;操作 Unity GameObject 的集成代码需在真实工程跑一遍确认。

参与贡献

欢迎 issue 与 PR,详见 CONTRIBUTING.md。

许可证

MIT © 2026 PSD2UnityUI Contributors

致谢

参考了开源蓝本 quick_psd2ugui 与 quick_uicode 的思路。