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)。
Related skills
More from xiao0916/lm-skills
psd-slicer
将 Photoshop(.psd)文件的所有图层导出为独立的 PNG 图片。适用于从 PSD 文件提取图层图片、为网页开发生成切片、或为其他工具准备图层资源。自动处理图层命名、跳过不可见图层、递归导出嵌套图层组。
46psd-layer-reader
读取并导出 Photoshop(.psd)图层树为 JSON,包含图层元信息(名称、类型、可见性、bbox)以及详细的文本样式信息。当用户需要分析 PSD 结构、查找特定图层(如弹窗、按钮)、或准备 HTML/CSS 还原所需的数据时,务必使用此技能。即使涉及复杂的嵌套结构或需要精确的文本还原(字体、颜色、间距),此工具也能提供结构化的支撑。
36psd-json-preview
从 PSD 导出的 JSON 图层树和切片图片生成 HTML/CSS 预览。默认保留 PSD 的分组嵌套结构,用 --flatten 参数可切换为平铺模式。
6venv-manager
自动管理 Python 虚拟环境。当其他技能需要隔离的 Python 环境时,本技能帮助 AI 创建、激活和管理虚拟环境,确保依赖不冲突。
3ocr-recognition
|
3psd-to-cocos
|
3