psd2code skill 体验

介绍

一行命令把 PSD 转成可运行的前端项目

Skill 使用方式

命令行直接运行

# 默认 target = html（同时产出 absolute 原版 + Flex 优化版）
python3 .codebuddy/skills/psd2code/psd_to_code.py /path/to/file.psd

# 显式指定 target
python3 .codebuddy/skills/psd2code/psd_to_code.py /path/to/file.psd --target html
python3 .codebuddy/skills/psd2code/psd_to_code.py /path/to/file.psd --target react
python3 .codebuddy/skills/psd2code/psd_to_code.py /path/to/file.psd --target vue

常用参数

参数

默认

说明

--target {html,react,vue}

html

选择产物形态

--css-style {compact,expanded}

compact

优化版 CSS 输出风格：compact 接近手写、expanded 全展开 + PSD 坐标溯源注释

--no-css-pretty

关闭

关闭 CSS 美化，回到字母序机械渲染（CI 基线对比常用）

举例：

# 想要排查某个元素位置不对，开 expanded 模式看坐标溯源注释
python3 .codebuddy/skills/psd2code/psd_to_code.py 南瓜大作战.psd --css-style expanded

# 跑 React 产物 + 启动 dev server
python3 .codebuddy/skills/psd2code/psd_to_code.py 南瓜大作战.psd --target react
cd output/南瓜大作战/react
npm install && npm run dev    # http://localhost:5173

# 跑 Vue 产物
python3 .codebuddy/skills/psd2code/psd_to_code.py 南瓜大作战.psd --target vue
cd output/南瓜大作战/vue
npm install && npm run dev    # http://localhost:5173

系统依赖

Python 3.10+
psd-tools >= 1.14
Pillow >= 10
numpy
beautifulsoup4
pydantic >= 2.0
pypinyin

psd2code skill 体验
http://localhost:8090/archives/psd2code-skill-ti-yan
作者
Administrator
发布于
2025年11月01日
许可协议