Lighthouse+Figma MCP 0代码实现设计稿到网页快速还原

面对精美的设计稿，如何将它们完美地还原成网页，既要保持设计的高保真，又得保证网页性能流畅？想要在没有复杂编码的情况下，轻松实现从Figma设计到网页的无缝对接，那么 Lighthouse + Figma MCP 组合绝对能满足你的需求。 今天，我们将带你一起探讨如何利用这两款强大工具，实现零代码高保真设计还原。通过Lighthouse的一键部署和Figma的高效设计交互，我们将展示如何将创意设计图转化为一个优化良好的网页。

本文目标：

• 带你快速理解 Lighthouse 和 Figma MCP 如何组合，帮助你实现高保真网页还原。
• 手把手教你如何在零代码的基础上完成设计到网页的高保真还原。
• 让你领略Lighthouse和Figma带来的跨界协作魅力——完美设计、极速开发。

你需要准备：

1.Cherry Studio客户端

2.腾讯云Lighthouse轻量云服务器（推荐2核4G）

3.Figma官方APIKey( access token)

Lighthouse快捷部署

首先打开我们购买好的Lighthouse MCP应用模板镜像

点击server管理

点击添加Server，在自定义MCPServer中输入模板内容

这里YOUR-KEY记得替换为你自己的Figmakey,申请流程参考Figma官方链接中的Grab your Figma access token部分，申请好的key以fig开头。

在申请时请注意key的具体权限细节并打开对应的开关

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "YOUR-KEY"
      }
    }
  }
}

完成后点击确定

MCP服务即可出现在你的MCP Server控制台

复制对应的配置信息并暂存

配置CherryStudio（已配置好LLM能力的可跳过）

点击左下角齿轮设置

登陆需要使用的LLM模型账户或获取对应的apikey填入，并打开右上角开关

使用Lighthouse+Figma MCP

找到我们刚才复制的配置信息

增加类型为sse，信息复制到Cherry Studio

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "type": "sse",
      "url": "http://ip地址/xxxxx/sse"
    }
  }
}

从json导入，粘贴信息并点击确定

打开开关

在对话页面添加MCP服务器

开始使用

食用方法

首先可以在这里了解其基本功能

快速还原设计稿

以以下设计稿为例：

https://www.figma.com/design/z5UU19zpaRt2CRa0Hg7dn5/Untitled?node-id=0-704&t=3XjlenpJrdZfLEMD-1

参考提示词如下：

https://www.figma.com/design/z5UU19zpaRt2CRa0Hg7dn5/Untitled?node-id=0-711&t=3XjlenpJrdZfLEMD-4
使用 Frameli-get_figma_data 工具获取Profile的所有信息，并根据设计稿信息进行开发
- 使用HTML，Tailwindcss
- 苹果、google等大厂设计配色风格
- - 无法下载的图片可以使用灰色方块占位

对话效果，可以看到在这里模型用了mcp的get_figma_data接口

设计结果如下，由于模型性能不同设计效果部分资源无法下载导致细节图标可能不同，根据效果可以调整提示词可要求使其迭代更改霍自行替换设计资源