zeplin-page-from-design

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

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。