메뉴
基于 Zeplin 设计稿分步新建页面或组件：人工准备切图与 icon、用截图驱动首版布局、再用 Zeplin MCP 核对样式与标注。Use when the user mentions Zeplin, 设计稿还原, 新建页面, 新建组件, 切图, Zeplin MCP, get_screen, 样式核对, or screenshot-based UI implementation.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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. |
本 Skill 约定 人工准备素材 → 截图驱动实现 → MCP 核对样式 的顺序，避免一上来就盲写或与设计漂移。
.cursor/rules、既有目录、框架脚手架习惯），本 Skill 不假定某一固定技术栈。px、rem、rpx 等），不在这里强行规定。目标：代码里引用的静态资源已就绪，路径与命名可预期。
@2x / @3x 若设计有约定）。src/assets/、public/ 或页面私有目录），保证 文件名稳定、语义清晰，避免实现中途改路径。完成标准：模板 / 组件中图片与背景资源 路径有效、可加载，无占位死链。
目标：以 用户提供的界面截图 为第一视觉参考，搭出结构、层级与大致样式。
完成标准：界面可运行、主要区块与截图 布局层级一致，明显缺失的交互或空状态已标记或已问清。
目标：用 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 人工导出为准。
核对清单（建议逐项打勾）：
get_screen 的 variants 对照。完成标准：关键屏幕与组件在像素级上与 Zeplin 一致或可接受偏差已记录；无已知硬错误（如错色、错位一整档）。
get_screen 带全量 variants 时上下文较大；仅需当前屏时可设 includeVariants: false。Sync full YApi project data to the current project via token, then extract requested API documentation from local files for git-managed updates. Use when the user asks to read, fetch, sync, or get YApi API documentation, or provides YApi URLs like "https://yapi.example.com/project/{id}/interface/api/{api_id}" or "https://yapi.example.com/project/{id}/interface/api/cat_{cat_id}". Supports both single API URLs and category URLs. Supports multiple YApi projects in one repo under yapi/{project_id}/. Host is parsed from the URL automatically.
从 Figma 下载微信小程序本地图片资源，并确保导出 3x PNG。Use when implementing Figma designs, downloading Figma icons/images, replacing png assets, 设计稿还原, 下图片, 切图, Figma PNG, 3x 图片.
Generate git commit messages following Angular Conventional Commit format, written in Chinese with technical terms in English. Use when committing git changes, staging files, or when the user asks for help with commit messages.
Call Feishu document MCP tools to fetch, search, create, update Feishu docs, or manage comments. Use when the user provides Feishu wiki/doc URLs (*.feishu.cn), asks to read/create/update Feishu docs, fetch API docs from Feishu, search Feishu content, or view/add document comments.