背景：产品大牛使用Figma设计的原型怎样高质量还原呢？

注意：claude mcp add -s user ... 可以添加到当前用户全局配置, 无需每个项目都添加

一、figma mcp

背景：使用figma mcp与cursor联动。生成程序页面效果不佳，大佬推荐用新的mcp工具。进行测试。已配置了cursor使用mcp与figma联动开发。尝试使用claude code测试效果

参考framelink ai figma mcp进行配置。链接来自figma-mcp-github链接

claude code mcp配置

• 使用环境：windows wsl

claude mcp add "Framelink_Figma_MCP" -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

• 测试可用

二、mysql mcp

这里有两种方式

• smithery 提供的联网mcp服务, 测试可用。访问smithery

设置apikey, 登录后访问链接https://smithery.ai/account/api-keys

好处为apikey值需联网使用。需要在网上配置好数据库
选择你想使用的MCP

这里我用的第二个https://smithery.ai/server/@dpflucas/mysql-mcp-server
进入后可以通过搜索对应的AI编程工具获取MCP的配置具体代码

获取到claude code mcp的添加脚本

claude mcp add "mysql" -s user -- npx -y @smithery/cli@latest run @dpflucas/mysql-mcp-server --key ce49d3****c9c --profile large-coyote-44DCbt

在claude code 上执行即可

通过输入**/mcp**即可查看

• 本地安装node模块，本地测试failed, 暂未查原因

claude mcp add mysql -s project -e MYSQL_HOST=118.****.156 -e MYSQL_PORT=***06 -e MYSQL_USER=ry_vue -e MYSQL_PASSWORD=****4 -e MYSQL_DATABASE=n***o -- npx -y @modelcontextprotocol/server-mysql

三、notion

smithery

smithery notion

1.copy链接

2. 在claude code中执行即可

claude mcp add --transport http notion "https://server.smithery.ai/notion/mcp?profile=large-coyote-44DCbt&api_key=ce49d***********9c"

总结

1. 通过smithery配置mcp方便使用，目前只是用了mysql.
2. figmamcp的使用也很方便。mcp的质量也会影像开发效果。还有一篇关于提升页面质量和效率的文章也可以一看：使用Figma mcp联动开发记录提升前端程序开发质量的方式