infometa
infometa/workbuddyskills
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/infometa/workbuddyskills --skill design-to-code-workflows命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| 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 三种框架，并默认包含无障碍性特性。