Zeplin 导出技能

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

执行流程

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

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

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

若输出为空，请回复：

请提供一个或多个 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}, ...]
• 若 URL 不含 /screen/，仅为项目级 URL，请提示用户改提供屏幕 URL，并跳过该 URL

步骤 2：为每个项目查找对应 token

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

{
  "projects": {
    "": "eyJhbG...",
    "": "eyJhbG..."
  }
}

对任务列表中每个不同的 projectId，执行以下命令：

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：对该项目下的所有屏幕复用该 token
• 退出码为 1：回复如下内容

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

请为此项目提供 Zeplin Personal Access Token：
1. 打开 Zeplin → 头像菜单 → Profile Settings
2. 进入 Personal access tokens → Create new token
3. 复制生成的 token 并发送回来

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

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：逐个导出屏幕

对每个屏幕任务，运行：

ZEPLIN_TOKEN="" 
node "${CLAUDE_SKILL_DIR}/export_screen.mjs" 
  "" 
  --no-open 
  --quiet

• 从 stdout 中捕获 workdir（格式为 -> workdir: /path/to/xxx）
• 导出成功时，将该 workdir 加入结果列表
• 导出失败时，记录失败原因，并继续处理下一个屏幕

步骤 4：创建 zip 包

单个屏幕时：

EXPORT_DIR=""
EXPORT_DIR="${EXPORT_DIR%/}"
ZIP_PATH="${EXPORT_DIR}.zip"
cd "$(dirname "$EXPORT_DIR")" && zip -r "$ZIP_PATH" "$(basename "$EXPORT_DIR")" -x "*.DS_Store" -q

多个屏幕时：

TIMESTAMP=$(date +%Y%m%d_%H%M%S)
ZIP_PATH="${CLAUDE_SKILL_DIR}/build/export_${TIMESTAMP}.zip"
cd "${CLAUDE_SKILL_DIR}/build"
zip -r "$ZIP_PATH"   ... -x "*.DS_Store" -q

步骤 5：向用户回复结果

导出完成（共 N 个屏幕）

文件：
导出摘要：
  OK ScreenName1
  OK ScreenName2
  FAILED ScreenName3: 

使用方法：
1. 下载并解压该压缩包
2. 在浏览器中打开生成的 layers_tree.html
3. 双击或右键点击图层节点，复制其 JSON 内容供 AI 使用

注意事项

• 确保每个屏幕都使用对其所属项目具有访问权限的 token
• 切勿在对话中打印任何 token
• 导出多个屏幕时，需实时向用户反馈进度，例如 正在导出屏幕 X/N...