https://github.com/siuserxiaowei/psd-batch-tool
PSD 批处理工具：面向设计素材自动化、图片工作流和批量处理。 | PSD batch tool for design automation, image workflows, and bulk processing.
https://github.com/siuserxiaowei/psd-batch-tool
batch-processing poster-generator psd react vite
Last synced: 17 days ago
JSON representation
PSD 批处理工具：面向设计素材自动化、图片工作流和批量处理。 | PSD batch tool for design automation, image workflows, and bulk processing.
- Host: GitHub
- URL: https://github.com/siuserxiaowei/psd-batch-tool
- Owner: siuserxiaowei
- Created: 2026-04-27T16:59:08.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-06-15T09:43:03.000Z (19 days ago)
- Last Synced: 2026-06-15T11:51:58.354Z (19 days ago)
- Topics: batch-processing, poster-generator, psd, react, vite
- Language: TypeScript
- Homepage: https://siuserxiaowei.github.io/psd-batch-tool/
- Size: 1.34 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PSD 批量换图工作台
## Repository Guide
### What This Repository Does
PSD 批处理工具：面向设计素材自动化、图片工作流和批量处理。
English summary: PSD batch tool for design automation, image workflows, and bulk processing.
### Online Entry Points
- GitHub repository: https://github.com/siuserxiaowei/psd-batch-tool
- Live / GitHub Pages: https://siuserxiaowei.github.io/psd-batch-tool/
- Default branch: `main`
- Primary language: `TypeScript`
- Topics: `batch-processing`, `poster-generator`, `psd`, `react`, `vite`
### How To Read / Learn This Repository
1. 先读本 README，确认项目目标、在线入口和本地运行方式。
2. 打开上方 Live / GitHub Pages 链接，先从最终效果理解项目。
3. 查看 `package.json` 的 scripts，确认开发、构建和预览命令。
4. 如果要修改内容，先小范围改动，再运行本 README 中的验证命令。
### Clone This Repository
```bash
git clone https://github.com/siuserxiaowei/psd-batch-tool.git
cd psd-batch-tool
```
### Run Or View Locally
```bash
npm install
npm run dev
npm run build
```
### Repository Map
| Path | Purpose |
| --- | --- |
| `README.md` | 项目入口说明，先读这里。 |
| `package.json` | Node/前端项目配置和常用脚本。 |
| `index.html` | 静态站首页或页面入口。 |
| `src/` | 主要源码目录。 |
| `public/` | 公开静态资源。 |
| `docs/` | 文档或 GitHub Pages 输出目录。 |
| `.github/` | GitHub Actions、Issue/PR 模板等自动化配置。 |
| `eslint.config.js` | 项目文件。 |
| `package-lock.json` | 项目文件。 |
| `tsconfig.app.json` | 项目文件。 |
| `tsconfig.json` | 项目文件。 |
| `tsconfig.node.json` | 项目文件。 |
### Maintenance Notes
- Keep this README in sync when the project purpose, live link, or run commands change.
- Prefer small, focused commits when changing code, data, or generated pages.
- Run the relevant build or validation command before publishing changes.
- If this is a generated/static archive, update the source data first, then regenerate the public files.
### Privacy And Safety
- Do not commit API keys, tokens, passwords, cookies, private URLs, or internal account data.
- Keep private source material out of public GitHub Pages output unless it has been explicitly cleared for publication.
- When in doubt, run a quick secret scan such as `rg -n "token|secret|password|access_key|authorization"` before pushing.
## 项目介绍 / Project Introduction
**中文介绍**：PSD 批处理工具，用于图片素材、设计文件和内容生产流程中的批量处理与自动化。
**English**: A PSD batch processing tool for automating image assets, design files, and content production workflows.
**SEO 关键词 / SEO Keywords**: PSD, batch processing, design automation, image workflow, 设计自动化
一个给设计师和运营同学试用的 PSD 海报批量生成原型。它的目标很简单：保留设计师在 Photoshop 里的模板工作流，把重复出图这一步变成网页里的几次点击。
给设计师看的操作文档：[PSD 批量换图工作台使用说明](./docs/usage.md)
## 适合解决什么问题
- 一套海报版式，需要批量替换商品图、人物图、二维码或活动主图。
- 同一个价格角标、标签、姓名、标题等文字区域，需要按表格逐行替换。
- 设计师习惯先在 PS 里做好模板，不想重新学习复杂的设计工具。
- 运营同学只需要准备图片和表格，就可以导出一批 PNG 成品。
## 当前功能
- 导入 PSD 文件并读取图层。
- 自动优先识别带 `_替换`、`换图`、`replace` 等命名的图层。
- 从 PSD 图层里选择可替换槽位，并可保存当前 PSD 的槽位配置。
- 支持图片槽位：铺满、完整显示、拉伸三种模式。
- 支持图片裁切：矩形、圆角、圆形，适合 Logo、头像、二维码。
- 支持文字槽位：按表格内容替换，支持字号、颜色、字体、对齐，并自动缩小避免溢出。
- 支持上传 TTF / OTF / WOFF / WOFF2 字体文件。
- 支持 CSV / XLSX 数据表。
- 支持批量图片上传。
- 自动提示表格缺字段、图片文件名匹配不上等问题。
- 实时预览每一行生成结果。
- 一键导出 PNG 压缩包。
- 内置样例和测试数据，方便快速体验。
## 推荐的 PS 模板命名方式
为了让工具更好识别，建议把要替换的图层命名得直白一点：
```text
商品图_替换
Logo_替换
价格_替换
角标文案_替换
姓名_替换
二维码_替换
```
如果是黄色价格牌这类区域，建议拆成多个图层：
```text
黄色价格底框 固定不替换
角标文案_替换 表格列名：角标文案
价格_替换 表格列名：价格
```
表格示例：
```csv
页面名称,姓名,Logo,商品图,角标文案,价格
张三_新人价,张三,logo-a.png,product-a.png,新人价,¥129
李四_会员价,李四,logo-b.png,product-b.png,会员价,¥159
王五_限时价,王五,logo-c.png,product-c-wide.png,限时价,¥199
```
如果要按行切换字体，可以增加全局字体列，或者给某个文字槽位单独指定字体：
```csv
页面名称,姓名,字体:姓名
张三卡片,张三,BrandFont.otf
李四卡片,李四,Songti SC
```
## 设计师试用流程
1. 打开页面后，先点「测试」看内置样例。
2. 上传自己的 PSD 模板。
3. 在「PSD 图层」里点选需要替换的图层。
4. 在「替换槽位」里确认槽位类型是「图片」还是「文字」。
5. 给图片槽位选择裁切方式，给文字槽位调整字号、颜色、字体、对齐。
6. 上传图片素材和可选字体。
7. 上传 CSV 或 XLSX 表格。
8. 查看数据匹配提醒，修正缺图或列名不一致的问题。
9. 翻页预览不同成品。
10. 点击「导出 PNG 包」。
## 本地开发
```bash
npm install
npm run dev
```
常用检查：
```bash
npm run lint
npm run build
```
## 技术栈
- React + TypeScript + Vite
- ag-psd：读取 PSD 图层
- JSZip：生成批量导出压缩包
- read-excel-file：读取 XLSX 表格
- lucide-react：界面图标
## 当前原型限制
- 目前导出格式是 PNG。
- PSD 的复杂效果、智能对象和部分高级混合效果可能无法完全还原。
- 文字渲染使用浏览器字体，和 Photoshop 字体可能存在细微差异。
- 更适合验证「批量替换和出图流程」是否顺手，后续再补更完整的 PSD 兼容性。
## 联系我 / Contact
想交流 AI 工具、内容自动化、SEO、私域增长或项目合作，可以扫码加我微信。
For collaboration on AI tools, content automation, SEO, private-domain growth, or product experiments, scan the WeChat QR code below.
**关键词 / Keywords**: PSD, batch processing, design automation, image workflow, AI tools, AI automation, GitHub Pages, SEO