← Back to Skills Marketplace

Implement From Design

Name: Implement From Design
Author: bovinphang

by Bovin Phang · GitHub ↗ · v1.0.0 · MIT-0

cross-platform ⚠ suspicious

145

Downloads

Stars

Active Installs

Versions

Install in OpenClaw

/install implement-from-design

Description

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

README (SKILL.md)

按设计稿实现

在以下场景使用该 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
保持实现结果可维护、类型明确、可测试且具备可访问性
避免引入重复的基础组件或并行设计系统

必需工作流

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

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

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

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

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

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

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

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

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

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

设计 Token 规则：

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

可访问性规则：

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

编码后验证：

如有 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 工具场景下，主动向用户索要关键截图和标注信息，不要凭空编造视觉数据

Usage Guidance

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

Capability Analysis

Type: OpenClaw Skill Name: implement-from-design Version: 1.0.0 The skill bundle is a legitimate frontend development assistant designed to implement UI components from design tools like Figma, Sketch, and MasterGo. It uses Model Context Protocol (MCP) integrations to fetch design data and follows standard development workflows, including component reuse, design token mapping, and accessibility checks, with no evidence of malicious intent or data exfiltration.

Capability Assessment

ℹ 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/ 是合理且受限的持久化行为，但用户应确认写入路径和权限是否符合预期。

How to Use

Make sure OpenClaw is installed (local or Docker)
Run the install command in chat: /install implement-from-design
After installation, invoke the skill by name or use /implement-from-design
Provide required inputs per the skill's parameter spec and get structured output

Version History

v1.0.0

- No file changes detected in this version. - Skill description, review criteria, and output format remain unchanged. - Version reported as 1.1.0 in SKILL.md for both current and previous versions.

Metadata

Slug implement-from-design

Version 1.0.0

License MIT-0

All-time Installs 0

Active Installs 0

Total Versions 1

Frequently Asked Questions

What is Implement From Design?

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

How do I install Implement From Design?

Run "/install implement-from-design" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Implement From Design free?

Yes, Implement From Design is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Implement From Design support?

Implement From Design is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Implement From Design?

It is built and maintained by Bovin Phang (@bovinphang); the current version is v1.0.0.

More Skills