Skip to content

SPEC.md

Latest commit

 

History

History
82 lines (53 loc) · 4.91 KB

SPEC.md

File metadata and controls

82 lines (53 loc) · 4.91 KB
Raw

项目说明

技术栈：

客户端：electron 内嵌的网页实现：React+Vite+ TypeScript

客户端功能。一个类似 Agent 的聊天页面。左右结构，左边以对话的形式展示用户输入、Agent 返回的日志、Agent 和 用户的交互确认。右侧是用来展示资源。

这是一个跨平台支持 MacOS、Windows 的应用。目标是帮助用户指定系统中已经存在的设计稿，然后调用系统中存在的 Photoshop，打开指定设计稿。 使用一些基础的库读取设计稿文件的 图层结构信息，作为对话信息。根据用户的要求，主要为绕着 增删改查重命名目标图层，然后对符合要求的图层，进行调用 JSX 脚本导出的一个软件。

Agent 的功能帮助分析用户意图，然后返回调用本地的工具。

有一个设置界面，用来感知 Photoshop 的path，做一些设置。 这是单机软件没有用户登录，打开就可以使用。

设置界面有 About 关于栏目，检查更新，可以检查当前的 github 的 tag 进行更新。网络获取最新的 tag 大于当前的 tag 就认为有更新提示用户。

读取设计稿信息注意

  1. 使用主流psd 处理库，用来读取设计稿的元信息，图层信息。
  2. 使用库进行对图层的搜索、批量修改
  3. 导出图片，使用 jsx 的脚本进行导出，脚本参考 @backup/jsx/psd-group-exporter.jsx 中导出逻辑，不需要参考界面。

脚本集中放在一起维护起来，并且附上文档。

详细的界面功能和交互

  1. 界面风格要求比较高级。黑白灰，商务蓝色为主，不要渐变色。
  2. 存在项目管理的列表，本地数据库使用sqlite 进行记录，感知本地的文件
  3. 主界面在列表上面有一个 巨大的 + 号，支持拖拽上传本地的 psd 设计稿。 psd 的文件自动为项目名字。需要根据文件的路径进行去重，如果相同的文件曾经拖入打开过，那么打开对应的项目记录
  4. 界面上面有路由，可以随时回到主界面
  5. 拖拽的 + 号，点击打开系统插件可以选择用户本地文件。支持对 *.psd 的过滤
  6. 用户进入项目后，对话框上面会 高亮 @设计稿文件。 不可以修改，修改需要新建对话。
  7. 最左侧是对话列表，围绕设计稿名字也就是项目名建立。一个项目下可以建很多对话。也可以删除对话。类似 codex 的界面
  8. 每个对话界面，就是左右2个部分，左边的展示对话历史、用户日志、agent 的交互，右侧是 导出图片的预览。 用户的每次对话都在一个和对话相关 tmp 目录下进行，预览界面就是展示 tmp 下面的处理结果。 用户确认后可以导出
  9. 对话框下面有一些设置勾选框，这些都作为默认的上下文每次传输。
    • 支持裁剪功能，导出的时候自动去掉四周的透明变宽
    • 支持 1倍图、2倍图 导出（需要导出脚本支持）默认勾选二倍图
    • 支持无损压缩，默认勾选。导出后对 PNG 做无损压缩，像素不变、仅缩小体积
    • 展示一个导出图片的路径，默认和设计稿一个路径。但是允许点击修改。需要记住。

导出后处理流水线

导出把图片写入对话 tmp 目录后，按对话勾选项对结果做「后处理」。处理是一串有序步骤，顺序固定：

  1. 裁剪(trim)：去掉四周透明边。目前在 Photoshop 导出阶段(JSX)完成。
  2. 压缩(compress)：无损压缩 PNG（sharp / libvips，compressionLevel:9），像素不变、仅缩小体积；仅当产物更小才写回。

实现见 electron/services/image/pipeline.ts，单个文件失败只记录、不影响其它文件与步骤。将来新增的后处理步骤(如加水印、格式转换)按顺序插入该流水线即可。 sharp 为原生依赖(N-API 预编译，ABI 稳定，无需 electron-rebuild)，但平台二进制需在对应平台安装；打包已在 electron-builder.yml 的 asarUnpack 中解包 sharp 与 @img。

agent 说明

  1. 使用 @anthropic-ai/claude-agent-sdk
  2. 设置中允许填入
    • API 地址
    • API 密钥
    • 模型

额外确认的信息

已锁定的决策:

  • 图层增删改/重命名/导出 → 统一走 Photoshop JSX
  • PSD 元信息读取(图层树) → ag-psd 纯 JS
  • Agent → 仅做「意图解析 → 本地工具调度」
  • 检查更新 → 仅提示 + 打开 GitHub Release 页(仓库先占位)
  • 第一版 → 完整功能一次建成

一个需要你知道的跨平台细节: backup 里的脚本用的是 macOS 的 osascript → do javascript。Windows 上 Photoshop 没有 AppleScript,需要走 COM 自动化(Photoshop.Application.DoJavaScript,用 PowerShell/VBScript 驱动)。我会在计划里做一个统一的 PhotoshopBridge 抽象,mac 和 win 各一套实现,JSX 脚本本身两端共用。

让我先做一点技术核实(ag-psd 能力、claude-agent-sdk 的自定义工具用法),确保计划里的接口是准确的。