基于Claude Code + MinMax + Figma MCP高精度还原设计稿

时间: 2026-03-05

分类:

原文地址 https://feinterview.poetries.top/blog/claude-figma-mcp-minmax

本文详细介绍如何通过 Claude Code + MinMax + Figma MCP 的组合方案，实现设计稿到代码的高精度自动还原。

安装 Figma MCP

首先在终端中执行以下命令安装 Figma MCP：

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

安装完成后，使用 claude mcp list 查看已安装的 MCP 列表：

授权 Figma 账户

MCP 安装成功后，需要在 Claude Code 界面中完成 Figma 账户的授权操作。点击授权按钮后会跳转到 Figma 官网的 OAuth 页面，登录并确认授权即可。

授权成功后，MCP 即可正常连接并读取你的 Figma 文件：

配置 MinMax 模型（可选）

如果你希望降低 API 调用成本，可以在 Claude Code 中配置 MinMax 作为模型供应商。使用 claude switch 命令调出模型切换面板，添加新的供应商：

详细配置步骤可参考 MinMax 官方文档。

使用 Figma MCP 还原设计稿

接下来演示如何使用 Figma MCP 从设计稿自动生成代码。

选择目标设计稿

本示例使用的是 Figma Community 上的一个咖啡馆落地页设计稿：

设计稿地址

打开设计稿后，点击【Open in Figma】进入画布页面：

获取设计元素链接

在 Figma 画布中选择你想要复刻的 Layer 层或 Frame，点击右键选择【Copy link to selection】获取元素链接：

调用 Claude Code 生成代码

切换到 Claude Code 界面，输入以下提示词即可自动还原设计稿：

请使用Figma MCP，在 @test.html 页面还原落地页设计：https://www.figma.com/design/zZQZmhP0lSw4OeCsBvuzFG/Bean-Scene-Coffee--Community-?node-id=1-4&t=2TnBNPKQMGuHxi8w-4

注意：提示词中的 @test.html 指定了输出文件名，Figma 链接包含了文件 ID 和节点 ID 信息，MCP 会据此解析设计元素属性并生成对应代码。

MCP 会自动读取设计稿的颜色、字体、间距等属性，并生成对应的 HTML 和 CSS 代码：

验证还原效果

代码生成完成后，打开生成的 test.html 文件查看效果：还原度还是很高的

参考资料

标签: none