本文详细介绍如何通过 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 会据此解析设计元素属性并生成对应代码。
