打通 Figma 原型与前端代码自动同步
效果直接看下面的图片
截图里能看到整个链路：
左上角是 Figma 设计稿，左侧终端里 Claude Code 在自动识别图片素材
中间是tinypng压缩 + 上传 COS 的过程
右上角 COS 控制台里文件已经上传成成功，右下角是小程序里的最终效果
Skill 是个什么东西
简单说，Skill 就是一个文件夹，放在 .codex/skills/ 下面，里面告诉 Codex 怎么完成某个特定任务。
Codex 本身能读代码、写代码、跑命令，但它不知道你们项目的图片要传到哪个 COS Bucket，不知道 PNG 要先压缩，不知道上传路径的前缀规则。这些"项目私货"，你得自己教它。Skill 就是干这个的。
目录结构长这样：
代码块
Bash
.claude/skills/image-auto-upload/
├── SKILL.md # 给 Claude 看的操作手册
├── README.md # 给人看的使用文档
├── resources/ # 放待上传的图片
│ └── README.md
└── scripts/ # 执行脚本
├── upload_images.cjs # Node.js 上传脚本
└── compress_png.py # Python 压缩脚本
最核心的是 SKILL.md。Codex 读这个文件来理解：什么时候该用这个技能、具体怎么操作、调什么脚本、结果怎么展示。
SKILL.md 怎么写
触发场景
代码块
Markdown
两种触发方式。一种是实现 Figma 设计稿时 Claude 自己发现有图片，会先问你要不要上传；另一种是你直接说"上传图片"，它立刻执行。
我一开始只写了第二种，后来发现配合 Figma Agent 用的时候，Claude 不知道该主动处理图片，还得我手动提醒。加上第一种之后就顺畅了。
处理流程
代码块
Objective-C
几个设计上的考虑：
•
PNG 先过 TinyPNG API 压缩再传，JPG/WebP 直接传。PNG 压缩率一般在 60%-80%，省的流量还是挺可观的
•
.DS_Store 之类的杂文件自动跳过，不用手动清理
•
传完自动删源文件。一开始我没加这个，resources 目录越来越大，后来加了自动清理
输出格式
代码块
Markdown
| 图片名称 | CDN URL |
两个脚本，一个压缩一个传
PNG 压缩（compress_png.py）
代码块
Python
import tinify
def compress_image(input_path, output_path=None):
tinify.key = TINYPNG_API_KEY # 从 .env.skills 读取
input_size = input_file.stat().st_size
source = tinify.from_file(str(input_file))
source.to_file(str(output_path)) # 压缩后覆盖原文件
逻辑很直白：读文件、调 TinyPNG API、写回去覆盖原文件。TinyPNG 免费额度每月 500 次，个人项目完全够用。
COS 上传（upload_images.cjs）
代码块
JavaScript
const COS = require('cos-nodejs-sdk-v5');
// 上传单个文件（分片上传）
function uploadFile(filePath, key) {
// 1. 初始化分片上传
cos.multipartInit({ Bucket, Region, Key }, (err, data) => {
// 2. 上传分片
cos.multipartUpload({ ... Body: fs.createReadStream(filePath) }, () => {
// 3. 完成上传
用了 COS SDK 的分片上传，支持递归子目录。上传成功删源文件，失败的留着方便重试。
密钥放哪
COS 密钥和 TinyPNG API Key 放在项目根目录的 .env.skills 里：
代码块
Bash
这个文件不进 Git，密钥不会泄露。
配合 Figma 用
我项目里还有个 figma-designer Agent，配置里写了一条：
代码块
Markdown
markdown
代码解读
所以流程是这样的：
我在 Figma 里选中要实现的页面
在 Claude Code 里说"根据 Figma 设计稿实现这个页面"
Claude 通过 Figma MCP 读设计稿，识别出图片素材
自动导出图片 → 压缩 PNG → 传 COS → 拿到 CDN URL
用 URL 替换代码里的图片引用，生成 Vue 组件
我只管最后看一眼代码对不对。中间图片那一堆事，完全不用管。
说实话第一次跑通的时候还挺意外的，没想到几个工具串起来能这么顺。
手动传几张图
有时候设计师单独丢几张图过来，不走 Figma 流程：
代码块
SCSS
批量传一整套图
比如一次性传一套图标：
代码块
Plain Text
resources/
├── icons/
│ ├── home.png
│ ├── cart.png
│ └── user.png
└── backgrounds/
├── login-bg.jpg
└── main-bg.jpg
上传后目录结构原样保留：
代码块
Bash
applet/icons/home.png
applet/icons/cart.png
applet/icons/user.png
applet/backgrounds/login-bg.jpg
applet/backgrounds/main-bg.jpg
这个我踩过坑。一开始上传脚本不支持子目录，所有文件都平铺到根路径下，文件名一冲突就覆盖了。后来加了递归目录支持才解决。
想自己搞一个？照着来
建目录
代码块
Bash
装依赖
代码块
Bash
# PNG 压缩
pip install tinify
# COS 上传
npm install cos-nodejs-sdk-v5
配环境变量
项目根目录建 .env.skills：
代码块
Bash
COS_BUCKET=your-bucket-name
写 SKILL.md
这步最花时间，也最值得花时间。几个经验：
触发场景写清楚，不然 Claude 不知道什么时候该用
流程用流程图或步骤列表，别写大段文字
命令给完整的，能直接复制执行的那种
定义好输出格式，不然每次返回的结果格式都不一样
我第一版 SKILL.md 写得太简略，Claude 经常漏步骤。后来补了流程图和具体命令，就稳定多了。
加 .gitignore
代码块
Bash
echo ".env.skills" >> .gitignore