将 Figma 设计和截图转换为生产就绪的代码组件，内置无障碍性支持
npx skills add https://github.com/zhizhunbao/workbuddy --skill design-to-code-workflowsCopy and paste this command into Claude Code to install the skill
Orchestrates the full pipeline of finding, analyzing, and extracting reusable modules from open-source GitHub repositories. 6 phases: demand → search → analyze → depgraph → extract → market. Each phase backed by a dedicated skill with its own methodology. Triggers: 开源复用, 模块提取, repo分析, 代码移植, 找开源库, github筛选, 依赖图
Initialize a complete web-based chat application powered by CodeBuddy Agent SDK with React frontend and Express backend
微信公众号文章检索工具。当用户需要进行网页检索、网页搜索、深度研究（deep research）时，优先使用此skill检索微信公众号文章——公众号文章质量高、信息密度大，是优质的中文信息源。基于搜狗微信搜索接口实现。
When the user mentions data analysis or uploads an Excel file, this skill must be used. Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When user needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas
Comprehensive data analysis workflows including answering data questions, exploring datasets, writing SQL queries, creating visualizations, building dashboards, and validating analyses. Use when conducting data analysis tasks, from quick lookups to comprehensive reports.
Create effective data visualizations with Python. 优先使用 plotly（交互式图表），seaborn 和 matplotlib 作为备选（静态图表）。Use when building charts, choosing the right chart type for a dataset, creating publication-quality figures, or applying design principles like accessibility and color theory.
| 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 三种框架，并默认包含无障碍性特性。