cursor/trae+figma mcp生成android compose页面

143 阅读2分钟

1.1、cursor添加figma mcp:

1、在figma中创建并复制token:

image.png

image.png  

 

 

2、打开cursor,ctrl+shift+p打开mcp配置->搜索MCP->点击Open MCP Settings->点击NEW MCP Server->添加figma mcp的json->把YOUR_TOKEN换成figma的token->保存后看控制台如果没报错并且显示绿点,表明mcp配置成功

{

  "mcpServers": {

    "Framelink MCP for Figma": {

      "command": "cmd",

      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR_TOKEN", "--stdio"]

    }

  }

}

image.png

image.png

image.png  

image.png

 

1.2、cursor+figma mcp生成android页面的提示词:

 

1、已经有项目,只生成一个compose页面:

请生成一个compose页面,要求如下:

1、我上传了一张设计图的截图(视觉标准),同时请你通过 Figma MCP 读取这个链接的数据(仅作为文案和颜色参考):www.figma.com/design/lmZo…

2、布局请完全依据截图: Figma 源文件的图层结构非常混乱,请忽略 Figma 的图层嵌套关系,只看截图来决定是用 Column 还是 Row。

3、数据请依据 Figma: 虽然忽略结构,但请从 Figma 数据中提取准确的 Text 内容、Color Hex 值和字体大小,应用到代码中。

4、如果能取到figma图片,请下载保存到android的图片路径:D:\dev\code\figmaMcpDemo\android\app\src\main\res\mipmap-xhdpi目录下,如果取不到图片,请预留图片位置进行占位

5、请生成 Android Compose 代码,还原截图的视觉效果。

 

2、没有项目,生成一个compose页面,并且可运行的app工程:

 

请生成一个可运行的android工程,并生成一个compose页面,要求如下:

1、工程名称:AudioSnap

2、我上传了一张设计图的截图(视觉标准),同时请你通过 Figma MCP 读取这个链接的数据(仅作为文案和颜色参考):www.figma.com/design/lmZo…

3、布局请完全依据截图: Figma 源文件的图层结构非常混乱,请忽略 Figma 的图层嵌套关系,只看截图来决定是用 Column 还是 Row。

4、数据请依据 Figma: 虽然忽略结构,但请从 Figma 数据中提取准确的 Text 内容、Color Hex 值和字体大小,应用到代码中。

5、如果能取到figma图片,请下载保存到android的图片路径:D:\dev\code\figmaMcpDemo2\AudioSnap\app\src\main\res\mipmap-xhdpi目录下,如果取不到图片,请预留图片位置进行占位

6、请生成 Android Compose 代码,还原截图的视觉效果。

7、请生成一个android工程并编译成功

 

 

其中第1步获取figma的设计图链接操作:

ctrl选中设计图->右键->Copy/Paste as->Copy link to selection

image.png

 

效果:

上是设计图,下是ai生成compose页面运行效果

image.pngimage.png

 

image.png

  image.png

注:

trae添加figma mcp步骤:(其余操作和cursor一致)

文件->首选项->设置->MCP->手动添加->复制保存json(和cursor的figma mcp的json一样)->提示成功