借助Magic UI + Magic UI MCP Server + Trea 构建网站

场景

场景: 目前claude code 还有一些其他的大模型, 在生成网站的时候时候. UI方面都有自己的想法, 即使有时候我们在项目规则里面或者项目设计规范明确指定,依旧很难去控制或者说很难达到自己的理想效果. 既然这样的话我们直接选择一套规范的UI组件进行开发设计. 所以我选择了 Magic UI. 还有一点如果让AI去生成,消耗的token肯定比引用的要多的多. 我们指定清楚之后,这大大减少了大模型的幻觉思考等等过程的token消耗.

Magic UI 是可重复使用组件的集合，您可以将其复制并粘贴到您的 Web 应用程序中。它主要包含用于创建登录页面和面向用户的营销材料的组件、块和模板。

下面我将从0到1 去从内容设计项目初始化使用context7 + Magic UI MCP服务去进行网站的构建.

Trea智能体创建

这样做的好处,在不同的业务/项目场景下使用不同的智能体去完成我们的业务/项目等等. 每个智能体专注自己所擅长的领域.

编写项目规则

rules 复制代码

使用规则
当需要使用shadcn组件时，使用Mcp服务器。

规划规则
当需要使用shadcn相关内容进行规划时：
在规划过程中使用Mcp服务器
尽可能在适用的地方使用组件
尽可能使用完整的功能块（例如：登录页面、日历）


实施规则


在实施时：
首先调用演示工具查看使用方法
然后正确地进行实施

安装magic ui mcp server

官方文档: magicui.design/docs/mcp

git地址: github.com/magicuidesi...

手动配置mcp

json 复制代码

{
  "mcpServers": {
    "@magicuidesign/mcp": {
      "command": "npx",
      "args": ["-y", "@magicuidesign/mcp@latest"]
    }
  }
}

生成内容

我们可以利用 gemini 2.5 去做内容生成这方面.

项目构建

1. 项目初始化一下

请使用context7获取magicui最新的内容,然后了解到如何初始化项目之后,使用正确的方式进行初始化. 如果context7,获取不到的, 就利用 playwright mcp 浏览官方网站进行获取magicui.design/docs/instal...

然后我们继续让他保持默认配置即可, 因为这边目前重点在于magic ui mcp 结合使用.

2. 开始构建

提示词: 基于目前初始化的项目(基础依赖已经安装). 根据我所提供的网站控台首页内容规划以及项目的规则约束,去完成首页Dashboard 开发.

可以看到他已经按照我们的约束,通过magic ui mcp 获取指定组件的最新的代码.

效果:

第一版效果还是蛮不错的, 毕竟直接复用的magic ui 组件. 相比于自己的描述或者简短描述去让ai自行开发的话这种效率还是很高的. 至少不会再在样式上面让ai调整来调整去.

继续扩展

我们打算使用 Rainbow Button (magic ui 提供的) 重构当前页面的按钮.

效果:

结语

使用magic ui 可以让我们在构建网站的时候有更加出色的效果. 同时借助官方提供的mcp服务,我们可以即时获取到最新的magic ui 组件的源码, 减少错误的出现率.