1.1、cursor添加figma mcp:
1、在figma中创建并复制token:
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"]
}
}
}
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
效果:
上是设计图,下是ai生成compose页面运行效果
注:
trae添加figma mcp步骤:(其余操作和cursor一致)
文件->首选项->设置->MCP->手动添加->复制保存json(和cursor的figma mcp的json一样)->提示成功