psd-component-splitter
Installation
SKILL.md
PSD 组件拆分器
将 PSD 图层结构按第一级分组拆分为多个独立组件文件,支持 React (JSX + CSS Modules) 和 Vue (SFC)。
快速开始
React
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/
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-to-preview
从 PSD 设计文件到预览页面 + React 组件 + Vue 组件的完整转换工作流。
12psd-json-preview
从 PSD 导出的 JSON 图层树和切片图片生成 HTML/CSS 预览。默认保留 PSD 的分组嵌套结构,用 --flatten 参数可切换为平铺模式。
6venv-manager
自动管理 Python 虚拟环境。当其他技能需要隔离的 Python 环境时,本技能帮助 AI 创建、激活和管理虚拟环境,确保依赖不冲突。
3ocr-recognition
|
3