本文介绍了模型上下文协议（MCP）的概念及在 Cursor 编辑器中的应用，重点演示了如何通过配置 Figma MCP 实现从设计稿自动生成前端页面。步骤包括创建 Figma Token、获取页面地址、搜索并安装 Framelink Figma MCP Server、在 Cursor 中配置环境变量，最后通过提示词调用工具生成 HTML 和 Tailwind CSS 代码。测试结果显示还原度较高，适合前端开发辅助。
Model Context Protocol 模型上下文协议，指的是 AI 和外部工具的通用交互协议。本质上它是 AI 链接各种工具的通用协议，通过 MCP 协议为 AI 赋能。它类似于 API，只不过 API 是给程序员使用的，而 MCP 是给 AI 使用的。
MCP 的运行需要基本条件
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
根据 Figma 设计稿生成前端页面。
用户头像 - Settings - Security - Generate new token
给 token 起个名字，并设置 token 的有效期和允许操作的权限。
创建成功后一定要先复制出来 Copy this token。关掉之后后面就看不到了。
Figma 默认就带了一个示例，右键拷贝对应的链接地址，如 https://www.figma.com/design/V3B3ZpAOIfMMICfbEoq8k8/Figma-basics?node-id=4368-321123&t=u1paVmIu82unuztY-4
在 https://mcp.so/ 搜索 Figma，这里选择一个热度较高的 Framelink Figma MCP Server，对应的 Github 地址为：https://github.com/GLips/Figma-Context-MCP?tab=readme-ov-file
根据不同的系统配置不同的值。注意：需要将 YOUR-KEY 替换成 Figma 中生成的 token。
绿点表示成功。
输入提示语。
Figma UI 设计稿：@https://www.figma.com/design/V3B3ZpAOIfMMICfbEoq8k8/Figma-basics?node-id=4368-321123&t=u1paVmIu82unuztY-4 你是一个大厂资深前端研发工程师，根据我提供的 Figma UI 设计稿，使用 HTML、Tailwind CSS 实现前端页面，聊天框中使用中文显示对话
可以看到还原度还是很高的，比较了一下，下面的圆角按钮 Figma 中填充色为白色，并且数量后面有个 小笔编辑的图表缺失了，其它感觉完全一样。
