psd-to-preview

Installation
SKILL.md

psd-to-preview: PSD 转预览和 React 组件

AI 执行指令(置顶)

当用户请求使用此技能时,必须按以下步骤实际执行命令。

AI 执行规则

  1. 默认psd-slicer 现已默认支持导出所有的图层(包含中文字符和非常规字符),并且会自动在 PSD 目录下寻找 layer-tree.json 等映射文件。
  2. 规范化:如果设计稿的层级命名很乱,想要标准化图层名字,可以在调用 psd-slicer 时直接加上 --auto-rename 参数将资源转为 layer-xxx 格式。如果想要强制图层名字只能是标准的英文+横杠,可以使用 --strict-naming 过滤掉不规范命名的层。
  3. 输出文案:如果用户要求“输出真实文本”或“文案转代码”,必须在步骤 2 使用 --skip-type,并在步骤 3 使用 --include-text

技能依赖(必备条件)

此技能作为工作流入口,高度依赖以下三个核心技能。在执行前请确保它们在指定路径存在:

  • psd-layer-reader: 负责解析 PSD 结构生成 JSON 树。
  • psd-slicer: 负责导出图层切片图片。
  • psd-json-preview: 负责将 JSON 和图片合成为终端代码(HTML/React/Vue)。
Related skills
Installs
12
First Seen
Mar 12, 2026