AI编程+智能体+MCP，言出法随的新境界

Vibe Coding 和 MCP 都是最近特别流行的概念。

Vibe Coding，氛围编程，是代码生成的言出法随，想要什么功，就让AI写出审美代码。

MCP，大模型上下文协议，是工具调用的言出法随，需要什么工具就把叫它过来一起干活。

而如果把两者结合，会碰撞出怎样的火花？

先来看一段录屏，这是我花了十分钟写出来的一个探索大理的网页：

设计、开发、生成配图、添加动效，全部都是用我指挥 AI 用内置的智能体+MCP 完成，自己一行代码不用写，一行提示词都不用写。

这两天，Trae 的新版更新了一堆新功能，支持了强大的自定义智能体和 MCP，同时还支持了自定义规则和网页浏览功能，变得非常好用。

我就以 Trae 为例写了这份入门级教程，希望能带你进入这个言出法随的世界。

Trae 的下载和安装

Trae 是字节出品的 AI 编程工具，产品交互设计得非常好，用起来很简单，我们直接去官网下载

https://sourl.cn/5p7ePD

下载好之后，安装软件并启动就能用了。

我们看到新版已经支持了智能体和 MCP，这两个功能都非常实用，我们在后面会详细讲解。

另外 Trae 的国内版最近一个特别棒的更新是支持了添加自己的模型啦。编程方面最强的还是 Claude，我们这次也用它来实战。如果你用的是 Trae 的海外版，它已经自带了 Claude，开箱即用。

MCP 的初始配置

如果你在之前已经配置好了本地的 MCP 服务，可以跳过这一步，接着往下看。

如果没有配置过，还是要配置一下，不然你到软件里直接配置 MCP ，一运行就会提示你，根本就没有这个文件。

配置方面，这里我参考了藏师傅的两篇大型MCP教程，在文末有参考链接。

他写的已经很好了，但我实际跑的时候还是遇到了坑，感谢藏老师手把手地教，我也把其中的心得补充在这里。

MCP 的两种模式

MCP 现在一共有两种模式，SEE 和 Stdio：

SEE 的配置方式非常简单，只有一个链接，基本上都是 Stdio 的方式，然而这种 MCP 很少。

Stdio 是主流的 MCP 方式，我们要用 MCP，肯定要搞定它。

搞定它安装2个命令行工具：

一个是 uvx，一个是 npx。

UVX 的安装

uvx 我们需要安装 uv：

Windows 用户：可以按“Win”键，点击搜索后输入"PowerShell"，然后右键选择“以管理员身份运行”，粘贴下面的命令回车就行，运行完记得重启。

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

Mac 用户，点击“启动台”搜索“终端”应用，然后输入下面的代码回车就行。

curl -LsSf https://astral.sh/uv/install.sh | sh

这时候你大概率会遇到一个坑：

这是因为这个网址访问不了。

请自行开启科技，并打开全局+增强模式，多试几次。

NPX 的安装

Npx 的安装就比较简单了，只需要安装 Node.js 就行，访问官网（https://nodejs.org/）点击下载正常安装就行。

恭喜你，终于安装完了 MCP 的基础工具，在这里你已经超过了 99.99% 的人。

为你感到骄傲。

最难的部分已经过去了，接下来让我们打开 Trae，开始安装我们需要的 MCP。

添加 Figma 的 MCP

Figma 是最流行的设计工具，Figma 的 MCP 可以把 Figma 文件导入到 AI 编程工具里，让 AI 根据设计稿做出还原度很高的代码。

我们首先在 Trae 右上角的【AI 功能管理】中，找到 MCP 并打开。

然后在 MCP 市场找到 Figma

Trae 为一些 MCP 做了人性化的适配，你会看到【轻松配置】的标志，这种配置非常简单，只需要填入自己的 Figma Token，点击确认就配置完成了。

那 Figma Token 去哪里找呢？

先到 Figma 首页，左上角你的名字，点击名字，找到 Settings 设置。

然后切换到 Security 安全设置里，找到 Generate new token

然后，在生成token的界面，输入名字，并把下面所有的权限都打开，然后保存，就获得了token。

添加 MiniMax 的 MCP

MiniMax 的 MCP 可以直接调用 MiniMax 的文本、音频、图片、视频模型来生成内容，用来做网页非常方便。

MiniMax 的 MCP 还没上到市场，点击这里的手动配置

然后把这段代码粘贴进去，保存

{  "mcpServers": {    "MiniMax": {      "command": "uvx",      "args": [        "minimax-mcp"      ],      "env": {        "MINIMAX_API_KEY": "你的 API key",        "MINIMAX_MCP_BASE_PATH": "/Users/替换用户名/Documents/minimax_mcp",        "MINIMAX_API_HOST": "https://api.minimaxi.chat",        "MINIMAX_API_RESOURCE_MODE": "local"      }    }  }}

需要配置的地方有两个

1.配置API key，去 Minimax 的后台充值一点钱，得到 API key：

https://platform.minimaxi.com/user-center/basic-information/interface-key

2.配置生成内容的存储地址，如果是mac，你就把用户名替换成你的电脑用户名，然后在文稿里新建个文件夹，命名为minimax_mcp就行。Windows的话，自己复制下路径，替换这里的路径。

好了，到这里，我们的配置全部完成，后面就都很轻松了。

项目实战开始

探索大理的网页

接下来我们看看如何一步一步地做出文章开头演示的这个网页。

第一步，我们先创建一个智能体。

智能体的的好处是能固化提示词，能让所有的网页做出来都有高级且一致的风格。

还能在智能体里配置MCP，强强组合。这里我们勾选 MiniMax 和 Figma 的 MCP。

智能体的 Prompt 是这样的，直接复制即可，也可以自由修改你喜欢的风格：

审美极好的程序员，喜欢用一个网页页面进行可视化展示

网页生成要求是：

根据上面内容生成一个 HTML 动态网页

使用Bento Grid风格的视觉设计，纯黑色底配合亮橙色颜色作为高亮
强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
中英文混用，中文大字体粗体，英文小字作为点缀
简洁的勾线图形化作为数据可视化或者配图元素
运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
模仿 apple 官网的动效，向下滚动鼠标配合动效
数据可以引用在线的图表组件，样式需要跟主题一致 7. 使用 Framer Motion （通过CDN引入）
使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
避免使用emoji作为主要图标
不要省略内容要点

我们在 Trae 的输入框，可以选择或者@智能体。