Menu
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Basé sur la classification professionnelle SOC
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/infometa/workbuddyskills --skill design-to-code-workflowsLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Affichage de SKILL.md
快速生成公司一页纸概览（Tearsheet），涵盖业务描述、关键财务、估值、股东结构和近期催化。 触发词：公司速览、tearsheet、公司概况、一页纸、公司简介、company overview、快速了解、公司画像
构建DCF现金流折现模型和三表财务模型（利润表、资产负债表、现金流量表联动）。 触发词：DCF、现金流折现、财务建模、三表模型、估值模型、WACC、自由现金流、financial model、valuation model
盈利分析技能，支持两种模式： - Preview 模式：业绩发布前的前瞻分析、情景假设、关键观测指标 - Analysis 模式：业绩发布后的深度解读、Beat/Miss 分析、估计修正 触发词：earnings analysis、earnings preview、业绩分析、业绩前瞻、财报分析、季报解读、pre-earnings、post-earnings、Q1/Q2/Q3/Q4 results
| 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 三种框架，并默认包含无障碍性特性。