메뉴
将 Photoshop (PSD) 设计稿转换为 Cocos Creator 布局参考。 自动导出 PNG 切片并生成坐标 JSON，支持中文图层名。 触发条件：当用户提到以下关键词时激活本技能： - "PSD 转 Cocos"、"导出 PSD 到 Cocos"、"PSD 切图 Cocos" - "设计稿导入 Cocos"、"PSD 生成 Cocos 布局" - "Photoshop 转 Cocos"、"PSD 导出坐标"
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
将 Photoshop（.psd）文件的所有图层导出为独立的 PNG 图片。适用于从 PSD 文件提取图层图片、为网页开发生成切片、或为其他工具准备图层资源。自动处理图层命名、跳过不可见图层、递归导出嵌套图层组。
从 PSD 导出的 JSON 图层树和切片图片生成 HTML/CSS 预览。默认保留 PSD 的分组嵌套结构，用 --flatten 参数可切换为平铺模式。
读取并导出 Photoshop（.psd）图层树为 JSON，包含图层元信息（名称、类型、可见性、bbox）以及详细的文本样式信息。当用户需要分析 PSD 结构、查找特定图层（如弹窗、按钮）、或准备 HTML/CSS 还原所需的数据时，务必使用此技能。即使涉及复杂的嵌套结构或需要精确的文本还原（字体、颜色、间距），此工具也能提供结构化的支撑。
从 PSD 设计文件到预览页面 + React 组件 + Vue 组件的完整转换工作流。
项目结构分析技能。用于快速理解陌生前端/全栈项目的技术栈、目录结构和模块依赖关系。通过分层阅读工作流，从框架检测到依赖分析，逐步深入理解项目架构。适用于需要接手新项目、分析代码库、或进行技术调研的场景。
总结 OpenCode 会话内容，提取可复用的经验和方法论。当用户要求"总结本次会话"、"提取经验"、"复盘"、"提取可复用的方法"或类似需求时触发此技能。
| name | psd-to-cocos |
| description | 将 Photoshop (PSD) 设计稿转换为 Cocos Creator 布局参考。 自动导出 PNG 切片并生成坐标 JSON，支持中文图层名。 触发条件：当用户提到以下关键词时激活本技能： - "PSD 转 Cocos"、"导出 PSD 到 Cocos"、"PSD 切图 Cocos" - "设计稿导入 Cocos"、"PSD 生成 Cocos 布局" - "Photoshop 转 Cocos"、"PSD 导出坐标" |
将 Photoshop 设计稿一键转换为 Cocos Creator 可用的布局参考。
PSD 文件
↓
psd-layer-reader (已有技能) → psd_layers.json (图层结构)
↓
psd-slicer (已有技能) → images/*.png (PNG 切片)
↓
psd-to-cocos (本技能) → cocos_layout.json (Cocos 坐标)
当用户需要转换 PSD 时：
python .claude/skills/psd-to-cocos/scripts/psd_to_cocos.py <psd_file> -o <output_dir>
# 基础用法
python scripts/psd_to_cocos.py design.psd
# 指定输出目录
python scripts/psd_to_cocos.py design.psd -o ./assets/ui/
# 详细输出
python scripts/psd_to_cocos.py design.psd -v
支持批量处理、中文文件名转拼音、冲突策略、失败重试等增强功能。
# 单个文件转换
python scripts/run_cli.py convert design.psd
# 指定输出目录
python scripts/run_cli.py convert design.psd -o ./output/
# 批量处理目录（交互式选择）
python scripts/run_cli.py convert psd-folder/
# 批量处理目录（全部转换）
python scripts/run_cli.py convert psd-folder/ --all
# 递归扫描子目录
python scripts/run_cli.py convert psd-folder/ --recursive
# 指定冲突策略（覆盖/跳过/重命名/询问）
python scripts/run_cli.py convert design.psd --conflict=skip
# 重试之前失败的文件
python scripts/run_cli.py convert psd-folder/ --retry
# 详细输出
python scripts/run_cli.py convert design.psd --verbose
首页.psd → shouye/）overwrite（覆盖）、skip（跳过）、rename（重命名）、ask（询问）--retry 参数重试psd-layer-reader - 导出 PSD 图层结构psd-slicer - 导出 PNG 切片pip install psd-tools Pillow
output/
├── psd_layers.json # 图层树（psd-layer-reader 生成）
├── images/ # PNG 切片（psd-slicer 生成）
│ ├── btn_login.png
│ └── ...
└── cocos_layout.json # Cocos 布局参考（本技能生成）
{
"metadata": {
"version": "1.0.0",
"psd_file": "design.psd",
"canvas_size": [1920, 1080],
"export_time": "2026-02-15T10:30:00",
"element_count": 25
},
"elements": [
{
"id": "btn_login",
"name": "btn_login",
"original_name": "按钮_登录",
"type": "sprite",
"visible": true,
"psd_bbox": [100, 200, 300, 260],
"cocos_position": { "x": 200.0, "y": 850.0 },
"cocos_size": { "width": 200, "height": 60 },
"cocos_anchor": { "x": 0.5, "y": 0.5 },
"image_file": "images/btn_login.png"
}
]
}
PSD 和 Cocos 使用不同的坐标系：
| 属性 | PSD | Cocos |
|---|---|---|
| 原点 | 左上角 | 左下角 |
| Y 轴方向 | 向下 | 向上 |
| 锚点 | 无 | 中心 (0.5, 0.5) |
转换公式：
# PSD bbox [x1, y1, x2, y2] → Cocos position
width = x2 - x1
height = y2 - y1
x = x1 + width / 2
y = (canvas_height - y2) + height / 2
CLI 入口，协调完整转换流程。
坐标转换模块，提供 bbox_to_cocos_position() 函数。
JSON 生成器，将 psd-layers.json 转换为 cocos_layout.json。
images/ 文件夹复制到 Cocos 项目的 assets/ 目录cocos_layout.json 查看每个元素的坐标cocos_position 设置节点位置image_file 关联对应的图片资源本技能提供 Cocos 编辑器扩展，可一键自动导入：
将 assets/PSDImporter.ts 复制到你的 Cocos 项目：
cp .claude/skills/psd-to-cocos/assets/PSDImporter.ts \
<your-cocos-project>/assets/scripts/editor/
确保资源目录结构如下：
assets/
├── psd-output/ # Python 技能生成的输出
│ ├── images/ # PNG 切片
│ │ ├── btn_login.png
│ │ └── ...
│ └── cocos_layout.json # 布局数据
└── scripts/
└── editor/
└── PSDImporter.ts # 编辑器扩展
cocos_layout.json 文件psd-output/images）扩展会自动：
注意：图片资源需要在 Cocos 中先导入（拖入 assets 目录），扩展才能正确引用。
psd-layer-reader 的映射功能处理.prefab 或 .scene 文件，仅生成参考 JSONpip install psd-tools
确保 psd-layer-reader 技能已安装在 .claude/skills/ 目录。
检查 PSD 文件是否包含有效的根图层边界框。