准备工作

1. TraeCN编辑器
2. MasterGO
3. 你已经在TraeCN编辑安装好了mastergo-magic-mcp，如果没有可以参看我的《Trae国内版编辑器Solo模式结合MCP使用体验》
4. MasterGO自己创建的团队必须是团队版以上，本文发布的时候是可以免费升级团队或者企业的（30天）

开启正题

一、从 Mastergo 市场找一个开源的设计导入到团队项目

Mastergo资源社区，我们选择第二个《Shadcn UI Kit for MasterGo》

点击创建副本

然后把设计下载到本地

然后回到团队的dashboard页面，选择导入文件，把刚下载的 Shadcn UI Kit for MasterGo.mg页面导入

然后双击进入到项目中

二、在Trae中生成100%的页面

1. 我先准备个项目

因为我选择的是 Shadcn 组件，就用 Shadcn & NextJS项目，可以使用下面的命令自动生成

pnpm dlx shadcn@latest init

安装完依赖之后我启动页面，启动后默认的首页如图

我选择个页面更换掉app/page.tsx这个首页，下面是我选择的页面

需要注意的是，你的项目必须是在团队项目下，然后你选中要生成的页面，选中之后会在地址栏有对应的连接如下图，这三点缺一不可，不然会有问题。只需要复制地址栏的连接即可
https://mastergo.com/file/184327559943172?fileOpenFrom=project&page_id=0%3A0&layer_id=193%3A475721

然后，我们在TraeCN的智能体对话框中输入，
这个图中page.tsx，使用#或者点击对话框的#选择到想改的文件即可

可以看到下图中，mcp服务去获取了你上面贴的连接的DSL数据

剩下就是静静的等待，angent运行完之后，发现终端有个小的报错
⨯ Error: Invalid src prop (https://image-resource.mastergo.com/141528087684889/141528087684891/bb395baadfeda8c3753bb40cbfd8c9e7.png) on next/image, hostname “image-resource.mastergo.com” is not configured under images in your next.config.js，
这个其实image-resource.mastergo.com这个地址没有加白，选中点击添加到对话框，让Agent解决下，如果你很熟悉NextJS的话，可以手动在next.config.js中添加

const nextConfig: NextConfig = {
  images: {
    domains: ["image-resource.mastergo.com"],
  },
};

然后报错解决，我截图下本地启动的改造的页面

百分百还原，而且使用的是shadcn生成的项目的tailwindcss，而不是自己自由发挥的添加style

给自己记个TODO

后续负责的项目要有整个项目的UI美化，我到时候会使用这个方式实际在复杂的项目中测试下，敬请期待