psd-json-preview
Installation
SKILL.md
PSD JSON → HTML 预览
从 PSD 导出的 JSON 图层树和切片图片生成静态 HTML/CSS 预览。
⭐ 新特性:
- 2026-02-11:支持在生成 HTML 预览的同时生成 React 组件(JSX + CSS Modules)
快速开始
生成 HTML 预览 + React 组件
py -3 scripts/generate_preview.py \
--json /path/to/layer-tree.json \
--images /path/to/images \
--out /path/to/preview \
--generate-react \
--component-name MyComponent \
--preserve-names
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 组件的完整转换工作流。
12venv-manager
自动管理 Python 虚拟环境。当其他技能需要隔离的 Python 环境时,本技能帮助 AI 创建、激活和管理虚拟环境,确保依赖不冲突。
3ocr-recognition
|
3psd-to-cocos
|
3