| 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
目标：代码里引用的静态资源已就绪，路径与命名可预期。
- 在设计稿中确认需导出的 位图 / icon / 切图（含
@2x / @3x 若设计有约定）。
- 从 Zeplin 手动导出到项目约定目录（例如
src/assets/、public/ 或页面私有目录），保证 文件名稳定、语义清晰，避免实现中途改路径。
- 缺素材时：一律回到 Zeplin 手动导出补齐，不要使用 MCP 拉取图层资源（当前 MCP 素材能力不稳定，已弃用）。
完成标准：模板 / 组件中图片与背景资源 路径有效、可加载，无占位死链。
步骤 2：人工上传截图，用截图创建页面 / 组件
目标：以 用户提供的界面截图 为第一视觉参考，搭出结构、层级与大致样式。
- 请用户提供 整页或关键区域的清晰截图（含状态栏 / 导航若需要对齐）。
- Agent 根据截图：
- 搭建 结构（容器、列表、按钮区等），优先复用项目已有组件与样式变量；
- 将步骤 1 中的 图片 / icon 摆到对应位置；
- 不在仅凭截图时强行猜测未展示的状态；不确定处标注 TODO 或向用户确认。
- 将 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。
