Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/infometa/workbuddyskills --skill design-to-code-workflowsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| name | design-to-code-workflows |
| description | 将 Figma 设计和截图转换为生产就绪的代码组件，内置无障碍性支持 |
本 skill 提供设计到代码转换的完整工作流程，通过 MCP 服务器的 3 个工具支持从 Figma 设计文件和截图生成 React、Svelte 或 Vue 组件。
本插件通过 MCP 服务器提供以下 3 个工具：
parse_figma - 解析 Figma 设计从 Figma JSON 导出中提取组件信息。
输入参数：
{
"json": "Figma JSON 导出内容（字符串格式）",
"framework": "react | svelte | vue（默认: react）"
}
返回内容：
framework: 目标框架components: 提取的组件列表（名称、类型、尺寸）colors: 设计中使用的颜色typography: 字体设置（字体族、大小、粗细）使用场景：
analyze_screenshot - 分析截图分析 UI 截图的布局并提取 UI 元素。
输入参数：
{
"imagePath": "截图文件的路径",
"framework": "react | svelte | vue（默认: react）"
}
返回内容：
framework: 目标框架layout: 布局结构（类型、子元素列表）使用场景：
注意：截图文件需要是可访问的本地路径。
generate_component - 生成组件代码根据布局规格生成代码组件。
输入参数：
{
"layout": {
"type": "容器类型（如 container）",
"children": [
{ "type": "text", "content": "内容" },
{ "type": "button", "label": "标签" }
],
"styles": { "key": "value" } // 可选
},
"framework": "react | svelte | vue（默认: react）",
"includeA11y": true // 是否包含无障碍性特性（默认: true）
}
返回内容：
code: 生成的组件代码framework: 使用的框架a11yCompliant: 是否符合无障碍性标准使用场景：
步骤 1：导出 Figma 设计
引导用户：
步骤 2：解析 Figma JSON
使用 parse_figma 工具：
const parsedDesign = await parse_figma({
json: "用户粘贴的 JSON 内容",
framework: "react" // 或用户选择的框架
});
步骤 3：生成组件代码
使用解析结果生成代码：
const component = await generate_component({
layout: parsedDesign.components[0],
framework: "react",
includeA11y: true
});
步骤 4：优化和调整
输出：生产就绪的 React/Svelte/Vue 组件，包含：
步骤 1：获取截图
引导用户：
步骤 2：分析截图布局
使用 analyze_screenshot 工具：
const analysis = await analyze_screenshot({
imagePath: "/path/to/screenshot.png",
framework: "svelte"
});
步骤 3：生成组件代码
基于分析结果生成代码：
const component = await generate_component({
layout: analysis.layout,
framework: "svelte",
includeA11y: true
});
步骤 4：完善组件
输出：可用的组件代码，基于截图中的视觉设计。
步骤 1：理解需求
询问用户想要创建什么类型的组件：
步骤 2：定义布局规格
根据需求构建布局对象：
const layout = {
type: "container",
children: [
{
type: "header",
content: "标题"
},
{
type: "form",
children: [
{ type: "input", label: "用户名", name: "username" },
{ type: "input", label: "密码", name: "password", inputType: "password" },
{ type: "button", label: "登录", action: "submit" }
]
}
],
styles: {
display: "flex",
flexDirection: "column",
gap: "1rem"
}
};
步骤 3：生成组件
const component = await generate_component({
layout: layout,
framework: "react",
includeA11y: true
});
步骤 4：迭代优化
<template> + <script> + <style>所有生成的组件默认包含以下无障碍性特性（includeA11y: true）：
aria-label: 为屏幕阅读器提供描述aria-labelledby: 关联标签元素aria-describedby: 提供额外描述role: 明确元素角色<button> 而非 <div onclick>）<label><h1> → <h6>）<ul>/<ol>✅ 推荐做法：
❌ 避免：
✅ 推荐做法：
❌ 避免：
React：
Svelte：
Vue：
生成的代码是起点，建议：
原因：
解决方法：
原因：
解决方法：
这是正常的！生成的代码是基础模板，需要：
对于多个 Figma 组件：
从 Figma 设计文件提取：
使用 parse_figma 的返回值：
const { colors, typography } = await parse_figma({ json, framework });
// colors: ['#000000', '#FFFFFF', ...]
// typography: [{ family: 'Inter', size: 16, weight: 400 }, ...]
创建设计令牌（Design Tokens）文件。
在 layout.styles 中定义响应式样式：
{
layout: {
type: "container",
styles: {
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
gap: "1rem"
}
}
}
生成 TypeScript 组件（React/Vue）：
.mcp.json| 工作流程 | 输入 | MCP 工具 | 输出 |
|---|---|---|---|
| Figma 转代码 | Figma JSON | parse_figma → generate_component | 生产就绪组件 |
| 截图转代码 | UI 截图 | analyze_screenshot → generate_component | 基础组件代码 |
| 自定义生成 | 布局规格 | generate_component | 定制化组件 |
所有工作流程都支持 React、Svelte、Vue 三种框架，并默认包含无障碍性特性。