Zeplin 导出技能

将 Zeplin 设计稿导出为结构化的图层树及本地资源，然后将结果打包为 zip 文件。支持多个屏幕链接。

执行流程

步骤 1：提取 URL 并构建屏幕任务列表

运行以下 Bash 命令，从用户消息中提取所有 Zeplin URL：

bash
printf %s\n $INPUT | grep -Eo https://app\.zeplin\.io/project/[^[:space:]]+ || true

如果输出为空，回复：

text
请提供一个或多个 Zeplin 屏幕链接，例如：
/zeplin-to-prompt https://app.zeplin.io/project/xxx/screen/aaa
https://app.zeplin.io/project/xxx/screen/bbb

然后停止。

对于每个提取的 URL，使用正则表达式 /\/project\/([^\/]+)\/screen\/([^\/?#]+)/ 提取 projectId 和 screenId：

• - 如果匹配屏幕 URL，将其添加到任务列表：[{url, projectId, screenId}, ...]
• 如果不包含 /screen/ 且仅为项目 URL，要求用户提供屏幕 URL 并跳过该 URL

步骤 2：查找每个项目的令牌

令牌存储在 ~/.zeplin-skill-config.json 中，格式为 projectId -> token 映射：

json
{
projects: {
: eyJhbG...,
: eyJhbG...
}
}

对于任务列表中每个不同的 projectId，运行：

bash
node -e
const fs = require(fs);
const p = process.env.HOME + /.zeplin-skill-config.json;
try {
const cfg = JSON.parse(fs.readFileSync(p, utf8));
const t = (cfg.projects || {})[process.env.PROJECT_ID];
if (t) { process.stdout.write(t); process.exit(0); }
} catch {}
process.exit(1);
PROJECT_ID= 2>/dev/null

• - 退出码 0：使用该令牌访问该项目下的所有屏幕
• 退出码 1：回复

text
未找到项目 {projectId_masked} 的访问令牌。

请提供此项目的 Zeplin 个人访问令牌：

1. 1. 打开 Zeplin -> 头像菜单 -> 个人设置
2. 打开个人访问令牌 -> 创建新令牌
3. 复制令牌并发送回来

收到令牌后，使用以下命令保存：

bash
node -e
const fs = require(fs);
const p = process.env.HOME + /.zeplin-skill-config.json;
let cfg = {};
try { cfg = JSON.parse(fs.readFileSync(p, utf8)); } catch {}
cfg.projects = cfg.projects || {};
cfg.projects[process.env.PROJECT_ID] = process.env.TOKEN;
fs.writeFileSync(p, JSON.stringify(cfg, null, 2), {mode: 0o600});
PROJECT_ID= TOKEN=

然后继续导出。

步骤 3：导出每个屏幕

对于每个屏幕任务，运行：

bash
ZEPLIN_TOKEN= \
node ${CLAUDESKILLDIR}/export_screen.mjs \
\
--no-open \
--quiet

• - 从标准输出捕获 workdir，格式为 -> workdir: /path/to/xxx
• 成功时，将该工作目录添加到结果列表
• 失败时，记录原因并继续处理下一个屏幕

步骤 4：创建 zip 包

对于单个屏幕：

bash
EXPORT_DIR=
EXPORTDIR=${EXPORTDIR%/}
ZIPPATH=${EXPORTDIR}.zip
cd $(dirname $EXPORTDIR) && zip -r $ZIPPATH $(basename $EXPORTDIR) -x *.DSStore -q

对于多个屏幕：

bash
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
ZIPPATH=${CLAUDESKILLDIR}/build/export${TIMESTAMP}.zip
cd ${CLAUDESKILLDIR}/build
zip -r $ZIPPATH ... -x *.DSStore -q

步骤 5：回复用户

text
导出完成（N 个屏幕）

文件：
导出摘要：
成功 ScreenName1
成功 ScreenName2
失败 ScreenName3：<原因>

使用方法：

1. 1. 下载并解压包
2. 在浏览器中打开生成的 layers_tree.html
3. 双击或右键单击图层以复制节点 JSON 供 AI 使用

注意事项

• - 为每个屏幕匹配具有其项目访问权限的令牌
• 切勿在对话中打印令牌
• 导出多个屏幕时，通过 正在导出屏幕 X/N... 等提示向用户更新进度