副驾驶代理与Figma MCP开发
一项关于联合使用 复制品代理 和 Figma MCP（媒体上下文代理） 优化发电 React/Next.js 来自Figma设计的代码。
目标： 评估标准Websolute项目的效率、局限性和改进机会。
1.什么是Figma MCP服务器
Figma推出了 MCP服务器，它允许将Figma设计文件的上下文直接集成到开发工作流程中 LLM （大型语言模型，如ChatGPT、Claude Code、Copilot等）。
这个想法不仅仅是给人工智能一个设计的图像，而是给它一个更结构化的背景：组件、变量、交互、设计逻辑等等。
为什么有用
没有上下文，LLM可以生成不尊重团队/项目的风格、结构或约定的通用代码。
借助Figma MCP Server，AI可以访问有关组件、设计变量、样式的更精确信息，并使用这些信息生成与设计更一致和“对齐”的代码。
这也减少了令牌的使用（即LLM上下文“成本”），因为提供的是结构化数据，而不仅仅是图像。
上下文就是一切
当使用人工智能或从设计过渡到代码时 正确的背景会让一切变得不同.
仅仅看到一个组件或屏幕截图是不够的：知道 样式、变量、层次结构和交互 允许AI生成与项目一致且忠实的代码。
换句话说，你提供的信息越结构化、越精确，结果就越有用、越准确。
MCP服务器提供什么样的上下文？
服务器提供各种“工具”/上下文模式：
- 元数据
\*Figma中定义的组件、变量和样式的信息。 \*例如，如果您在Figma中定义了一个具有名称和代码语法的颜色标记，MCP服务器可以将该确切代码传递给模型。 \*允许映射设计和代码，例如，向LLM指示代码中组件的确切路径（但仅限于“代码连接”）。
- 屏幕截图/图片
\*提供屏幕截图，以提供界面的“视觉”视图。 \*有助于理解仅凭元数据无法推断的高级上下文（例如导航流、布局、屏幕序列）。 \*这不仅仅是复制像素：这些图像是文本/结构化上下文的集成。
- 交互性/伪代码
\*MCP服务器可以根据设计的结构（包括交互（状态、行为））生成伪代码（例如在React中）。 \*这有助于法学硕士不仅了解“设计是由什么组成的”，还了解“它应该如何工作”
- 内容（文本、图层、注释）
\*即使是Figma中的“占位符”文本、图层名称和注释也是有用的：它们可以提供有关真实内容的线索，以及如何将其链接到代码中的数据模型。 \*这有助于AI生成更逼真的组件（不仅是UI，还有“内部内容”）。
进一步阅读： - Figma MCP服务器指南
______________________________________________________________________
2.如何使用
实例
让我们尝试使用以下提示从Gammavilla项目导入组件：
导入所有指令 @workspace加载工作区信息，#file:ui和#file:models，并用它们创建上下文。加载所有#file:copilot-instructions.md文件并显示其内容。包括来自所有目录和子目录的指令，以结构化和可读的格式显示它们。
简单导入 从#figma导入当前选择，并将其添加到#file:iframe.tsx到一个简单的Flex中。列
导入新组件TestComponent 使用当前选择从#figma导入新组件。它被称为TestComponent，添加到#file:sections中。读取#file:copilot-instructions.md#file:figma-mcp.instructions.md和#file:ui-components.instructionss.md，然后导入figma组件。在生成代码之前，还要使用#get_sign_context和#get_creenshot。
导入新组件SuperGallery 使用当前选择从#figma导入新组件。它被称为SuperGallery，添加到#file:sections中。读取#file:copilot-instructions.md#file:figma-mcp.instructions.md和#file:ui-components.instructionss.md，然后导入figma组件。在生成代码之前，还要使用#get_sign_context和#get_creenshot。
关注MCP服务器功能（工具和提示）
get_design_context
\*提取Figma中选择（框架、层）的设计上下文。 \*默认情况下，它在中生成代码 React + Tailwind，但您可以自定义结果：项目中的其他框架或现有组件。 \*提示示例： \*在React中生成我的Figma选择 \*使用src/components/ui中的组件生成我的Figma选择 \* #get_design_context 当前选择的
get_variable_defs
\*返回选择中使用的变量和样式：颜色、间距、排版等。 \*提示示例： \*我的设计中使用了哪些变量？ \*我只想要颜色和间距。 \*给我变量名和它们的值。
get_code_connect_map
\*提供 映射 在Figma节点（节点ID）和代码中的实际组件之间。 \*返回包含以下信息的对象： \* codeConnectSrc：代码中组件的路径 \* codeConnectName：代码中组件的名称 \*有助于将设计与现有代码库重新对齐。
get_screenshot
\*允许在Figma中捕获所选内容的屏幕截图。 \*在AI生成代码时，有助于保持布局保真度。 \*建议保持其活动状态，除非存在代币消费问题。 \*提示示例： \* #get_screenshot 关于当前的选择，并给我一些信息
create_design_system_rules
\*创建一个“规则文件”，帮助代理（AI）翻译设计，同时尊重设计系统和代码架构。 \*用于提供如何生成高质量、一致代码的说明。 \*结果应保存到特定路径（例如。， rules/)供代理人使用。 \*提供 轻量级 选择的表示：图层、名称、类型、尺寸、位置。 \*当选择非常大并且 get_design_context 会产生太多的背景。 \*允许处理多个选择或整个页面。
进一步阅读： Figma MCP工具和提示
用Copilot指令优化Figma MCP服务器
副驾驶说明 是使用Figma的MCP时的基本配置层：它们充当 技术合同 在项目和人工智能之间，定义确保一致输出的规则、约定和约束。
它们允许你定义什么
- 清除 命名约定 用于组件、令牌、文件和变量。
- 架构规则：文件夹结构、组件放置、变体模式、Figma库的组织。
- 技术政策：无硬编码，强制使用设计令牌，映射为
.ts/.json文件夹。 - 允许的模式：原子设计、组件工厂、内部钩子、Zod模式、布局原语等。
- 识别内部抽象，因此AI可以在没有连续提醒的情况下正确使用它们。
使用Figma MCP的操作模式
指令还可以定义 如何 人工智能应使用MCP工具进行操作，例如：
- 查询变量和令牌；
- 导航组件结构；
- 生成MCP请求以提取、更新或验证值；
- 按顺序组合工具（例如变量→ 过滤→ TS映射→ 回购更新）。
由于这些规则，人工智能不仅知道标准，而且使用Figma的MCP遵循一致和可重复的操作程序。
进一步阅读： Figma提供了副驾驶指令示例
3.观察结果
该方法在组件开发中被证明是有用的，但需要 持续监控和修订特别是与Figma MCP结合使用。
建议将其应用于 原子成分 和 孤立路段，而不是整个页面。
最有效的领域
AI 代理
- 具有交互功能的UI组件（例如，打开/关闭下拉菜单、活动过滤器、标签、手风琴）。
- 自定义钩子和管理React上下文/状态。
- 外部库的集成（例如。，
Ariakit为了可访问性，Framer Motion用于动画）。 - 支持TypeScript模型和编译修复。
Figma MCP
- 布局简单的部分。
- 具有与已经开发的其他条带类似的逻辑或布局的条带。
- 布局具有清晰的视觉层次和一致的间距。
- 具有重复内容类型的组件（例如，产品列表、徽标、团队）。
- 当Figma设计为 清洁，与 一致性命名, 正确的自动布局，以及 定义明确的变体.
- 如果项目使用 共享UI库或设计系统.
4.限制
- Figma MCP的有效性是 严格相关 对于Figma项目的结构：如果文件不符合某些标准，生成的代码通常不可用。
- Figma MCP无法正确解释一些复杂的布局。
- 当代理使用Figma MCP时，它通常无法正确解释 混音器 核心库（媒体查询、排版、变体），进行必要的代码修订或替换。
- 上下文丢失：数据模型、模式和约定并不总是得到尊重。
- 一些建议的解决方案是 过于清晰或效率低下，通常需要代码修订或及时调整。
- 难以让代理人理解 全球结构 应用程序：它在本地化零件上效果更好。
- 延长时间 对于复杂的请求：对修订和新提示的需求会降低整体效率。
- 一些图书馆，如 滑动器，与Figma MCP的自主集成度较低。
5.正在进行的活动
- 测试 实际项目.
- 优化 副驾驶说明 为了稳定 上下文窗口.
- 研究 顺风 作为一个标准的UI库，与Mixer的核心组件相比，它使代码生成更高效。
- 在内部培训期间深入研究MCP和Copilot。
- 测试 沙德克恩 库，它使用Tailwind以及Figma插件和代码导出库来加快开发过程。
6.项目测试
| 项目 | 背景 | 复制品说明 | 结果 | 注释 |
|---|---|---|---|---|
| Gammavilla | Mixer已经启动，文件系统已填充，指令仅在项目结束时引入 | 否 | 生成的代码可以接受，但总是需要修订 | 上下文窗口很容易丢失；有效性取决于布局 |
| Moca | 由第三方设计项目，不使用库。项目在Mixer上从头开始 | 是 | 使用Copilot指令和英语语言进行改进 | 更稳定的上下文窗口；非优化设计库影响导出 |
GAMMAVILLA示例：
- 地图组件（在figma上）
components/select)http://localhost:3000/en-ww/staticpage - faq组件
- 加列表组件
MOCA示例：
- 过滤器组件
https://moca-dev.ws-deploy-02.wslabs.it/casi-studio
代理开发示例
container-context和useWrapper(lazy/bannercta)chapter-context和useChapters(lazy/block-chapter和components/sidebar)
其他MCP用例：
- 导入简单的原子组件，请参阅Teamsystem按钮
- 导入数据输入：
从当前#figma选择中导入所有卡片的描述，并将其放入
列表元素使用#get_design_context，例如：“第一张卡片标题名称”
- 从figma生成样式表（排版列表、颜色列表、图标列表等），例如：
从#figma导入您从当前选择中找到的排版信息列表，并将其列到
6.总结
这 副驾驶代理+Figma MCP 集成有望快速创建 原子成分 和 一致的UI部分.
主要限制：
- 上下文窗口丢失。
- 需要频繁、有时是大规模的修订。
- 依赖于Figma设计的质量。
- 组件并不总是标准化的。
- 成本效益比
7.下一步
- 自动生成 副驾驶说明 对于每一个新项目。
- 改进 内部Figma库 以最大限度地提高一致性和效率。
- 整合 顺风 在Mixer上。
- 使用Figma MCP的结果与使用 沙德克恩.
- Figma Code Connect的测试。