# Zeplin Page From Design

> 基于 Zeplin 设计稿分步新建页面或组件：人工准备切图与 icon、用截图驱动首版布局、再用 Zeplin MCP 核对样式与标注。Use when the user mentions Zeplin, 设计稿还原, 新建页面, 新建组件, 切图, Zeplin MCP, get_screen, 样式核对, or screenshot-based UI implementation.

- Skill: `darknessomi/zeplin-page-from-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add darknessomi/zeplin-page-from-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/darknessomi/zeplin-page-from-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: darknessomi (https://skillmd.com/u/darknessomi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/darknessomi/zeplin-page-from-design

---

# Zeplin 驱动的新页面 / 组件（分步流程）

本 Skill 约定 **人工准备素材 → 截图驱动实现 → MCP 核对样式** 的顺序，避免一上来就盲写或与设计漂移。

## 何时使用

- 从 Zeplin 落地新页面或新组件
- 用户已提供或即将提供 **截图** 作为布局参考
- 需要与 Zeplin 上的 **尺寸、颜色、间距** 对齐验收

## 与当前工程对齐

- **目录与文件结构**：页面、组件、静态资源路径 **以当前仓库约定为准**（如 `.cursor/rules`、既有目录、框架脚手架习惯），本 Skill **不**假定某一固定技术栈。
- **Zeplin 与代码尺寸**：若设计按 2x 交付，**标注数值通常需除以 2** 再写入样式；若仓库另有换算规则，**以仓库为准**。
- **样式单位**：使用当前项目规范（如 `px`、`rem`、`rpx` 等），不在这里强行规定。

---

## 步骤 1：人工准备图片素材、切片、icon

**目标**：代码里引用的静态资源已就绪，路径与命名可预期。

1. 在设计稿中确认需导出的 **位图 / icon / 切图**（含 `@2x` / `@3x` 若设计有约定）。
2. 从 Zeplin **手动导出**到项目约定目录（例如 `src/assets/`、`public/` 或页面私有目录），保证 **文件名稳定、语义清晰**，避免实现中途改路径。
3. **缺素材时**：一律回到 Zeplin **手动导出补齐**，**不要**使用 MCP 拉取图层资源（当前 MCP 素材能力不稳定，已弃用）。

**完成标准**：模板 / 组件中图片与背景资源 **路径有效、可加载**，无占位死链。

---

## 步骤 2：人工上传截图，用截图创建页面 / 组件

**目标**：以 **用户提供的界面截图** 为第一视觉参考，搭出结构、层级与大致样式。

1. 请用户提供 **整页或关键区域的清晰截图**（含状态栏 / 导航若需要对齐）。
2. Agent 根据截图：
   - 搭建 **结构**（容器、列表、按钮区等），优先复用项目已有组件与样式变量；
   - 将步骤 1 中的 **图片 / icon** 摆到对应位置；
   - **不**在仅凭截图时强行猜测未展示的状态；不确定处标注 TODO 或向用户确认。
3. 将 Zeplin 常见 **2x 标注 ÷ 2** 记在心里；若截图与后续 Zeplin 数据冲突，以 **步骤 3 MCP 数据** 为准修正。

**完成标准**：界面可运行、主要区块与截图 **布局层级一致**，明显缺失的交互或空状态已标记或已问清。

---

## 步骤 3：使用 Zeplin MCP 核对样式

**目标**：用 Zeplin 结构化数据 **逐项对齐** 间距、字号、颜色、圆角等，修正步骤 2 的估算误差。

调用 MCP 前：在 Cursor 中查看 **user-zeplin** 各工具的 JSON 描述（参数必填项），再调用。

| 工具 | 用途 |
|------|------|
| `get_screen` | 传入 Zeplin **屏幕** URL，取图层、位置、样式、标注；可用 `targetLayerName` 缩小范围；`includeVariants` 控制是否拉全部分支状态。 |
| `get_component` | 传入 Zeplin **组件** URL，取组件规格、变体、图层。 |
| `get_design_tokens` | 传入 project 或 styleguide 的 `resourceId`，拉取 design tokens（颜色、字号体系等），用于与设计系统对齐。 |

**说明**：`download_layer_asset` 等 MCP 拉取切图能力当前不可靠，**不用于本流程**；素材仅以步骤 1 人工导出为准。

**核对清单（建议逐项打勾）**：

- 主要容器的 **padding / margin** 与图层坐标一致（注意 Zeplin 2x → 代码 **÷ 2**，或与仓库换算规则一致）。
- **字体大小、行高、字重** 与文本图层一致。
- **色值**（背景、边框、文字）与标注或 tokens 一致。
- **圆角、描边宽度** 未遗漏。
- 多状态（空、加载、错误）若设计稿有 variant，用 `get_screen` 的 variants 对照。

**完成标准**：关键屏幕与组件在像素级上与 Zeplin 一致或可接受偏差已记录；无已知硬错误（如错色、错位一整档）。

---

## 协作提示

- **顺序不要颠倒**：先保证素材与截图版可用，再用 MCP 精修，避免重复返工。
- **token 消耗**：`get_screen` 带全量 variants 时上下文较大；仅需当前屏时可设 `includeVariants: false`。
- 若用户未提供 Zeplin 链接，步骤 3 无法进行；应请其补充 **屏幕或组件的 Zeplin URL**。