通过 MCP 将 Figma 设计构建为主页
在打造最大的 Rotis 字体在线档案库这一项目的第 27 篇记录中，我尝试将 Figma 直接与 Cursor 集成，效果非常好。任务：作者通过集成 Figma MCP 与 Cursor，将设计元素转换为 HTML/CSS 代码。工作流程包括设置与 GitHub 同步的本地 Git 仓库，在 Figma Dev Mode 中选择设计内容，并将 URL 粘贴到 Cursor 提示词中。人类角色包括验证生成的代码（Cursor 会高亮显示以便追踪），并决定保留或重新生成代码。；工具：Cursor。人工角色：原始帖子没有说明人如何参与。；局限：最初尝试 Claude Code 因需要每月 17 美元的 Pro 套餐而被放弃，转而使用 Cursor 的免费试用版。该工作流依赖于网页字体的可用性；像 Rotis 这样的专有字体如果没有适当的许可或网页字体支持，可能无法正确渲染。集成需要设置 Git 仓库并配置 MCP 连接。。
工具
Agent Work Atlas 发布日期:
概述
在打造最大的 Rotis 字体在线档案库这一项目的第 27 篇记录中，我尝试将 Figma 直接与 Cursor 集成，效果非常好。
工作流程
作者通过集成 Figma MCP 与 Cursor，将设计元素转换为 HTML/CSS 代码。工作流程包括设置与 GitHub 同步的本地 Git 仓库，在 Figma Dev Mode 中选择设计内容，并将 URL 粘贴到 Cursor 提示词中。人类角色包括验证生成的代码（Cursor 会高亮显示以便追踪），并决定保留或重新生成代码。
原文报告的结果
生成的代码准确还原了颜色、布局和按钮悬停状态，效果优于之前使用静态图片的尝试。然而，它未能渲染特定的 Rotis 字体和字重，可能是因为该字体不提供免费的网页字体版本。尽管初始输出很有前景，作者指出仍需进行大量调整。
人工角色
原始帖子没有说明人如何参与。
局限
最初尝试 Claude Code 因需要每月 17 美元的 Pro 套餐而被放弃，转而使用 Cursor 的免费试用版。该工作流依赖于网页字体的可用性；像 Rotis 这样的专有字体如果没有适当的许可或网页字体支持，可能无法正确渲染。集成需要设置 Git 仓库并配置 MCP 连接。
试一试
扮演一名通过 MCP 将 Figma 设计与 Cursor 集成的前端开发人员。 1. **设置**：确保已初始化本地 Git 仓库并与 GitHub 同步。在 Cursor 中打开该仓库。 2. **输入**：在 Figma 中切换到“Dev Mode”。选择特定的设计组件 [可替换：例如“主页英雄区”]。复制组件 URL。 3. **生成**：将 URL 粘贴到 Cursor 中，提示词为：“将此 Figma 设计转换为响应式 HTML 和 CSS。确保包含悬停状态。” 4. **验证**：审查 Cursor 高亮显示的代码。检查颜色、布局和交互状态是否准确。 5. **字体检查**：验证指定字体 [可替换：例如“Rotis”] 是否正确渲染。如果未渲染，记录问题并建议回退字体或网页字体替代方案。 6. **试运行**：在最终确定之前，运行本地服务器预览 HTML/CSS。 7. **人工批准**：在我明确确认视觉输出与设计匹配之前，不要提交或部署。如果出现错误，请根据具体反馈重新生成代码。 交付物：一个 HTML 文件和一个 CSS 文件。成功指标：视觉保真度与 Figma 设计一致，如果字体不可用于网页，则排除字体问题。
来源报告未经独立核验。发布日期为本站案例发布日期，并非原始文章日期。