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

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

## 安装 Figma MCP

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

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

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

![](https://developer.qcloudimg.com/http-save/yehe-3091566/6e311c86f63cbfe1e935bc0228559d54.png)

## 授权 Figma 账户

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

![](https://developer.qcloudimg.com/http-save/yehe-3091566/a1d355f000502f669786318c604076fc.png)

![](https://developer.qcloudimg.com/http-save/yehe-3091566/a4d1341c7d04189bac2f69e84f93a0bc.png)

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

![](https://developer.qcloudimg.com/http-save/yehe-3091566/57640016cb10f1c0573efc456a34cb83.png)

## 配置 MinMax 模型（可选）

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

![](https://developer.qcloudimg.com/http-save/yehe-3091566/ffaff3abd685cbb858acdb4b80ea4a03.png)

详细配置步骤可参考 [MinMax 官方文档](https://platform.minimaxi.com/docs/guides/text-ai-coding-tools#%E5%AE%89%E8%A3%85-claude-code)。

## 使用 Figma MCP 还原设计稿

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

### 选择目标设计稿

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

- [设计稿地址](https://www.figma.com/files/team/1578338715267053469/resources/community/file/1444331896024589155?fuid=1578338713432883311)

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

![](https://developer.qcloudimg.com/http-save/yehe-3091566/be0cd0e2028eeeba660d8b4fbb0f5276.png)

### 获取设计元素链接

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

![](https://developer.qcloudimg.com/http-save/yehe-3091566/a062c0dc25c5f65d7c984e723cddd692.png)

### 调用 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 代码：

![](https://developer.qcloudimg.com/http-save/yehe-3091566/c7169b4858e350f939bd001e70275be1.png)

![](https://developer.qcloudimg.com/http-save/yehe-3091566/611b44fc6662445d2b25ef74d11b9172.png)

### 验证还原效果

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

![](https://developer.qcloudimg.com/http-save/yehe-3091566/8a9061079755eeec40e16569ab2313c0.png)


## 参考资料

- [Figma MCP Server 官方文档](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/#claude-code)
- [MinMax Claude Code 接入指南](https://platform.minimaxi.com/docs/guides/text-ai-coding-tools#%E5%AE%89%E8%A3%85-claude-code)

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

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

详解如何使用Claude Code配合MinMax大模型和Figma MCP实现设计稿到代码的高精度自动还原，大幅提升前端开发效率

前端

低代码

开发工具

本文介绍ClaudeCode+FigmaMCP+MinMax组合方案，实现设计稿自动转代码。详细讲解FigmaMCP安装授权、MinMax模型配置，以及如何通过Copylink获取设计元素并生成高还原度HTML/CSS代码，提升前端开发效率。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

基于Claude Code + MinMax + Figma MCP高精度还原设计稿-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐