设计稿转码实战：Cursor + Figma-Context-MCP

糟糕好吃
535 阅读5分钟

Figma-Context-MCP

插件介绍

github.com/GLips/Figma…

Figma-Context-MCP 插件是一个专为与 Cursor 等 AI 编码工具集成而设计的 Model Context Protocol (MCP) 服务器。它允许这些 AI 工具访问并解析 Figma 文件中的布局信息，从而提升设计到代码转换的准确性和效率。

使用指南
  1. 获取 Figma API 密钥‌：首先，你需要在 Figma 开发者平台上创建一个应用并获取 API 密钥。

image.png

image.png

image.png

  1. ‌配置 MCP 服务器‌：在 Cursor 的配置文件中添加对 Figma-Context-MCP 插件的引用。填入Figma API 密钥。
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "pnpm",
      "args": [
        "dlx",
        "figma-developer-mcp",
        "--figma-api-key=XXXXXX",
        "--stdio"
      ]
    }
  }
}

image.png 绿色表示安装mcp figma插件成功。

可以看到tools中有对应的两个工具：

  • get_figma_data：从提供的 Figma url 获取 UI 稿节点的结构化数据
  • download_figma_images：下载 UI 稿中的图片资源到本地

  1. ‌开始使用‌：

    在 Cursor中的mcp中开启，开启开关 image.png

功能一：在cursor右侧chat中粘贴figma链接访问设计稿。从提供的 Figma url 获取 UI 稿节点的结构化数据。

image.png

功能二：可以下载figma的素材到本地。（如icon、背景图等资源）

image.png

实战1: 积分任务

在figma社区中找到了一个免费的素材

www.figma.com/design/tYl8…

image.png

cursor初始化h5项目：

帮忙用react搭建移动端项目。组件库用antd mobile。

image.png

image.png

@https://www.figma.com/design/tYl8dmqOvucqW4KLDnC0qT/%E8%8A%92%E6%9E%9C%E5%9C%A8%E7%BA%BF-%E7%A7%BB%E5%8A%A8%E7%AB%AF2.0--Community-?node-id=1222-17667&p=f&t=PqePMMs9qGjfBVzs-0 

实现上述设计稿内容，完成页面开发，并合理拆分组件

image.png

image.png

image.png

效果：

image.png

需要下载figma素材。根据设计稿继续帮忙完善。@www.figma.com/design/tYl8…

image.png

image.png

基本完成设计稿70%

可以选中figma的某一节点信息，继续让cursor优化。

image.png

最终效果：

image.png

设计图： image.png

实战2: 问诊c端（taro项目）

需求：

image.png

  • prompt：

在test页面实现一个按钮，点击出现xxx组件库的Popup组件。样式文件用module.less文件。注意分析其他页面的实现，保持基本框架一致。包括使用的通用组件，通用样式等等。注意margin、padding、font-size、border-radious单位需要乘3。因为在taro项目中配置了三倍图。这些尺寸打包后会自动除以3.

image.png

image.png

实现效果：（5s+4s = 9s）9秒就能实现页面基本的搭建。

image.png

目前效果，根据设计稿继续优化。 需要优化的一些点： 非常愿意和非常不愿意在单独一行。和评分刻度不是一行。 评分刻度只有首尾两个元素有border-radious。中间的没有。

细化评分刻度、原因标签、输入框和提交按钮的样式，使其更接近设计稿图片。 调整了评分刻度的布局，使其数字均匀分布。 为选中的原因标签添加了蓝色边框，并相应调整了内边距。 为 textarea 添加了最小高度，并移除了默认内边距。textarea背景色调整灰色。 调整了提交按钮的高度和圆角，使其呈药丸状，并添加了水平内边距到其容器，使其在弹窗内容区域内居中。

image.png

image.png

根据figma设计稿再进行微调： textarea用@xxxx的组件。 非常愿意和非常不愿意在一行。在评分刻度上边。 调整评分刻度的高度。目前太高了。

image.png

image.png

总结：

taro项目中和ai交互时，要携带一些关键信息如：3倍图样式、组件库等等。请尽量包含以下关键信息：

1. 设计稿链接 + Node ID
  • 必须提供 Figma 文件链接；
  • 重点：标明要实现的 Frame 或组件的 Node ID（链接里的 ?node-id=xxx），这样能精确拿到尺寸、样式、文案等信息；
  • 示例：
https://www.figma.com/file/xxxxx/filename?node-id=123%3A456
2. 当前效果图 / 截图
  • 如果是样式/布局优化阶段，务必提供当前实现的截图，否则很难对比 UI 差异。
3. 功能和交互描述

除了静态样式，请明确描述交互行为，包括但不限于：

  • 按钮点击后做什么（弹窗/跳转/提交）；
  • 某些字段的校验规则（长度、是否必填等）；
  • 条件渲染逻辑（比如评分 0-6 显示更多输入项，7-10 隐藏）；
  • 标签是单选/多选？选中态长啥样？
4. 技术栈和约束说明
  • 使用的组件库（如 @xxx，写明具体组件名）；
  • 样式要求（使用 .module.less，禁止引入 Tailwind、styled-components 等）；
  • 尺寸规则（Figma 为三倍图，所有尺寸记得 * 3）；
  • 状态管理方案（Vuex / Pinia / Redux / Jotai 等）；
  • 文件放置路径（比如 src/pages/test/index.tsx 和对应 .module.less，不要新建目录）；
  • 是否已有通用组件可以复用（比如评分组件、弹窗等）。
5. 拆解结构 / 明确优化点

  • 如果 UI 比较复杂，可以拆分描述几个关键部分；

  • 若是样式优化，请清晰标出问题位置，比如：

    • 评分数字距离下方标签太近
    • 按钮圆角不对，设计是 12px，但现在是 4px
    • 非常愿意’文字没有居中对齐
6. 默认遵守以下规范
  • 项目统一使用 TypeScript；
  • 遵守 ESLint + Prettier 规则；
  • 所有代码需类型安全、命名清晰、易于维护。
举例

请根据 Figma 设计稿

[www.figma.com/file/xxxxx/…]

的 Node ID 节点，在 src/pages/test/index.tsx 中实现评分弹窗功能。

需要使用 @xxxxxx 里的 Popup 和 Textarea 组件。

样式写在 index.module.less 中，严格使用 .module.less 并遵守三倍图尺寸规则（全部尺寸 *3）。

当前实现效果如下：[截图链接]

需要优化以下几点：

  1. 评分数字没有居中；
  2. 标签 hover 状态样式不一致；
  3. 弹窗圆角应为 24px，当前为 16px。

资源推荐：

cursor rule推荐：cursor.directory/rules

cursor mcp插件市场：cursor.directory/mcp

avatar
文章
阅读
粉丝