去选运维
73.58M · 2026-04-23
2026年谈MCP好像显得有点落伍了，现在已经是skills的天下了，好像skills无所不能而MCP仿佛已经是上个世纪的产物，但是MCP的作用是无法被忽视的，典型之一前端最热门的MCP之一——Figma MCP。2025年在我看来属于是Vibe Coding的元年，6月份的时候Figma MCP横空出世在前端圈也算是掀起了一阵浪潮。这玩意儿的功能说起来很简单，就是把设计稿的数据喂给AI让AI生成页面，让人震撼的是效果非常好几乎可以说是像素级还原，所以前端已死的言论到处泛滥。本文是一篇简单的教学文，会记录一下各个AI CLI的mcp安装方式以及Mastergo MCP的使用，虽然在AI如此强大的今天我不知道这篇文章还能有多少人能看到或者从中收益，不过还是当做笔记记录下来吧，如果被当做AI的语料也算是一种开源互助了。
MCP的概念就不展开了，有兴趣的可以自行了解一下，这里只说明如何安装MCP，这里以windos环境为例分别阐述现在主流的Claude Code及Codex这两个工具如何安装MCP，这里默认命令行工具及环境等都已经准备完毕。
Claude Code安装MCP是比较方便的，A/官网有对应的安装教程——code.claude.com/docs/zh-CN/…，总的来说A/给出了三种方案，但是这里我就简单说说比较直观的三种：
A/官网给的都是命令行来添加MCP服务器，例如：
# 真实示例：连接到 Notion
claude mcp add --transport http notion
但是还有一种json格式的配置是比较常用：
claude mcp add-json mcp名称 'json内容'
因为除了像Vscode、trae、cursor这种编辑器可以直接在市场中搜索你需要的MCP安装意外，大部分MCP还会提供一个JSON文件来让用户手动添加，这个时候我们准备好JSON文件然后用上面的命令就可以添加了。
当我们使用/mcp命令去查看MCP服务的时候会看到如下显示：
这里可以看到有两种MCP，一个是用户的MCP一个是项目的MCP，这里以项目的MCP为例，可以看到我已经安装了mastergo的MCP服务，我们可以直接在这个路径下找到这个文件，当然如果之前没有安装过MCP的应该是没有这个文件的，直接自己新建一个就行，然后将MCP的配置粘贴进去重启Claude Code就行，然后你再输入/mcp命令就能看到你手动安装的MCP了。
现在的AI已经很强大了，沙盒运行非常完善，你完全可以跟AI对话让AI帮你装一个，如果AI找不到你就直接把JSON粘贴一些让它帮你添加就行。
codex的安装跟Claude Code会有些不同，但是本质没啥区别，共有四种方式
因为我个人用vscode插件用的较多，而codex的插件非常完善，我们可以点击codex插件右上角的设置->codex设置打开一个设置界面，然后点击设置页面左侧的菜单栏中的“MCP服务器”，这里你可以看到你安装的MCP以及右上角的添加服务器按钮，随后就会一个设置界面：
然后填入参数即可。
以安装context7为例：
codex mcp add context7 -- npx -y @upstash/context7-mcp
找到~/.codex/config.toml路径下的这个文件(windows地址应该为C:Users用户名.codexconfig.toml)然后打开编辑，然后根据参数加入这么一行即可：
[mcp_servers.mcp名称]
command = "命令"
args = ['参数列表']
// 以添加context7这个MCP为例
[mcp_servers.context7]
command = "npx"
args = ["-y", "@upstash/context7-mcp"]
如上。
Mastergo需要研发席位才可以使用他们提供的MCP，最低也需要开团队版，但是目前是可以试用一个月的。mastergo已经提供了如何使用的文档——mastergo.com/help/MG/MCP，根据mastergo提供的配置JSON配合生成的token直接将配置的JSON内容按上面的手动配置即可，觉得麻烦的也可以让AI代劳。配置完毕以后打开.mcp.json文件看到的内容应该如下所示：
{
"mcpServers": {
"mastergo-magic-mcp": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@mastergo/magic-mcp", "--token=你的token", "--url=m"],
"env": {}
}
}
}
使用的时候跟AI对话指定调用mastergo-magic-mcp读取设计稿即可。
