SuperAPI AI 工具集

psd-layer-reader

设计与创作

查看项目

更新于 10-16 04:42

技能介绍

用途

PSD 图层读取器用于将 Photoshop(.psd)文件的图层树导出为 JSON,便于分析 PSD 结构、查找特定图层(如弹窗、按钮),或为 HTML/CSS 还原做前期调研。它可按图层名过滤,仅返回匹配分支。

主要能力

  • 导出完整图层树为 JSON。
  • 按图层名过滤,支持精确匹配与包含匹配,仅返回匹配分支。
  • 输出图层元信息:名称、类型、可见性、bbox。
  • 输出文本图层的详细样式信息。
  • 从图层名提取布局标记(如 flow-y、fixed)。

使用方式

  1. 安装依赖(每个环境仅需一次)
py -3 -m pip install psd-tools
  1. 导出完整图层树 (JSON)
py -3 -X utf8 scripts/psd_layers.py "path/to/file.psd" --output "psd_layers.json"
  1. 仅导出匹配分支(精确匹配)
py -3 -X utf8 scripts/psd_layers.py "path/to/file.psd" --name "rule-modal" --output "rule_modal.json"
  1. 仅导出匹配分支(包含匹配)
py -3 -X utf8 scripts/psd_layers.py "path/to/file.psd" --name "modal" --match contains --output "modal.json"

输出格式 (JSON)

每个节点包含以下关键字段:

  • name (字符串): 安全名称。经过规范化,去除了特殊字符,确保可直接用于变量名或文件名。
  • originalName (字符串): 原始图层名。保留 PSD 中的真实名称,用于追溯和调试。
  • layerId (整数): PSD 内部的唯一 ID,用于消歧。
  • kind (字符串): 图层类型(如 group, type, pixel)。
  • visible (布尔值): 是否可见。
  • bbox ([x1, y1, x2, y2]): 图层边界框坐标。
  • layoutTag (字符串|null): 从图层名提取的布局标记(如 flow-y, fixed)。如果图层名为 [flow-y] content,则 layoutTag 为 flow-y。
  • textInfo (对象|null): 仅针对文本图层 (kind == 'type')。
    • text: 完整文本内容。
    • runs: 包含不同样式的文本分段列表。
    • fontSize, color, fontName, leading 等:首段文本的样式摘要。
  • children (数组): 子节点列表。

最佳实践与提示

  • 名称冲突处理: 如果 PSD 中存在重名图层,name 字段会自动附加 layerId(如 button-123)以确保 JSON 结构的唯一性。
  • 布局还原: 在还原 HTML 时,优先参考 layoutTag。带有 [flow-y] 或 [flow-x] 标记的图层通常对应 Flex 布局。
  • 文本提取: 如果发现文本颜色或大小不准,请检查 textInfo.runs。复杂的文本图层可能在同一行内包含多种样式。
  • 编码处理: 在 Windows 下运行脚本时,务必带上 -X utf8 参数,否则处理中文图层名可能会报错。

资源

  • scripts/psd_layers.py: PSD 图层树导出核心脚本。支持 --verbose 查看转换详情。
  • scripts/layer_parser.py: 图层信息解析逻辑。
  • references/PSD_TOOLS_TEXT_EXTRACTION_EXAMPLES.md: psd-tools 文字图层提取技术参考。

适用场景

  • 分析 PSD 结构。
  • 查找特定图层(如弹窗、按钮)。
  • 准备 HTML/CSS 还原。

限制

资料未提供除上述内容外的其他限制说明。