PSD2CODE桌面版 - 全栈一天可以做300个psd页面了！

wuhou123
15 阅读6分钟

背景来了~

在项目依赖ui切图，或者切图仔自己切图时，如果配合Figma+AI会比较顺畅，但是大量重ui设计项目还是大量使用psd。

如果找到一个psd转Figma，会很痛苦，Figma转换插件100%会收费或者限制psd文件在50M以内，国内替代品蓝湖psd生成代码难以使用，这个时候就需要一个psd生成代码工具，快速切图和搭建页面结构，剩下的就交给AI去填充逻辑代码。

那么这一环节比较快，对于分层清晰的500M左右的psd基本能到分钟级，快速切图加结构，理论上全栈可以一天做300页，加油吧！！！！/(ㄒoㄒ)/~~

于是我封装了 PSD2CODE —— 一款面向前端与设计协作的 Windows 桌面工具。导入 .psd 文件，自动解析图层结构，输出可直接使用的 HTML / Vue / React 项目，把「设计稿 → 可维护代码」的路径缩短到分钟级。

特点

支持

  • 多框架输出：HTML 静态页、Vue 3 单文件组件、React JSX，一套设计稿适配不同技术栈
  • 智能图层解析：自动识别文本、图片、形状与组结构，语义化命名，DOM 顺序与 PSD 面板一致
  • 资源自动导出：切图、背景、图标批量导出为 PNG，路径自动写入 CSS / 模板
  • 布局优化：将绝对定位重构为 Flex 布局，减少硬编码坐标，提升可维护性
  • 快速转换模式：大型活动页 PSD 可开启快速模式，显著缩短等待时间
  • 本地桌面运行：Electron 桌面端，设计文件留在本机，不上云
  • 不限 PSD 文件大小：超大设计稿均可转换
  • 零 Python 依赖（安装版）：内置转换引擎，安装后无需额外配置 Python 环境

有限支持

  • 复杂图层效果：描边、阴影、发光等会烘焙进 PNG，二次编辑需回到 PS 或手动改 CSS
  • 文本层：带旋转、倾斜或复杂效果的文字会降级为图片，丢失可编辑性
  • 布局推断：极端复杂排版仍可能保留部分绝对定位，需人工微调
  • 预览：内置预览仅支持 HTML；Vue / React 需进入输出目录执行 npm install && npm run dev

不支持

  • Figma / Sketch：目前仅支持 Photoshop .psd 格式
  • 在线协作：无云端同步、无多人实时编辑
  • 批量队列：当前版本为单文件转换，无批量任务管理

下载与安装

下载

官网下载页：PSD2CODE 官网（阿里云盘分享）

  • 当前版本：v1.0.0
  • 适用系统：Windows 10 / 11（64 位）
  • macOS / Linux 版本筹备中

安全说明

PSD2CODE-1.0.0-setup.exe 已通过 VirusTotal 全球 67 家安全厂商联合扫描，0 / 67 威胁，无病毒、无后门、无捆绑广告。

SHA-256: 01e7bacec7b8a30401532d6bc78318ce7fad03c6d48e9d9bd9d146f7fb21ae76

安装

  1. 下载 PSD2CODE-1.0.0-setup.exe
  2. 双击运行安装程序
  3. 安装向导支持自定义安装目录
  4. 安装完成后，桌面与开始菜单会出现 PSD2CODE 快捷方式

使用

PSD2CODE 无需命令行，图形界面即可完成从 PSD 到代码的全流程。

四步完成转换

1. 选择 PSD    → 点击按钮，选取本地 .psd 设计文件
2. 选择目标    → HTML / Vue / React 一键切换
3. 开始转换    → 实时日志与进度，过程透明可见
4. 预览 & 导出 → 浏览器预览 HTML，或打开代码目录继续开发

界面操作流程

  1. 启动 PSD2CODE 桌面应用
  2. 点击「选择 PSD 文件」，选中设计稿
  3. 在目标下拉框中选择输出格式：html / vue / react
  4. 点击「开始转换」，观察实时日志
  5. 转换完成后：
    • 点击「预览」在浏览器中查看 HTML 效果
    • 点击「打开输出目录」进入生成的项目文件夹

输出目录结构（以 Vue 为例）

output/
└── 活动页名称/
    └── vue/
        ├── src/
        │   └── App.vue          # 主组件，图层结构已还原
        ├── assets/
        │   └── images/          # 自动导出的切图资源
        ├── index.html
        ├── package.json
        └── vite.config.ts

生成代码示例

转换后的 Vue 模板大致如下（图层顺序与 PSD 面板一致）：

<template>
  <div class="hero-banner">
    <img src="./assets/images/bg-main.png" />
    <h1 class="title-text">活动主标题</h1>
    <button class="btn-receive">立即领取</button>
  </div>
</template>

✓ 图层顺序与 PSD 面板一致
✓ 图片资源自动导出 & 命名
✓ Flex 布局智能优化
✓ 不再是蓝湖式截图堆叠，即刻可用

技术原理（简述）

PSD2CODE 底层采用编译器式架构，核心转换引擎为 psd2code：

PSD 源文件 → IR（中间表示）→ 目标代码（HTML / Vue / React）
     ↑ 解析 & 渲染              ↑ 代码生成 & 布局优化

主要阶段：

阶段说明
PSD 解析基于 psd-tools 读取图层树、混合模式、效果、蒙版等
像素渲染图层效果（描边/阴影/发光）烘焙合成
资源导出切图命名、去重、路径写入
语义命名图层名 → CSS 类名 / 文件名（词典 + 角色推断 + 拼音兜底）
布局优化12 步后处理：DOM 重构、Flex 推断、重复类合并等
代码生成HTML 为基座，Vue / React 在此基础上二次转换并生成 Vite 脚手架

桌面壳基于 Electron，转换引擎通过 PyInstaller 打包为内置 CLI，用户无需安装 Python。

适用场景

  • 活动页 / 运营页：复杂视觉稿快速出骨架，开发专注业务逻辑
  • H5 落地页：HTML 直出，可快速上线
  • Vue / React 项目：直接接入现有技术栈，减少从零切图
  • 设计 → 开发协作：设计师按规范命名图层，开发拿到语义化代码

设计师命名建议

图层命名越规范，生成的类名质量越高。推荐：

分区域标题，一般特殊设计，希望合并切图，图层命名例如：title
如果不希望合并可以加-noMerge，图层命名例如：图层-noMerge

避免使用 PS 默认名（「图层 1」「组 11」），否则语义 token 质量会下降。

常见问题

Q：转换很慢怎么办？
A：大型 PSD 可开启快速转换模式，跳过部分优化阶段。

Q：生成的代码能直接用吗？
A：大部分活动页可「开箱即用」；直接搭建切图后的结构体，配合AI快速开发。

Q：设计稿会上传到云端吗？
A：不会。PSD2CODE 完全本地运行，文件不离开你的电脑。

Q：SmartScreen 提示未知发布者？
A：软件尚未购买 EV 代码签名证书，属正常现象。可在 VirusTotal 查验安全性后选择「仍要运行」。

参考资料

  • 开源psd2code

  • psd-tools 官方文档

avatar
文章
阅读
粉丝