Claude Code（八）:基于 Figma MCP 直出 App

要点

AI 的“眼睛”与“手”：深入理解 MCP (Model Context Protocol) 服务器的核心价值，看 Claude Code 如何通过连接 Figma MCP Server“看见”设计稿，并通过连接 Playwright MCP Server“验证”自己的开发成果。
两阶段开发范式：掌握从“视觉复刻”到“功能实现”的两步走开发流程。第一步，AI 专注于将设计稿转化为高质量的前端组件代码；第二步，AI 通过自主研究 API 文档，为静态页面注入真实的数据灵魂。
开发者的角色演变：在本工作流中，开发者不再是代码的编写者，而是需求的定义者、工具链的配置者、以及 AI 工作成果的验收者，真正成为一名“AI 开发工作流的架构师”。
全链路能力整合：本次实战是前序所有课程知识的集大成者，综合运用了 Agentic 规划、工具使用（Tool Use）、Web 搜索、文件操作等多种核心能力。

一、环境搭建与“感官”连接

我们的终极项目，目标是复刻一个展示美国联邦储备经济数据（FRED）的仪表盘。起点，只有一份 Figma 设计稿。

我们首先在本地创建一个空的 Next.js 项目，这将是我们应用的基础骨架。

1	`npx create-next-app@latest .`

接下来是至关重要的一步：为 Claude Code 接上“眼睛”和“手”。

连接 Figma (眼睛)：课程中介绍了两种连接方式。

我们在终端中使用 claude mcp add 命令，将 Figma MCP Server 添加到 Claude Code 的工具集中。
- Figma 官方 MCP Server：需要在 Figma 桌面应用的偏好设置中启用 Enable Dev Mode MCP Server。这需要在付费的 Pro 计划及以上才能使用。
- Framelink MCP Server：一个优秀的第三方免费替代方案，通过 Figma API Key 进行连接。
连接 Playwright (手/验证工具)：我们同样使用 claude mcp add 命令，添加 Playwright MCP Server。

配置完成后，我们可以在 Claude Code 中使用 /mcp 命令，检查两个服务器是否都已成功连接。

环境就绪，大戏开场。我们向 Claude Code 发出了第一个核心指令。

这个 Prompt 的指令链条非常清晰：

为了应对这个复杂的任务，课程中建议将模型切换到能力更强的 Opus。

Claude Code 接收指令后，它的 Agentic 工作流启动了：

调用 Figma MCP：使用 Get_image 和 Get_Code 工具，“看懂”了设计稿的视觉样式和基础代码。
代码实现：在 Next.js 的 app/ 目录下，开始创建符合 React 规范的、组件化的页面代码。
调用 Playwright MCP：在初步完成后，它启动 Playwright，打开 localhost:3000，截取一张当前页面的快照，用于和原始设计稿进行对比。

片刻之后，我们看到了初步的成果。令人印象深刻的是，AI 生成的页面不仅在布局和样式上高度还原了设计稿，甚至在一些细节上（如柱状图的渐变效果）比原始设计稿还要精致一些。

一个漂亮的“空壳”已经完成，接下来是注入灵魂——真实数据。我们向 Claude Code 发出了第二个指令：

1	`populate these charts with real-world data from FRED`

这个看似简单的指令，触发了一系列复杂的、真正体现 AI Agent 智能的行为：

自主研究：Claude Code 首先使用 WebSearch 工具，去搜索“FRED API”，找到了官方文档。
识别依赖：通过阅读文档，它意识到调用该 API 需要一个 API Key。
请求输入：它暂停了任务，并向我们（用户）请求提供 FRED API Key。
编写服务：在我们提供了 Key 之后，它编写了一个新的 services/fredApi.js 文件，封装了所有与 FRED API 交互的数据请求逻辑。
连接前后端：它修改了之前的 React 组件，用 useEffect 和 useState 等 React Hooks，在组件加载时调用 API 服务，获取真实数据，并更新图表状态。