# Zeplin To Prompt

> Export one or more Zeplin screen URLs into a structured layer tree with local assets and package the result as a zip file. Use when a user shares an app.zeplin.io screen link and wants a prompt-ready export for AI-driven UI implementation.

- Skill: `dvcrn/zeplin-to-prompt` (Agent Skill, multi-file: 20 files)
- Install (CLI): `npx skillmds@latest add dvcrn/zeplin-to-prompt`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dvcrn/zeplin-to-prompt/raw
- Safety review: pending (external: skill-scanner PASS, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: dvcrn (https://skillmd.com/u/dvcrn)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/dvcrn/zeplin-to-prompt

---


# Zeplin Export Skill

Export Zeplin designs into a structured layer tree plus local assets, then package the result as a zip file. Multiple screen links are supported.

## Execution Flow

### Step 1: Extract URLs and build the screen task list

Run the following Bash command to extract all Zeplin URLs from the user message:

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

If the output is empty, reply with:

```text
Please provide one or more Zeplin Screen links, for example:
/zeplin-to-prompt https://app.zeplin.io/project/xxx/screen/aaa
https://app.zeplin.io/project/xxx/screen/bbb
```

Then stop.

For each extracted URL, use the regex `/\/project\/([^\/]+)\/screen\/([^\/?#]+)/` to extract `projectId` and `screenId`:

- If it matches a screen URL, add it to the task list: `[{url, projectId, screenId}, ...]`
- If it does not include `/screen/` and is only a project URL, ask the user to provide a screen URL instead and skip that URL

### Step 2: Look up a token for each project

Tokens are stored in `~/.zeplin-skill-config.json` as a `projectId -> token` mapping:

```json
{
  "projects": {
    "<project-id-1>": "eyJhbG...",
    "<project-id-2>": "eyJhbG..."
  }
}
```

For each distinct `projectId` in the task list, run:

```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="<projectId>" 2>/dev/null
```

- Exit code `0`: use that token for all screens under the project
- Exit code `1`: reply with

```text
No access token was found for project {projectId_masked}.

Please provide a Zeplin Personal Access Token for this project:
1. Open Zeplin -> avatar menu -> Profile Settings
2. Open Personal access tokens -> Create new token
3. Copy the token and send it back
```

After receiving the token, save it with:

```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="<projectId>" TOKEN="<user-provided-token>"
```

Then continue exporting.

### Step 3: Export each screen

For each screen task, run:

```bash
ZEPLIN_TOKEN="<token for this projectId>" \
node "${CLAUDE_SKILL_DIR}/export_screen.mjs" \
  "<url>" \
  --no-open \
  --quiet
```

- Capture the `workdir` from stdout, in the form `-> workdir: /path/to/xxx`
- On success, add that workdir to the result list
- On failure, record the reason and continue with the next screen

### Step 4: Create a zip package

For a single screen:

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

For multiple screens:

```bash
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" <dir1> <dir2> ... -x "*.DS_Store" -q
```

### Step 5: Reply to the user

```text
Export completed (N screens)

File: <ZIP_PATH>
Export summary:
  OK ScreenName1
  OK ScreenName2
  FAILED ScreenName3: <reason>

How to use:
1. Download and unzip the package
2. Open the generated layers_tree.html in a browser
3. Double-click or right-click layers to copy node JSON for AI usage
```

## Notes

- Match each screen to a token that has access to its project
- Never print tokens in the conversation
- When exporting multiple screens, keep the user updated with progress such as `Exporting screen X/N...`