剑客精翻：Claude Code官方教程(08)-Figma MCP服务器集成与应用开发

剑客精翻：Claude Code官方教程(08) Figma MCP服务器集成与应用开发 剑客精翻：Claude Code官方教程(08) Figma MCP服务器集成与应用开发 Modified September 13, 2025 首先需要确保已正确连接到MCP服务器，并使用准确的模拟图信息和必要的工具来编写支持此模拟图的底层代码。 在这个过程中，系统会使用来自Figma Dev MCP服务器的Get Image工具获取图像信息，接着使用Get Code工具来获取该模拟图背后的底层代码结构。 随后需要通过NPM或其他包管理器安装必要的依赖项。如果发现某些依赖项尚未安装，Claude Code会提示进行安装操作，按照提示完成安装即可继续后续流程。 由于我们在这个Next.js应用程序内部，我们将在app文件夹中完成大部分工作。CC将分析任何全局CSS，在这里开始创建主仪表板结构。 在这里我们将添加一些元数据，这看起来不错。现在CC将创建仪表板布局，并在React中使用更多基于组件的架构来构建它。 现在我们已经创建了底层结构，让我们开始确保事情看起来符合预期。由于我已经在这里运行了服务器，我只是要说不要运行服务器，它已经在运行了，继续。 使用Playwright进行测试 我们现在将使用Playwright进行测试，看看情况如何。我们将导航到localhost 3000，也拍一张照片，让我们让它截个屏。 我们可以在Playwright中看到，到目前为止，与模拟图相比，它看起来相当不错。我们在这些条形图上有一些额外的样式，但从我们开始的模拟图来看，这是一个相当好的开始。 实际上，我认为这看起来比这里的模拟图稍微好一些。我们仍然会看到正在进行的一些更改，侧边栏中有一个需要修改的布局，我们总是可以让Claude来回迭代这个特定的模拟图。 需要提到的一个重要事情是，这个Figma中的模拟图没有大量的图层和底层组件，所以很多这将取决于你拥有的底层模拟图的质量。但这是一个非常好的开始。 现在让我们看看情况如何。我们可以看到，通过模型的一些工作和使用MCP服务器来验证可视化并从模拟图构建，可能需要几天时间从头开始构建的事情可以在几分钟内完成。 😅 （我没看出什么来，反正牛🐮就完事儿了，而且Playwright还能做很多很多别的事，以后单独讲） 集成真实数据 所以你可能想知道接下来会发生什么。我们拥有的这个模拟图只是你可能想象构建的开始，这些数据实际上可以通过API获得。所以我可以要求Claude Code用来自联邦储备经济数据的真实世界数据填充这些图表。 👍 此处提示为：populate these charts with real world data from FRED 我们将要求Claude Code使用其Web搜索工具之一来查找信息以使用实际数据进行更新。在这里我们将查看CPI、失业率、收益率等等，但你可以想象这可能是你从后端获取的数据。 但在这里我们将展示Claude研究如何使用API文档、如何获取数据的能力，可能需要API密钥才能这样做。 API集成和配置 当我们开始进行一些这样的研究时，Claude将让我们知道我们需要什么来确保事情按预期工作。在那个模拟图中，导航栏中还有一些其他部分只是为了可视化，但我们可以添加我们想要的任何底层功能。 所以在它完成一些研究后，它意识到为了让我从联邦储备获取实际数据，我需要输入一个API密钥。我可以去我的账户获取API密钥，这是一个相对简单的过程，你可以在这里看到。 一旦我有了我的API密钥，它将开始为我编写额外的代码来获取数据并直观地显示数据。所以我将在这里更新我的API密钥。 ✔️ FRED 官网： https://fred.stlouisfed.org/docs/api/api key.html 。可以从这里获取api key 实现数据服务 现在我已经更新了API密钥，让我们看看Claude在构建额外数据方面的进展。CC现在已经编写了获取经济数据的服务，我们现在将更新仪表板并使用我们的API获取真实数据。 通过访问本地服务器，我们将看看新内容在视觉展现上是什么样子，以及是否有任何需要修改的底层代码来使页面更具视觉吸引力。 我们已经从这里的模拟页面（有一些虚假数据和不多的功能），在非常短的时间内，转成能反映真实世界信息的数据页面。 当然，一个完整的经济指标展示网站并不仅有这几个关键指标，也许我下一步想要做的是开始构建我自己的界面，或者使用另一个Figma模拟图来处理通胀、就业等等。 通过这节课，我们展示了Claude Code如何与MCP服务器集成，从设计工具中提取模拟图，生成功能完整的Web应用程序，并集成真实数据源。这种工作流程可以将传统上需要数天的开发工作压缩到几分钟内完成，大大提高了开发效率和迭代速度。 课代表学习笔记 📖 本节课核心内容 这节课为我们展现了Claude Code最强大的能力之一：通过MCP服务器架构实现跨工具协作的自动化开发流程。我们学习了如何配置和使用Figma MCP服务器与Playwright MCP服务器，体验了从设计模拟图自动生成React组件的完整过程。更重要的是，我们掌握了将静态设计转化为连接真实数据源的动态Web应用程序的方法，见证了现代AI辅助开发工具如何革命性地提升开发效率。 🎯 重点掌握 MCP服务器配置与集成 ：理解MCP服务器的工作原理，掌握Figma和Playwright两个关键服务器的配置方法，学会验证服务器连接状态和可用工具的检查流程。 设计到代码的自动转换 ：熟练运用Figma MCP服务器的Get Image和Get Code工具，理解Claude如何分析设计模拟图并生成相应的React组件结构，掌握基于组件化架构的前端开发思路。 端到端应用开发流程 ：掌握从Next.js项目初始化、依赖安装、代码生成到Playwright自动测试的完整开发链路，学会如何集成真实API数据源，实现从原型到生产级应用的快速迭代。 ⚠️ 难点解析 MCP服务器环境依赖管理 ：每个独立项目都需要单独配置MCP服务器，它们不会自动应用到所有Claude Code应用程序中，容易在多项目开发时产生混淆。 解决思路 ：为每个项目建立独立的MCP配置文档，标准化配置流程，在项目初始化时就完成所需MCP服务器的配置工作。 💡 实践要点 • 确保Figma账户开启开发模式，正确获取并复制特定图层信息用于MCP服务器配置 • 掌握Next.js项目的创建和依赖管理，熟练使用npm或yarn进行包安装 • 学会使用Playwright MCP服务器进行自动化浏览器测试和屏幕截图验证 • 理解API密钥的获取和配置流程，掌握环境变量的安全管理方法 • 熟练运用Recharts等图表库创建数据可视化组件 大家可以关注我的公众号🌟（或联系：lanyijianke1992），后台私信"cc资源包"，领取我为大家整理的课外资源💼，持续更新中✅ 我是蓝衣剑客，谢谢你看我的文章。 首先需要确保已正确连接到MCP服务器，并使用准确的模拟图信息和必要的工具来编写支持此模拟图的底层代码。 在这个过程中，系统会使用来自Figma Dev MCP服务器的Get Image工具获取图像信息，接着使用Get Code工具来获取该模拟图背后的底层代码结构。 随后需要通过NPM或其他包管理器安装必要的依赖项。如果发现某些依赖项尚未安装，Claude Code会提示进行安装操作，按照提示完成安装即可继续后续流程。 由于我们在这个Next.js应用程序内部，我们将在app文件夹中完成大部分工作。CC将分析任何全局CSS，在这里开始创建主仪表板结构。 在这里我们将添加一些元数据，这看起来不错。现在CC将创建仪表板布局，并在React中使用更多基于组件的架构来构建它。 现在我们已经创建了底层结构，让我们开始确保事情看起来符合预期。由于我已经在这里运行了服务器，我只是要说不要运行服务器，它已经在运行了，继续。 使用Playwright进行测试 我们现在将使用Playwright进行测试，看看情况如何。我们将导航到localhost 3000，也拍一张照片，让我们让它截个屏。 我们可以在Playwright中看到，到目前为止，与模拟图相比，它看起来相当不错。我们在这些条形图上有一些额外的样式，但从我们开始的模拟图来看，这是一个相当好的开始。 实际上，我认为这看起来比这里的模拟图稍微好一些。我们仍然会看到正在进行的一些更改，侧边栏中有一个需要修改的布局，我们总是可以让Claude来回迭代这个特定的模拟图。 需要提到的一个重要事情是，这个Figma中的模拟图没有大量的图层和底层组件，所以很多这将取决于你拥有的底层模拟图的质量。但这是一个非常好的开始。 现在让我们看看情况如何。我们可以看到，通过模型的一些工作和使用MCP服务器来验证可视化并从模拟图构建，可能需要几天时间从头开始构建的事情可以在几分钟内完成。 😅 （我没看出什么来，反正牛🐮就完事儿了，而且Playwright还能做很多很多别的事，以后单独讲） （我没看出什么来，反正牛🐮就完事儿了，而且Playwright还能做很多很多别的事，以后单独讲） 集成真实数据 所以你可能想知道接下来会发生什么。我们拥有的这个模拟图只是你可能想象构建的开始，这些数据实际上可以通过API获得。所以我可以要求Claude Code用来自联邦储备经济数据的真实世界数据填充这些图表。 👍 此处提示为：populate these charts with real world data from FRED 此处提示为：populate these charts with real world data from FRED 我们将要求Claude Code使用其Web搜索工具之一来查找信息以使用实际数据进行更新。在这里我们将查看CPI、失业率、收益率等等，但你可以想象这可能是你从后端获取的数据。 但在这里我们将展示Claude研究如何使用API文档、如何获取数据的能力，可能需要API密钥才能这样做。 API集成和配置 当我们开始进行一些这样的研究时，Claude将让我们知道我们需要什么来确保事情按预期工作。在那个模拟图中，导航栏中还有一些其他部分只是为了可视化，但我们可以添加我们想要的任何底层功能。 所以在它完成一些研究后，它意识到为了让我从联邦储备获取实际数据，我需要输入一个API密钥。我可以去我的账户获取API密钥，这是一个相对简单的过程，你可以在这里看到。 一旦我有了我的API密钥，它将开始为我编写额外的代码来获取数据并直观地显示数据。所以我将在这里更新我的API密钥。 ✔️ FRED 官网： https://fred.stlouisfed.org/docs/api/api key.html 。可以从这里获取api key FRED 官网： https://fred.stlouisfed.org/docs/api/api key.html 。可以从这里获取api key 实现数据服务 现在我已经更新了API密钥，让我们看看Claude在构建额外数据方面的进展。CC现在已经编写了获取经济数据的服务，我们现在将更新仪表板并使用我们的API获取真实数据。 通过访问本地服务器，我们将看看新内容在视觉展现上是什么样子，以及是否有任何需要修改的底层代码来使页面更具视觉吸引力。 我们已经从这里的模拟页面（有一些虚假数据和不多的功能），在非常短的时间内，转成能反映真实世界信息的数据页面。 当然，一个完整的经济指标展示网站并不仅有这几个关键指标，也许我下一步想要做的是开始构建我自己的界面，或者使用另一个Figma模拟图来处理通胀、就业等等。 通过这节课，我们展示了Claude Code如何与MCP服务器集成，从设计工具中提取模拟图，生成功能完整的Web应用程序，并集成真实数据源。这种工作流程可以将传统上需要数天的开发工作压缩到几分钟内完成，大大提高了开发效率和迭代速度。 课代表学习笔记 📖 本节课核心内容 这节课为我们展现了Claude Code最强大的能力之一：通过MCP服务器架构实现跨工具协作的自动化开发流程。我们学习了如何配置和使用Figma MCP服务器与Playwright MCP服务器，体验了从设计模拟图自动生成React组件的完整过程。更重要的是，我们掌握了将静态设计转化为连接真实数据源的动态Web应用程序的方法，见证了现代AI辅助开发工具如何革命性地提升开发效率。 🎯 重点掌握 MCP服务器配置与集成 ：理解MCP服务器的工作原理，掌握Figma和Playwright两个关键服务器的配置方法，学会验证服务器连接状态和可用工具的检查流程。 设计到代码的自动转换 ：熟练运用Figma MCP服务器的Get Image和Get Code工具，理解Claude如何分析设计模拟图并生成相应的React组件结构，掌握基于组件化架构的前端开发思路。 端到端应用开发流程 ：掌握从Next.js项目初始化、依赖安装、代码生成到Playwright自动测试的完整开发链路，学会如何集成真实API数据源，实现从原型到生产级应用的快速迭代。 ⚠️ 难点解析 MCP服务器环境依赖管理 ：每个独立项目都需要单独配置MCP服务器，它们不会自动应用到所有Claude Code应用程序中，容易在多项目开发时产生混淆。 解决思路 ：为每个项目建立独立的MCP配置文档，标准化配置流程，在项目初始化时就完成所需MCP服务器的配置工作。 💡 实践要点 • 确保Figma账户开启开发模式，正确获取并复制特定图层信息用于MCP服务器配置 • 掌握Next.js项目的创建和依赖管理，熟练使用npm或yarn进行包安装 • 学会使用Playwright MCP服务器进行自动化浏览器测试和屏幕截图验证 • 理解API密钥的获取和配置流程，掌握环境变量的安全管理方法 • 熟练运用Recharts等图表库创建数据可视化组件 大家可以关注我的公众号🌟（或联系：lanyijianke1992），后台私信"cc资源包"，领取我为大家整理的课外资源💼，持续更新中✅ 我是蓝衣剑客，谢谢你看我的文章。 🔗 原文链接： https://mp.weixin.qq.com/s/2gOVa B6... https://mp.weixin.qq.com/s/2gOVa B6... 原创 蓝衣剑客 蓝衣剑客AI2025年09月12日 08:28 北京 📌 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 微信 公众号 📌 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 微信 公众号 📌 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 📌 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 📌 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 蓝衣剑客 元神智算 CEO。WaytoAGI专栏作者。 火山引擎开发者领航KOL。清华大学数据治理研究中心 荣誉顾问。 阿里云AI训练营 讲师。 得到新商学 组局先锋/讲师。 丛书《Kimi高效办公》、《豆包高效办公》作者。 火山引擎社区、掘金AGI、LangGPT专栏作者/核心共建。拥有超过10年的软件行业经验，起草过多个AI领域国家级标准、报告。为数十家世界500强企业提供过AI领域业务咨询、项目落地指导。 一个简短的介绍，概括不了六边形的我。没事爱写点文章，谢谢你喜欢它们。 微信 公众号 微信 微信 公众号 公众号 本课概览 这节课将带你进入Claude Code最具创新性的功能领域，体验从设计稿到完整Web应用的自动化开发流程。我们将深入学习如何通过MCP服务器架构实现Claude与Figma等专业设计工具的无缝集成，掌握现代开发工具链的协同工作模式。 在实践环节中，你将亲手操作Figma MCP服务器和Playwright MCP服务器的配置与使用，学会如何让Claude自动分析设计模拟图、生成React组件代码，并通过自动化测试验证应用效果。更令人兴奋的是，我们还会展示如何将静态设计转化为连接真实数据源的动态应用程序。 学完本节课后，你将具备构建完整现代化Web应用的端到端开发能力，能够熟练运用MCP服务器架构解决复杂的跨工具协作问题，并深刻理解AI辅助开发如何将传统需要数天完成的工作压缩到几分钟内。这是整个课程系列的集大成者，将前面学到的所有技能融会贯通，为你在AI时代的开发工作开启全新的可能性。 这节课将带你进入Claude Code最具创新性的功能领域，体验从设计稿到完整Web应用的自动化开发流程。我们将深入学习如何通过MCP服务器架构实现Claude与Figma等专业设计工具的无缝集成，掌握现代开发工具链的协同工作模式。 在实践环节中，你将亲手操作Figma MCP服务器和Playwright MCP服务器的配置与使用，学会如何让Claude自动分析设计模拟图、生成React组件代码，并通过自动化测试验证应用效果。更令人兴奋的是，我们还会展示如何将静态设计转化为连接真实数据源的动态应用程序。 学完本节课后，你将具备构建完整现代化Web应用的端到端开发能力，能够熟练运用MCP服务器架构解决复杂的跨工具协作问题，并深刻理解AI辅助开发如何将传统需要数天完成的工作压缩到几分钟内。这是整个课程系列的集大成者，将前面学到的所有技能融会贯通，为你在AI时代的开发工作开启全新的可能性。 大家可以关注我的公众号🌟（或联系：lanyijianke1992），后台私信"cc资源包"，领取我为大家整理的课外资源💼，持续更新中✅ 强大的MCP服务器集成能力 在最后这节课程中，我们将探索如何将Claude与Figma MCP服务器连接，实现从设计模拟图到功能完整的应用程序的完整开发流程。通过这个过程，你将体验到现代开发工具链的强大协作能力。 在前面的课程中，我们已经了解了Claude Code在代码库掌握、应用程序创建以及多环境开发方面的能力。现在要介绍的是Claude Code的一项更为强大的功能：通过MCP服务器协同工作，实现从Figma等设计工具获取模拟图并快速转换为Web应用程序的完整开发流程。 实现这个功能需要使用Figma MCP服务器，因此需要准备一个Figma账户。如果不希望订阅Figma的开发模式，课程中也会提供相应的替代方案。 👍 figma地址： https://www.figma.com/ figma地址： https://www.figma.com/ 同时还会使用Playwright MCP服务器，通过这个工具可以分析来自Figma的模拟图，生成相应的HTML代码，然后通过编程方式在浏览器中测试应用程序，并截取交互效果的屏幕截图进行验证。 设置开发环境 本次教程将构建一个采用现代技术栈的前端应用程序，选择Next.js作为开发框架。首先需要在当前工作目录中创建一个Next.js应用程序，使用最新版本。 👍 在终端中， next.js 使用以下命令初始化您的应用程序： npx create next app@latest 在终端中， next.js 使用以下命令初始化您的应用程序： npx create next app@latest 在创建过程中可以遵循默认设置选项，系统会自动安装所需的依赖项。对于没有使用过Next.js的开发者来说，这个过程相对简单，只需要执行几个命令行指令，很快就能在浏览器中看到运行效果。 在应用程序安装过程中，可以先查看Figma中准备好的模拟图。这里使用的是一个基于联邦储备经济数据的仪表板设计模拟图。 虽然这个Figma模拟图在图层结构和详细分析方面并非最为完善，但已经足够作为开发起点。 在Figma中需要完成的第一步操作是进入首选项设置，启用开发模式MCP服务器功能。 启用开发模式后，需要获取并复制要使用的特定图层信息，这将在后续配置MCP服务器时用到。 在Next.js应用程序创建完成后，接下来需要为Claude添加Figma和Playwright两个MCP服务器。首先添加Figma MCP服务器的相关配置命令，随后完成Playwright的配置。 👍 • 在终端中输入： claude mcp add transport http figma dev mode mcp server http://127.0.0.1:3845/mcp 。 • playwright MCP服务器： claude mcp add playwright npx @playwright/mcp@latest 。 • 启动 Claude Code 并验是否已连接到两个 MCP 服务器（使用 /mcp ）。 • 在终端中输入： claude mcp add transport http figma dev mode mcp server http://127.0.0.1:3845/mcp 。 • playwright MCP服务器： claude mcp add playwright npx @playwright/mcp@latest 。 • 启动 Claude Code 并验是否已连接到两个 MCP 服务器（使用 /mcp ）。 Playwright MCP服务器需要在本地环境中启动，通过特定的命令来实现。需要注意的是，每个独立的项目环境都需要单独配置这些MCP服务器，它们不会自动应用到所有Claude Code应用程序中。 配置完成后，需要验证MCP服务器的连接状态。通过使用 /mcp 命令可以检查连接是否正常。正常情况下应该能看到两个服务器都已成功连接. 同时在Figma MCP Server 中可以发现5个可用工具，用于获取底层代码、获取图像以及获取Figma模拟图的相关设计规则。 在确认两个MCP服务器都已成功连接后，接下来可以要求Claude使用Figma模拟图和Figma MCP服务器来分析并构建相应的底层代码。 👍 要复制 Figma 设计，请在 Figma 桌面中选择该设计，然后使用快捷键 Ctrl + L （windows）或 cmd + L （mac） 要复制 Figma 设计，请在 Figma 桌面中选择该设计，然后使用快捷键 Ctrl + L （windows）或 cmd + L （mac） 接下来将要求Claude使用Recharts库来创建图表，随后通过Playwright MCP服务器检查应用程序的外观效果。在开始这个过程之前，需要考虑AI模型的选择。 对于有条件且不在专业版计划限制下的用户，可以选择使用Opus模型。虽然Sonnet模型也能很好地完成任务，但对于更复杂的开发任务，Opus模型通常能提供更优的性能表现。 在完成模型切换后，就可以运行相应的提示指令，观察其实际表现效果。 👍 此处提示为：Using the following figma mockup (paste the link) use the figma dev MCP server to analyze the mockup and build the underlying code in this next.js application. Use the recharts library for creating charts to make this a web application. Check how this application looks using the playwright MCP server and verify it looks as close to the mock as possible. 此处提示为：Using the following figma mockup (paste the link) use the figma dev MCP server to analyze the mockup and build the underlying code in this next.js application. Use the recharts library for creating charts to make this a web application. Check how this application looks using the playwright MCP server and verify it looks as close to the mock as possible.