Implement From Design

基于 Figma、Sketch、MasterGo、Pixso、墨刀或摹客的设计上下文实现页面或组件，强调复用、设计 Token 映射以及面向生产的前端实现方式，并将实现计划保存为 Markdown 文件。当用户提供设计稿链接、设计选区、截图或要求按设计稿实现组件/页面时自动激活。

Security Scan

该技能的目标和大部分指令与“根据设计稿实现”一致，但说明中引用需要调用 Figma/MasterGo 等 API 的工作流却没有声明任何凭据或环境需求，并且会读取/修改代码仓库，存在模糊的授权与数据访问范围，建议在允许前确认细节。

Purpose & Capability

技能声明支持从 Figma、Sketch、MasterGo、Pixso、墨刀、摹客 获取设计上下文并据此生成实现计划。这与技能名称和描述一致；然而 SKILL.md 反复提到通过 'MCP' 或 API 获取数据（例如 Figma API、MasterGo DSL），但技能元数据未声明任何需要的环境变量或凭据（比如 FIGMA_TOKEN）。这可能是因为平台本身提供这些集成，但若不是，则存在不一致：实现这些功能通常需要外部 API 权限。

Instruction Scope

SKILL.md 的运行指令聚焦于读取设计上下文、在仓库中搜索可复用组件、产出实现计划并将其写入 reports/ 目录。它还建议运行 lint 和测试。所有这些操作都在技能声明的职能范围内，但要注意技能将访问代码库文件系统、可能调用外部设计 APIs、并会写入磁盘（reports/）。SKILL.md 明确指出在缺少 MCP 时向用户索要截图并避免凭空编造视觉数据，这是可取的限制。

Install Mechanism

这是一个纯说明性技能（instruction-only），没有安装规范、没有下载或执行额外代码，风险较低。

Credentials

技能文本多次引用需要访问 Figma、MasterGo、Pixso 等工具的 API 或 MCP 连接，但技能元数据未列出任何所需环境变量或凭据。缺乏声明让人无法判断凭据需求是否被平台或其他组件隐式满足；如果平台不会自动提供这些连接，技能在运行时可能会请求敏感令牌或要求用户粘贴凭证。总体上环境/凭据请求与技能声明存在信息缺口，值得核实。

Persistence & Privilege

技能没有设置 always:true，也没有声明修改其他技能或系统范围配置的行为。写入报告文件到项目根目录的 reports/ 是合理且受限的持久化行为，但用户应确认写入路径和权限是否符合预期。

What to consider before installing

这个技能总体上看起来是为“按设计稿实现前端”而写、没有可执行安装包、也没有恶意代码。但在允许使用前请确认：1) 平台是否为技能提供了对 Figma/MasterGo/Pixso 等的安全连接（如果没有，技能可能会请求你粘贴 API Token）；2) 如果要授予凭据，限制其最小权限并确认令牌仅用于读取设计数据；3) 确认允许该技能访问你的代码仓库并在项目根目录写入 reports/ 文件（或要求它先征得你同意）；4) 要求技能在执行外部 API 调用或写入文件前提示并展示具体计划；5) 如有疑虑，可先在含有测试/示例代码的隔离仓库中试运行，确认输出与说明一致。若需要，我可以帮你拟一条短消息询问技能作者或维护者这些细节。

按设计稿实现

在以下场景使用该 Skill：

• 用户希望根据 Figma、Sketch、MasterGo、Pixso、墨刀或摹客设计实现页面、组件、弹窗、表单、表格、卡片、仪表盘、设置页或业务流程界面
• 仓库中已经存在组件库、设计 Token 或应优先复用的 UI 模式
• 任务要求在编码前通过 MCP 读取设计上下文

支持的设计工具

工具	MCP 集成	获取设计数据方式
Figma	figma / figma-desktop	API 获取设计结构、变量定义
Sketch	sketch	MCP 获取设计选区截图
MasterGo	mastergo	API 获取 DSL 结构数据
Pixso	pixso	本地 MCP 获取帧数据和代码
墨刀	modao	MCP 获取原型数据、生成设计描述
摹客	无 MCP	通过用户提供的截图、标注或导出的 CSS 获取

目标

• 尽量高还原地实现设计稿
• 在创建新组件前优先复用现有项目组件
• 尽可能把设计变量映射到现有 Token
• 保持实现结果可维护、类型明确、可测试且具备可访问性
• 避免引入重复的基础组件或并行设计系统

必需工作流

1. 先识别可用的设计来源（按优先级）：

• figma — Figma API 集成
• figma-desktop — Figma 桌面端集成
• mastergo — MasterGo DSL 数据
• pixso — Pixso 本地 MCP
• modao — 墨刀原型数据
• sketch — Sketch 选区截图
• 如以上 MCP 均不可用，请求用户提供设计截图或标注（适用于摹客等无 MCP 工具）

2. 先通过 MCP 或用户提供的设计数据读取设计上下文。

• 检查布局结构
• 检查间距、字体、颜色、变量、状态、图标和组件层级
• 如果 MCP 提供了资源文件或 SVG / 图片源，直接使用
• 如果 MCP 已提供真实资源，不要自行造占位资源
• 如果用户提供截图而非 MCP 数据，从截图中推断布局、颜色、字体等视觉信息

3. 在创建新组件前先搜索代码库中的可复用组件。 重点检查：

• Button
• Input / Select / Checkbox / Radio / Switch
• Modal / Drawer / Dialog
• Table / List / Card
• Tabs / Breadcrumb / Pagination
• 页面容器 / 区块容器 / 空状态 / Loading 状态

4. 在改文件前先产出一份简短实现计划。 计划必须包含：

• 需要改动的文件列表
• 组件拆分方案
• 状态 / 数据流
• 响应式行为
• 复用还是新建的决策
• 设计缺口或歧义点

5. 按仓库当前使用的前端框架进行实现。

• 严格遵循仓库现有约定
• 优先使用明确类型的 props 和 interfaces/types
• 保持组件小而可组合
• 将重复逻辑提取为 hooks / composables / utilities

6. 设计 Token 规则：

• 优先使用现有 design token、CSS 变量、主题变量或工具类
• 除非确实没有对应 Token，否则不要硬编码颜色、圆角和间距
• 如果设计使用了新 Token，要明确指出，不要悄悄到处硬编码

7. 可访问性规则：

• 优先使用语义化 HTML
• 确保交互控件具有可访问名称
• 保留可见的焦点样式
• 检查对话框、菜单、标签页、表单控件的键盘可操作性

8. 编码后验证：

• 如有 lint，执行 lint
• 如有测试，执行测试
• 如果缺少测试，说明建议补充的最小测试范围

输出格式

# 设计实现计划

> 生成时间: YYYY-MM-DD HH:mm
> 评审工具: frontend-craft
> 设计工具: Figma / Sketch / MasterGo / Pixso / 墨刀 / 摹客

## 实现概要
- 设计稿来源: ...
- 目标页面/组件: ...

## 复用的组件
- ...

## 新建的组件
- ...

## 组件拆分方案
- ...

## 状态/数据流
- ...

## 与设计稿的偏差
- ...

## 缺失的资源 / Token / 交互细节
- ...

## 变更文件清单
- ...

报告文件输出

实现计划确定后，必须将计划内容使用 Write 工具保存为 Markdown 文件：

• 目录：项目根目录下的 reports/（如不存在则创建）
• 文件名：design-plan-YYYY-MM-DD-HHmmss.md（使用当前时间戳）
• 保存后告知用户报告文件路径

强约束

• 如果已有设计上下文（MCP 或截图），不要靠猜来实现 UI
• 如果项目已有 UI 体系，不要再引入一套新的 UI Kit
• 除非有合理理由，不要用硬编码替代已 Token 化的样式
• 不要忽略 hover、active、disabled、loading、empty、error 等状态
• 摹客等无 MCP 工具场景下，主动向用户索要关键截图和标注信息，不要凭空编造视觉数据