psd-to-preview
Installation
SKILL.md
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)。