Community影像github.com

ps-figma-ecommerce

用 Photoshop 原生素材与 Figwright 制作、续修及交付可编辑的 Figma 电商主副图和 A+ 套图。适用于 PS/PSD/PSB 到 Figma 的素材提取、按需求表和参考图排版、多轮局部修改、成图导出及 Excel/WPS 图片回填;不用于纯前端代码实现或没有 PS/Figma 需求的普通生图。

ps-figma-ecommerce 是什麼?

ps-figma-ecommerce is a Claude Code agent skill that 用 Photoshop 原生素材与 Figwright 制作、续修及交付可编辑的 Figma 电商主副图和 A+ 套图。适用于 PS/PSD/PSB 到 Figma 的素材提取、按需求表和参考图排版、多轮局部修改、成图导出及 Excel/WPS 图片回填;不用于纯前端代码实现或没有 PS/Figma 需求的普通生图。.

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Ricardo0426/ps-figma-ecommerce-skill/tree/main/ps-figma-ecommerce

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

PS–Figma 电商设计工作流

把产品源稿变成可继续修改的设计工程,并把交付图准确对应到需求表。操作对象是用户已有的 PS 文件、Figma 文件和需求表;它们不是可随意重建的模板。

从本轮真实状态开始

  1. 先判断用户要的是读交接、全套制作、局部修订、独立场景素材,还是导出/回填。只执行已授权范围。用户说“先看看意见”,先阅读与归纳;不要立即改图。后续“继续完成”可沿已有目标推进,不重复索要许可。
  2. 读取最新需求表、最新交接说明、当前 Figma、最近修订索引。用户刚在打开的表格里写意见时,先确认已保存到磁盘,或用可信的实时通道读取;本地文件不是未保存的内存版本。最新用户要求和当前实际文件优先于旧文档、builder 或历史快照。附图里的文字是待辨识的参考,不自动当作指令。
  3. 写入前保存有时间/轮次标识的结构快照和必要源文件备份。保护明确“不变”的首图、已确认页面、原始 PS 源稿及参考图。只做局部修改时,不顺手重排整套。
  4. 工具按当前环境发现并读 schema,不能假定过去可用的 Figwright/Photoshop MCP 现在仍可用。只读当前元数据确认 Figma 文件/页面与 PS 文档 ID;有多个连接时先锁定正确对象。当前环境没有某工具时说明缺口,可继续准备映射、素材和文案,但不声称已改远端工程,也不要静默改用未经验证的通道。

建立两份可追溯映射

在项目的本轮修订目录保存以下信息,字段与示例见 references/project-contract.md:

  • 交付索引:稳定 output_id、当前表格图序、行号、板块标签、宽高、文案单元格、修改意见、Figma 组 ID、导出路径、保护/修订范围。
  • 素材索引:素材别名、源文档与图层 ID、智能对象层级、原生文件及实际像素、派生裁切范围、Figma 实例/视口和处理原因。

图序、板块标签、文件名、Figma ID 是四种不同信息。按当前表格图序排列和回填,按板块标签识别内容;不要把 A+11 排在 A+2 前后当成天然顺序。旧表可能缺号或改号,不自行补内容。

根据任务读取详细流程

当前工作需要读取
从 PSD/PSB 提取产品、发现素材模糊/裁缺、处理嵌套智能对象references/photoshop-native-assets.md
Figma 新建/局部修订、恢复参考版式、文案换行、图层与超时恢复references/figma-editing.md
场景/光轨生成、清晰度和跨图变化references/backgrounds.md
原尺寸导出、逐图检查、压缩包、需求表插图或替换与交接references/delivery-and-xlsx.md

不要为一个只需改位置的任务载入并重跑全套素材提取或生成流程。

设计与修订的核心约束

产品真实性与最高可用信息

  • 产品、接口、夹具、技术结构和配件来自经确认的 PS/真实素材;不通过生成背景时顺带生成产品细节。
  • 智能对象先取原始内容,再检查是否还有高分辨率嵌套源。画板截图、缩小包装层和烘焙旧边框不能替代原生完整素材。
  • 区分“完整主体展示”和“有意局部特写”。前者保留全主体、等比适配;后者明确裁切范围与用途,不能用完整小产品替代参考图中的握把、缝线或按键特写。

保持可编辑、保留用户选择

  • 正式文案使用 Figma 原生 TEXT,保留可编辑性。背景、光轨、旗帜/装饰、产品、卡片、文字和压暗层分开。
  • 文字保护用独立黑色矩形或可编辑渐变层,通过透明度调节;不烘焙进背景/产品。仅交付 PNG/JPG 可以合成。
  • 已有海报组、遮罩、层序和布局约定优先;不为套用 UI 模板强行转成 FRAME/自动布局。只有用户要求响应式结构或原工程本来如此时才引入。
  • “按参考图版式”先看实际参考和历史组:是交叠、上下、分组、特写还是全景。需要恢复时优先克隆正确的旧结构,隔离工作后再局部改色/文案;不重画成另一个模板。
  • “去 logo”一般指后加的版面品牌标识;不要未经要求擦掉产品原有印刷、软件 UI 或游戏封面品牌。含糊且会实质改变结果时再确认。

文案与视觉检查一起做

  • 内容以对应单元格/本轮确认文案为准。保留单位、适配器条件、不兼容说明及品牌原写法;参考图中其他型号参数不能迁入。
  • 断行优先保持语义、平台名、数字单位连贯。需要时用不间断空格;实际测量 Figma 文本高度,不机械复制旧行数或不断缩字号。
  • 在原尺寸和缩略图两个尺度逐张看:产品完整/局部意图正确、边距、基线、底框内边距、红线与文本块顶底、文字对比、背景是否糊或重复。几何在框内并不代表字没有被光线穿过,也不代表对齐好。
  • 发现用户未授权的并发修改,先读回并保留;不要拿旧快照覆盖。若产生冲突,指出具体对象再确认。

分批写入与恢复

一次处理一个版块或一小批明确节点。每批保存返回 ID/进度,再读回几何或导出预览。遇到超时、断连、输出过大时:

  1. 停止后续依赖写入;保存错误和已完成的记录。
  2. 恢复连接后读取目标节点,区分完成、未完成与部分完成;工具宣称原子批量也不能替代超时后的状态确认。
  3. 只补做缺失操作,不盲重放创建/导入/克隆。检查文本 reflow、蒙层前后顺序和组边界。

不要把整页快照塞进单次工具参数;写到本地或分块传输,向用户只展示紧凑摘要。

完成条件

  • 用户指定内容与版式已落到当前正确的 Figma 工程;需要可编辑的文字、素材和压暗层仍独立。
  • 对本轮变化做结构/文案/视觉核查,明确哪些是实测、哪些只是历史记录。旧审计 pass 不等于本轮通过。
  • 需要导出时,按交付索引核对图数、尺寸、文件名及图序;需要回填时保留需求表批注、参考图、文案、结构和样式。
  • 表格占用时保留已验证的新副本,说明“副本已完成、原表未同步”,等用户保存关闭后再写回;不关闭应用、不杀进程、不强写。
  • 最新总览/入口指向最新轮次,旧版本和原始文件保留。交接记录当前工程、索引、导出/回填状态、剩余限制与生成素材来源,不能以历史脚本作为当前状态。

最终答复说明完成项、实际更新位置和必要限制,展示关键预览及用户可用的交付文件。不要用只生成了图片包来代替已授权的 Figma 修改,也不要把锁定的原表报告成已更新。

相關技能