Menu
将 PSD 设计稿按第一级分组拆分为独立的 React 或 Vue 组件。适用于从 PSD 设计稿生成组件化前端代码，支持自动生成 JSX/CSS Modules 或 Vue SFC 文件。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
将 Photoshop（.psd）文件的所有图层导出为独立的 PNG 图片。适用于从 PSD 文件提取图层图片、为网页开发生成切片、或为其他工具准备图层资源。自动处理图层命名、跳过不可见图层、递归导出嵌套图层组。
将 Photoshop (PSD) 设计稿转换为 Cocos Creator 布局参考。 自动导出 PNG 切片并生成坐标 JSON，支持中文图层名。 触发条件：当用户提到以下关键词时激活本技能： - "PSD 转 Cocos"、"导出 PSD 到 Cocos"、"PSD 切图 Cocos" - "设计稿导入 Cocos"、"PSD 生成 Cocos 布局" - "Photoshop 转 Cocos"、"PSD 导出坐标"
从 PSD 导出的 JSON 图层树和切片图片生成 HTML/CSS 预览。默认保留 PSD 的分组嵌套结构，用 --flatten 参数可切换为平铺模式。
读取并导出 Photoshop（.psd）图层树为 JSON，包含图层元信息（名称、类型、可见性、bbox）以及详细的文本样式信息。当用户需要分析 PSD 结构、查找特定图层（如弹窗、按钮）、或准备 HTML/CSS 还原所需的数据时，务必使用此技能。即使涉及复杂的嵌套结构或需要精确的文本还原（字体、颜色、间距），此工具也能提供结构化的支撑。
从 PSD 设计文件到预览页面 + React 组件 + Vue 组件的完整转换工作流。
项目结构分析技能。用于快速理解陌生前端/全栈项目的技术栈、目录结构和模块依赖关系。通过分层阅读工作流，从框架检测到依赖分析，逐步深入理解项目架构。适用于需要接手新项目、分析代码库、或进行技术调研的场景。
| name | psd-component-splitter |
| description | 将 PSD 设计稿按第一级分组拆分为独立的 React 或 Vue 组件。适用于从 PSD 设计稿生成组件化前端代码，支持自动生成 JSX/CSS Modules 或 Vue SFC 文件。 |
将 PSD 图层结构按第一级分组拆分为多个独立组件文件，支持 React (JSX + CSS Modules) 和 Vue (SFC)。
py -3 .claude/skills/psd-component-splitter/scripts/split_components.py \
--json layer-tree.json \
--images sliced-images/ \
--out output/ \
--framework react
输出目录：
output/react-split/
py -3 .claude/skills/psd-component-splitter/scripts/split_components.py \
--json layer-tree.json \
--images sliced-images/ \
--out output/ \
--framework vue
输出目录：
output/vue-split/
# 1. 导出图层切片
py -3 .claude/skills/psd-slicer/scripts/export_slices.py \
design.psd -o sliced-images/
# 2. 生成图层结构 JSON
py -3 .claude/skills/psd-layer-reader/scripts/psd_layers.py \
design.psd -o layer-tree.json
| 参数 | 必需 | 说明 |
|---|---|---|
--json | ✅ | JSON 图层树文件路径 |
--images | ✅ | 切片图片目录路径 |
--out | ✅ | 输出目录路径 |
--framework | ✅ | react 或 vue |
--component-name | ❌ | 主组件名称（默认：PsdApp） |
脚本会根据框架类型自动在输出目录下创建对应的子目录：
<out>/react-split/<out>/vue-split/output/react-split/
├── App.jsx # 主入口组件
├── App.module.css # 全局样式
├── components/ # 组件目录
│ ├── group-header/
│ │ ├── index.jsx
│ │ └── index.module.css
│ └── ...
└── images/ # 图片资源
└── ...
output/vue-split/
├── App.vue # 主入口组件
├── components/ # 组件目录
│ ├── group-header/
│ │ └── index.vue
│ └── ...
└── images/ # 图片资源
└── ...
kind: "group" 节点user-card → UserCard）images/ 目录React
className、style、onClick propsVue
原因：PSD 结构中没有 kind: "group" 的第一级节点
解决：
原因：生成器模块未找到或脚本路径错误
解决：
react_generator.py 或 vue_generator.py 是否存在原因：图片名称与图层名不匹配
解决：
--mapping-json 参数name 字段与图片文件名是否一致完整工作流、实战示例和常见问题，参见 references/WORKFLOW.md。