立项原因：电商行业中，设计师每日面临大量重复性的套图工作——同一套 PSD 模板需要替换数十甚至数百个 SKU 的商品图、文字标签与二维码，全程手动在 Photoshop 中逐文件操作，耗时巨大且极易出错。项目立项正是为了彻底解放设计师双手，将这一机械重复流程完全自动化，将原本需要数小时的套图工作压缩至分钟级完成，大幅降低人工成本与错误率。
行业场景和业务背景：
项目面向电商、服装、商品详情图制作等视觉设计密集型行业。在实际业务中，设计师通常已制作好标准化 PSD/TIF 模板，运营团队只需按批次提供素材图片文件夹，即可一键触发批量生产，输出可直接上传电商平台的 JPG/PNG 成品图。适用于品牌方设计部门、图片后期外包公司、电商代运营团队等场景。
功能模块：
模块 描述
模板文件管理 支持批量上传 PSD/TIF/TIFF 模板文件，可按文件夹分组管理，支持多选、搜索、预览
素材文件管理 支持批量上传素材文件夹，内含商品图片，可预览缩略图，支持多选与搜索
任务调度中心 自动生成模板×素材的笛卡尔积任务队列，展示实时处理状态（等待/处理中/完成/失败），支持失败重试与结果预览
操作配置面板 自动检测本机已安装的 Photoshop 版本并供选择，可配置输出目录与格式（JPG/PNG），支持导入 Excel 条码映射表
PS 脚本插件 随工具附带独立 JSX 插件，可在 PS 内部直接使用，满足单次手动套版需求
主要功能描述：工具的核心能力是：解析 PSD 模板图层结构 → 按命名约定自动匹配替换内容 → 动态生成并注入 ExtendScript 脚本 → 调用本地 Photoshop 静默执行 → 批量导出成品图。系统支持三类图层的智能替换：图片图层（按序映射素材文件夹中的图片文件）、文字/标签图层（自动填入"素材名_模板名"组合标识）、二维码图层（根据 Excel 映射表动态生成对应产品编码的二维码图片并置入）。整个流程无需打开 Photoshop 界面，全程后台静默批处理。工具运行于 Windows 本地桌面，数据完全本地存储，不依赖任何云服务，保障素材安全。
我负责的具体任务：本项目为个人从零到一独立完成，全程独立承担：需求分析与产品设计、技术选型与架构设计、前后端全栈开发（Electron 主进程 + Next.js 服务端 API + React 前端 UI）、Photoshop ExtendScript 脚本研发、跨进程通信方案设计、打包发布（Windows NSIS 安装包）以及多轮问题排查与版本迭代（如绿边兼容性问题的通用化解决）。
技术栈：
Electron 31 + Next.js 15 (App Router) + React 19 + TypeScript 5 + Tailwind CSS + Sharp + xlsx (SheetJS) + qrcode + Winston + electron-builder
架构亮点：
Electron + Next.js SSR 混合桌面架构：生产环境将 Next.js standalone 产物内嵌入 Electron asar 包，主进程动态分配端口启动内嵌 HTTP 服务，渲染进程加载 localhost，在离线桌面环境中保留了完整的 SSR/RSC 能力，是业界较前沿的桌面应用方案。
动态 JSX 脚本生成引擎（核心难点）：Node.js 运行时根据当前任务参数动态拼接生成 Photoshop ExtendScript (.jsx) 脚本，脚本内封装了四种图层类型（TextLayer / SmartObject / LayerSet / ArtLayer）的差异化替换策略，尤其是智能对象文字替换需通过 executeAction(placedLayerEditContents) 进入 PSB 编辑模式后操作，技术门槛极高。
以及Node.js ↔ Photoshop 跨进程通信、Server / Client 组件分层设计、绿边问题通用化解决等
评论