基于 Figma、Sketch、MasterGo、Pixso、墨刀或摹客的设计上下文实现页面或组件,强调复用、设计 Token 映射以及面向生产的前端实现方式,并将实现计划保存为 Markdown 文件。当用户提供设计稿链接、设计选区、截图或要求按设计稿实现组件/页面时自动激活。
在以下场景使用该 Skill:
| 工具 | MCP 集成 | 获取设计数据方式 |
|---|---|---|
| Figma | figma / figma-desktop | API 获取设计结构、变量定义 |
| Sketch | sketch | MCP 获取设计选区截图 |
| MasterGo | mastergo | API 获取 DSL 结构数据 |
| Pixso | pixso | 本地 MCP 获取帧数据和代码 |
| 墨刀 | modao | MCP 获取原型数据、生成设计描述 |
| 摹客 | 无 MCP | 通过用户提供的截图、标注或导出的 CSS 获取 |
figma — Figma API 集成figma-desktop — Figma 桌面端集成mastergo — MasterGo DSL 数据pixso — Pixso 本地 MCPmodao — 墨刀原型数据sketch — Sketch 选区截图# 设计实现计划
> 生成时间: YYYY-MM-DD HH:mm
> 评审工具: frontend-craft
> 设计工具: Figma / Sketch / MasterGo / Pixso / 墨刀 / 摹客
## 实现概要
- 设计稿来源: ...
- 目标页面/组件: ...
## 复用的组件
- ...
## 新建的组件
- ...
## 组件拆分方案
- ...
## 状态/数据流
- ...
## 与设计稿的偏差
- ...
## 缺失的资源 / Token / 交互细节
- ...
## 变更文件清单
- ...
实现计划确定后,必须将计划内容使用 Write 工具保存为 Markdown 文件:
reports/(如不存在则创建)design-plan-YYYY-MM-DD-HHmmss.md(使用当前时间戳)