psd-layer-reader

Name: psd-layer-reader
Author: xiao0916

github.com/xiao0916设计与 UI070 次安装33 周前更新

关于 psd-layer-reader

将 PSD 图层树导出为 JSON，并支持按名称精确或包含匹配过滤。开发者可借此查看图层名称、坐标、布局标记和文本样式，为设计转代码做准备。

复制下面的命令，在终端中运行。

$npx skills add https://github.com/xiao0916/lm-skills --skill psd-layer-reader

安装后在 Claude Code 中输入/psd-layer-reader确认已加载。

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

USER_GUIDE.md

references/

PSD_TOOLS_TEXT_EXTRACTION_EXAMPLES.md

scripts/

__init__.py

layer_parser.py

psd_layers.py

text_extractor.py

tree_filter.py

utils.py

validate_json.py

来自项目 README

将 PSD 图层树导出为 JSON，可按图层名过滤，仅返回匹配分支。此技能特别适用于将设计稿转化为代码的前期调研阶段，能够快速定位图层、获取坐标和样式。

py -3 -m pip install psd-tools

py -3 -X utf8 scripts/psd_layers.py "path/to/file.psd" --output "psd_layers.json"

py -3 -X utf8 scripts/psd_layers.py "path/to/file.psd" --name "rule-modal" --output "rule_modal.json"

py -3 -X utf8 scripts/psd_layers.py "path/to/file.psd" --name "modal" --match contains --output "modal.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 参数，否则处理中文图层名可能会报错。

支持 Markdown