基于 Figma 设计稿创建 Web 应用
本节信息
讲师 Elie Schoppik（Anthropic）· 时长 09:53 · ▶ 原视频
这最后一节，你会把 Claude 连上 Figma 的 MCP 服务器，把一张设计稿导入 Claude Code，并把应用开发出来。我们来玩点有意思的。
这一节要做什么
我想展示 Claude Code 一个非常强大的能力：配合 MCP 服务器，把 Figma 这类工具里的设计稿，快速变成 Web 应用。
为此我们要用到 Figma 的 MCP 服务器（需要一个 Figma 账号），还会用 Playwright 的 MCP 服务器，这样就能：分析 Figma 的设计稿、生成所需代码，再通过在浏览器里打开它、截图，用程序去测试。
因为我要用更现代的技术栈做前端，所以会用 Next.js，先在当前文件夹里用最新版本创建一个 Next.js 应用。
没用过 Next.js 完全没关系：敲几条命令，转眼就能在浏览器里看到了。
准备 Figma 设计稿与两个 MCP 服务器
我在 Figma 里有一张设计稿，想用它做一个基于美联储经济数据（FRED）的仪表盘。先去 Figma 的偏好设置，勾选 enable dev mode MCP server，再把设计稿对应的图层复制下来。
然后给 Claude 加上两个 MCP 服务器：Figma 和 Playwright。
注意：尽管我们之前已经加过 Playwright，但这是另一个项目、另一个环境，配置不会自动套用。每个项目都得各加一次。
用 /mcp 命令确认：两个都连上了。Figma 的 dev mode MCP 服务器给了五个工具：取底层代码、取图片、取设计规则等等。
让 Claude 读稿、生成代码、再用 Playwright 验证
让 Claude：用这张 Figma 设计稿、配合 Figma MCP 服务器去分析并构建底层代码；图表用 recharts 库；然后用 Playwright MCP 服务器看看应用长什么样。
小调整：如果你能切、而且不在 Pro 套餐上，可以换用 Opus 模型；Sonnet 也能干得不错，但任务偏复杂时 Opus 会稍好一点。
下面这段回放，还原了「读 Figma 稿 → 生成 Next.js 页面 → Playwright 验证 → 接入 FRED 真实数据」的完整旅程：
点「下一步」开始这段会话回放 ↓
它先连上 MCP 服务器，用 Get image 取设计稿预览、用 Get Code 拿到背后的代码，再装依赖、在 app 文件夹里用 React 基于组件的架构搭出仪表盘。然后用 Playwright 导航到 localhost:3000、截图——跟设计稿比已经相当不错了，说实话我觉得更漂亮些。
有一点很重要：效果在很大程度上取决于你那张设计稿的质量。这张稿图层不多，但就这么点时间，已经是个很好的起点了。
接上真实数据：调用 FRED API
这张稿只是个起点，而且这些数据其实有 API 可取。所以我让 Claude Code：用美联储经济数据（FRED）的真实数据来填充这些图表，用它的网页搜索工具去读 API 文档、取数据（CPI、失业率、收益率等）。
研究中它意识到：要取真实数据，我得填一个 API key。我去 FRED 账号申请一个填进去，它就开始写取数据的服务、更新仪表盘。
只用一点点提示，我们就从「带假数据的设计稿」走到了「真正接入真实数据源」。 回到 localhost:3000，会看到真实的失业率、十年期国债收益率等数据。原本从零搭可能要好几天的东西，几分钟就能搞定。
这里只展示了几个关键指标。但你看，只需一点点工作：用 MCP 服务器从真实环境拉数据、用 Figma 稿生成 UI，你就能体会到前端开发能有多快。我很想看看，用这个界面、用你指尖这些数据，你还能搭出些什么。