界面看起来相似，却不像团队的代码
把 Figma 设计稿给 AI 看，请它制作页面，间距和颜色大致对了，却冒出一堆陌生的组件。开发者还得回到 Figma 标签页确认数值，在现有代码库中找到合适的组件，再修改生成的代码。
这个问题不是把提示词写得更长就能解决。AI 需要一条通道，用来读取它该实现哪个画框，以及其中使用了哪些组件、样式和变量。WebStorm 2026.2.1 的 Figma Connect 通过将所选 Figma 节点的引用附加到 AI Chat来建立这条通道。
不过，仅仅安装它并不会让它自动选出团队的生产组件。要更接近预期结果，就需要区分 Figma Connect、MCP 和 Code Connect 各自的作用。
68% 和 32% 并非来自同一开发者群体的回答
先来纠正几个被广泛引用的数字。Figma 的 2025 年调查中，确实有68% 的开发者表示会通过提示词生成代码。但表示可以依赖 AI 输出的 32%，是以全体受访者而非仅开发者为基准。同一调查中，开发者对 AI 工具的满意度为 82%。
因此，不能把这两个数字相减或对比，得出“使用 AI 编程的 68% 开发者中只有 32% 信任结果”这样的结论。仅凭公开调查，也不能说设计上下文不足是 32% 这一回答的原因。
已确认的范围：Figma 的说明指出，设计系统信息不足时，生成的代码可能会偏离团队实际的实现方式。对比采用 Figma Connect 前后准确率、返工率或信任度的独立评估尚未公开。
Figma Connect 传递的不是图片，而是位置
Figma Connect 的核心在于，它不会把所选图层的截图或整个文件复制到聊天中。它将 Figma Desktop 中选定的画框、组件或图层与 WebStorm 的选择状态连接起来；点击Add to Context后，该节点的标识符引用便会进入 AI Chat。
代理可以以该引用为起点，读取 Figma MCP 提供的组件、样式和变量信息。相比用长篇文字描述是哪个页面，或只让它看截图猜测结构，这是一种更具体的输入。
| 连接要素 | 承担的角色 | 不会自动保证的事项 |
|---|---|---|
| Figma Connect | 将 Figma 中选定的节点附加为 WebStorm AI Chat 的上下文 | 与团队代码组件的自动映射 |
| Figma MCP | 向代理提供节点的组件、样式和变量信息 | 生产代码与设计的一对一连接 |
| Code Connect | 将 Figma 组件映射到实际代码资源 | 所有未映射元素的正确实现 |
| Chrome DevTools Connect | 支持浏览器运行以及控制台、网络和页面检查 | 替代人工最终 QA 和设计判断 |
若要直接映射设计与实际组件，就需要 Code Connect
Figma MCP 能读取设计信息，并不意味着内部按钮或 shadcn/ui 组件会被自动选中。如果代理能够访问代码库，即使没有 Code Connect，也可以找到并复用现有组件；但不能保证它会自动且准确地判断哪个设计组件对应哪个代码资源。
Code Connect 直接定义这种对应关系。Figma 将两种情况区分开来：当设计元素与代码已映射时，代理可以引用实际代码资源；若没有映射，则会根据收到的样式上下文编写新代码。
要使用 Code Connect，需要 Figma Organization 或 Enterprise 套餐中的 Full 或 Dev 席位。归根结底，结果不仅取决于是否安装 Figma Connect，也取决于代理访问代码库的范围、现有组件的结构以及 Code Connect 映射的范围。
也不应将采用 Dev Mode 的企业报告的每周节省 98 分钟归功于 Figma Connect。这是某一家公司 200 名开发者使用 Dev Mode 后报告的平均值；20～30% 的产出增长则是受 Figma 委托的 Forrester 根据访谈创建的合成组织估算值。
打开现有项目后连接第一个节点
本练习会将一个已包含首页实现的项目与 Figma 设计稿进行比较。请准备 WebStorm 2026.2.1、拥有 Dev Mode 或 Full Design 访问权限的付费 Figma 席位，以及能够打开工作文件的 Figma Desktop。若要在 AI Chat 中修改项目文件，还需要配置了 JetBrains AI 订阅或兼容提供商自有 API 密钥的 AI Assistant。
- 在 WebStorm 中打开要修改的首页项目。 在 Project 工具窗口中，确认能够看到要比较页面的入口文件和现有组件。如果是空项目，需先准备要使用的框架和页面入口文件，才能执行下面的比较请求。
- 打开Figma Connect 官方设置文档，然后前往 View → Tool Windows → Figma Connect。 在工具窗口中选择Set Up。
- 安装 AI Assistant 并完成聊天认证。 如果设置向导要求安装，请按提示安装插件；若出现Restart IDE，请重启 WebStorm。若使用 JetBrains AI，请登录；若使用自己的 API 密钥，请在Tools → AI Assistant → Providers & API Keys中配置兼容提供商和密钥，然后确认能够在 AI Chat 中输入。若只使用 BYOK，按照官方指引，可能需要解除现有 JetBrains AI 认证，或将 Provider 设为None。
- 在 Figma Desktop 中打开要实现的设计文件。 如果尚未安装，请先按设置向导的指引完成安装。
- 在 Figma Desktop 中切换到 Dev Mode。 在 Inspect 面板中选择Enable desktop MCP server。返回 WebStorm 向导，点击It’s Enabled，然后将应用范围设为Per Project或Globally。
- 在向导中选择 Open JetBrains Connect。 在 Figma 的 Plugins 面板中运行插件，点击Connect，然后对 WebStorm 中显示的连接请求选择Allow。
- 确认 Figma Connect 工具窗口显示 Connected。 在Currently selected或Layers中，对要实现的画框或组件点击Add to Context。
- 请求它同时比较附加的设计与当前打开项目中的现有实现。 第一次输入可以这样写：“比较附加的 Figma 设计与当前项目的首页实现，并修复视觉差异和布局差异。优先使用现有项目组件和设计令牌；如果创建新组件，请说明原因。”
首次成功有三个标准：工具窗口显示Connected，所选节点已附加到 AI Chat，且代理针对实际打开的项目文件返回实现方案或修改方案。若没有可比较的现有页面，请请求“在当前项目指定的页面入口中实现附加的 Figma 设计”，并明确目标文件。
浏览器检查通过另一条连接继续进行
在 Chrome 中打开生成的页面并检查控制台、网络和截图的功能，不属于 Figma Connect，而是独立的 Chrome DevTools Connect。WebStorm 2026.2.1 已捆绑相关 CLI 技能，但首次使用时可能会要求安装软件包。
因此，第一天最好缩小范围。连接一个节点，检查是否复用了现有组件以及布局差异。之后再为需要的组件添加 Code Connect 映射并接入浏览器检查，也更容易分辨是哪一条连接改善了结果。
首次审查要看三件事：确认代理是否读取了正确的 Figma 节点、是否复用了现有项目组件，以及若创建了新组件或任意样式值，是否说明了原因。Figma Connect 的价值不在于承诺自动补全，而在于减少 AI 必须猜测的设计信息。
