Figma + VS Code MCP 服务器

Source: Dev.to

概述

我最近分享了 MCP 服务器以及它们如何帮助 AI 从真实系统中获取更好的上下文。以下是一种在前端工作流中使用它们的方法。

通过使用 MCP 服务器连接 Figma 和 Visual Studio Code，您可以：

• 选择一个 Figma 组件
• 从其设计上下文生成结构化提示
• 将该提示直接粘贴到 VS Code Copilot

不再依赖截图或冗长的说明，MCP 会读取 Figma 组件的结构、间距、令牌和变体，从这些上下文生成提示，让 Copilot 生成更贴近设计的 UI 代码。

工作流程

1. 在 Figma 中选择一个组件。
2. MCP 服务器提取组件的设计元数据。
3. 从提取的上下文自动生成 提示。
4. 将提示粘贴到 VS Code Copilot。
5. Copilot 生成与原始设计保持一致的 UI 代码。

演示

本教程清晰展示了工作流：

Workflow Link (YouTube Live)

收获

对于前端开发者来说，这种方法提供了一种更贴近实际的 AI 日常使用方式——减少猜测，增加上下文。 🚀