psd-to-preview: PSD 转预览和 React 组件
AI 执行指令（置顶）
当用户请求使用此技能时，必须按以下步骤实际执行命令。
AI 执行规则：
- 默认：
psd-slicer现已默认支持导出所有的图层（包含中文字符和非常规字符），并且会自动在 PSD 目录下寻找layer-tree.json等映射文件。 - 规范化：如果设计稿的层级命名很乱，想要标准化图层名字，可以在调用
psd-slicer时直接加上--auto-rename参数将资源转为layer-xxx格式。如果想要强制图层名字只能是标准的英文+横杠，可以使用--strict-naming过滤掉不规范命名的层。 - 输出文案：如果用户要求“输出真实文本”或“文案转代码”，必须在步骤 2 使用
--skip-type，并在步骤 3 使用--include-text
技能依赖（必备条件）
此技能作为工作流入口，高度依赖以下三个核心技能。在执行前请确保它们在指定路径存在：
psd-layer-reader: 负责解析 PSD 结构生成 JSON 树。psd-slicer: 负责导出图层切片图片。psd-json-preview: 负责将 JSON 和图片合成为终端代码（HTML/React/Vue）。
依赖预检查（AI 执行前必须执行）
AI 在执行工作流前，必须先检查依赖是否已安装：
# 检查 psd-tools
py -3 -c "import psd_tools" 2>&1
# 如果返回 ImportError，表示未安装
# 检查 scikit-image
py -3 -c "import skimage" 2>&1如果缺少依赖，AI 必须询问用户：
"检测到缺少以下依赖，是否安装？ -psd-tools（必需） -scikit-image（必需） 输入 '是' 确认安装，或 '否' 跳过（部分图层可能无法导出）"
用户确认后，AI 执行安装：
# 安装必需依赖
py -3 -m pip install psd-tools
# 安装可选依赖（如果用户同意）
py -3 -m pip install scikit-image版本检查（可选）：
# 检查已安装的版本
py -3 -c "import psd_tools; print('psd-tools:', psd_tools.__version__)"
py -3 -c "import skimage; print('scikit-image:', skimage.__version__)"注意事项:
- 如果用户选择不安装
psd-tools，无法继续执行工作流 - 如果用户选择不安装
scikit-image，可以执行但部分带图层效果的元素会被跳过 - 安装完成后，建议重新检查依赖是否安装成功
执行命令
# 步骤 1：图层解析
py -3 .claude/skills/psd-layer-reader/scripts/psd_layers.py \
<PSD文件路径> --output <输出目录>/layer-tree.json
# 步骤 2：图层切片
py -3 .claude/skills/psd-slicer/scripts/export_slices.py \
--psd <PSD文件路径> --output <输出目录>/sliced-images
# 注：psd-slicer 现默认允许各种图层导出并在工作目录自动查找映射 JSON。若用户需转命名规范化图形文件，可添加 --auto-rename。
# 步骤 3：代码生成
py -3 .claude/skills/psd-json-preview/scripts/generate_preview.py \
--json <输出目录>/layer-tree.json --images <输出目录>/sliced-images \
--out <输出目录> --generate-react --generate-vue \
--component-name PsdComponent --preserve-names
---
### 高级方案：输出真实文本（保留文案可编辑性）
如果用户提到“要输出文案”、“文字转代码”或“文字不要切图”，请使用以下组合命令：
步骤 2：图层切片（跳过文本图层，避免生成文字图片）
py -3 .claude/skills/psd-slicer/scripts/export_slices.py \ --psd <PSD文件路径> --output <输出目录>/sliced-images --skip-type
步骤 3：代码生成（开启文本渲染，将文字转为 HTML/CSS）
py -3 .claude/skills/psd-json-preview/scripts/generate_preview.py \ --json <输出目录>/layer-tree.json --images <输出目录>/sliced-images \ --out <输出目录> --generate-react --generate-vue --include-text
关键提醒：
- ✅ 使用
py -3（Windows）或python3（Linux/Mac）
执行检查清单
- [ ]
<输出目录>/layer-tree.json有数据 - [ ]
<输出目录>/sliced-images/有 PNG 文件 - [ ]
<输出目录>/preview/有 HTML 文件 - [ ]
<输出目录>/react-component/有 JSX 和 CSS 文件 - [ ]
<输出目录>/vue-component/有 Vue 文件
工作原理
PSD → psd-layer-reader → layer-tree.json → psd-slicer → sliced-images/ → psd-json-preview → preview/ + react-component/ + vue-component/
快速参考
核心参数
| 参数 | 说明 | 示例 |
|---|---|---|
<PSD路径> | PSD 文件路径 | assets/design.psd |
--output | 输出目录 | output/design-preview |
常见问题
Q: 某些图层没有被导出？ A: 大部分通常是因为图层不可见、不包含内容或者完全透明。如果使用了 --strict-naming 参数，则不合规命名（中文等）也会被跳过。
Q: 导出的图层名字是乱的/中文的？ A: psd-slicer 会默认使用 PSD 中的原始名称进行导出。你可以在生成切片时加入 --auto-rename 将它们转化为通用的标准命名，或者确保 psd-layer-reader 已执行并在它的工作目录下自然匹配映射结构。
输出目录结构
output/ ├── layer-tree.json # 图层数据 ├── sliced-images/ # PNG切片 ├── preview/ # HTML 预览 │ ├── index.html │ ├── styles.css │ └── images/ ├── react-component/ # React组件 │ ├── index.jsx │ ├── index.module.css │ └── images/ └── vue-component/ # Vue组件 ├── index.vue └── images/
故障排查
| 错误 | 原因 | 解决方案 |
|---|---|---|
| PSD 未找到 | 路径错误 | 检查文件路径 |
| 权限错误 | 无写入权限 | 检查目录权限 |
| 预览加载失败 | 路径错误 | 确保目录结构完整 |
| JSON 解析错误 | 文件损坏 | 重新运行工作流 |
依赖说明
必需依赖
psd-tools: PSD 文件解析核心库
可选依赖
scikit-image: 用于导出包含图层效果的元素（如阴影、发光、渐变等）
手动安装命令
如果预检查阶段的自动安装失败，可手动执行：
# 安装依赖
py -3 -m pip install psd-tools
py -3 -m pip install scikit-image注意：虽然 SKILL.md 中包含安装命令，但 AI 执行时不会自动运行。请参考"依赖预检查"小节，让 AI 在执行工作流前检查并安装依赖。
版本: 1.6 | 更新: 2026年3月12日