一、聊聊 20 秒 PSD2Code 那点事儿

你说啊，设计稿一出手，咱们就得忙活切图、写 CSS。

哈哈，这活儿简直跟打怪一样——耗时又累。

可是你想象一下只要敲个命令，PSD 瞬间变代码，是不是爽到飞起？

说实话，我刚用那套工具时还以为是玩笑。

结果 20 秒真的把 PSD 给玩儿成了 HTML + CSS。

咱就是说这种速度堪称 UI 开发的“闪电侠”。

老早前我们dou是手动切图，然后靠肉眼去比对像素。

那叫一个费劲儿——每次改稿子dou得重新来。

于是有人把 Photoshop 的图层信息抽出来直接喂给编译器。

不对不对，应该说是把图层当成“语法树”，再走一遍前端生成流程。

听起来有点高大上，但实际操作超乎想象地简单。

第一段：解析层级

我们用 psd-tools 把 PSD 打开，把每个图层、组、效果dou映射成对象。

这个过程会保留原始的坐标、尺寸和样式属性——包括那些隐藏的 transform 矩阵。

害，那些矩阵可不是随便丢掉的，否则文字会变成花生米大小。

第二段：生成中间表示

把解析得到的树结构转成我们自研的 IR 格式，用 Pydantic 校验字段完整性。

这里相当于把 Photoshop 的语言翻译成“前端语言”。

嗯，这一步hen关键，因为后面所有目标dou基于它来生成代码。

第三段：代码产出

根据目标框架，IR 会被渲染成对应的文件结构：

• HTML + CSS

• React

• Vue

每个目标dou会自动生成资源文件夹，里面装好图片、字体以及映射表。

--css-style compact Ke以输出紧凑版，让体积geng小。

--css-style expanded 则保留所有坐标注释，方便调试。你懂的，这玩意儿调试时Neng省不少时间。

# 克隆项目
git clone https://github.com/yourorg/psd2code.git
# 进入目录
cd psd2code
# 安装依赖
npm install
# 全局安装工具
npm install -g psd2code

# 转成 HTML
psd2code my_design.psd
# 转成 React 项目
psd2code my_design.psd --target react
# 转成 Vue 项目，并使用紧凑 CSS
psd2code my_design.psd --target vue --css-style compact

Psd‑tools 在任何层级 composite，dou按目标节点 bbox Zuo硬裁切，根本没有绕过方案。

Psd‑tools 的 .composite`只在 BBox 内有效，一旦描边超出，就被硬截掉了。

所以我们采用「手动栅格化 + composite 混合」的办法，把描边单独渲染再拼回去。这样圆角描边就不会少半像素啦。

PS 中字体往往是「思源黑体」或「造字工房」，但浏览器里用「PingFang」或「Arial」。同等字号下中文宽度会不同，导致布局错位。

解决办法是读取图层的 transform.scale 参数，根据实际渲染比例动态计算 CSS 中的 font‑size。咱们Yi经在 /core/psd/text_extractor.py`里实现了自动校正。

PS 的效果面板有全局开关，一旦关闭整个组里的效果dou不会渲染，即使单独开启也无效。

我们在解析时先判断组级别是否启用，然后再遍历子层，这样才Neng完整保留阴影、外发光等特效。

/output//metadata.json： 记录完整图层树结构，可直接定位错误位置。

/output//layer_map.json： CSS 类名 ↔ PSD 图层名映射表，帮你快速找回对应元素。

/output//_naming_report.md： 语义化命名报告，让你知道每个类名背后的含义。 Ru果发现某块位置偏差，只要打开这三个文件，对照坐标就Neng定位根因。 说实话，这比盯着 Photoshop kan两遍强太多了。 哈哈，你懂的，就是省事儿。 ‏‏‏‏‏‏‏‏‎‎‎ ‎​​​‌ ‌‍​‌​‍​​️️️️️‍‍‌‍‎⁦⁦​​⁧⁧⁦​​​​​​​‮‬‬‮‭‭ 四、真实案例拆解：从设计稿到上线仅需 20 秒 🎉 # 案例一：节日活动页

*需求*： 活动页面需要像素级还原，包括金色光晕和细微阴影；上线时间只有半天。

*步骤*：

# 1. 把设计稿保存为 .psd 
# 2. 执行 psd2code 活动页.psd --target html --css-style expanded 
# 3. 打开 output/活动页/html/index.html kan效果 
# 4. 若有细节偏差，用 layer_map.json 定位并微调 
# 5. 完毕，一键部署到 CDN 

*结果*： - 原始设计稿到可访问页面仅用了 22 秒！ - 像素误差Zui大值 ≤ 1px - 无需人工切图或二次绘制 - 客服赞不绝口：“这么快还Neng这么准？”

*需求*： 将 UI Designer 提供的 PSD 快速转为 FairyGUI 可直接使用的资源包；兼容 Unity 与 Cocos 两端。

# 转换指令：
psd2fgui game_ui.psd

output/
├── game_ui/
│   ├── fgui/
│   │   ├── package.xml      # FairyGUI 包描述文件
│   │   ├── atlas.png        # 合并纹理图
│   │   └── component.json   # UI 元数据
│   └── html/                # 辅助预览页面 



*收获*： - 手工创建组件从半小时降到几分钟  
- 自动生成组件层级，无需再手动排版  
- geng新迭代只需重新跑一次命令即可  
 


五、SEO 加分点——让搜索引擎也爱上你的页面 🚀 

*语义化标签*：工具默认输出 `` `