UI 代码不写也行?我用 MCP Server 和 ShadCN 自动生成前端界面

最近我在尝试一套非常实用的 AI + UI 开发流程,彻底改变了我写界面的方式。以往写 UI,动手敲代码很累,修改也费时。而这次,借助一个叫 MCP Server 的工具,配合 AI 辅助,让 AI 理解组件用法、结构,直接帮我生成高质量的界面代码。

这套流程的亮点在于:**上下文丰富,规则明确,定制灵活,且多服务开发环境能高效管理。**本文我将分享具体操作步骤和实战经验,同时也聊聊多服务本地开发的那些痛点,顺带介绍一个我用的轻量级本地开发平台 ServBay,帮你一键搞定多个服务启动和端口管理。


为什么 AI 生成 UI 总是不尽人意?

现在很多开发者都用 Cursor、Claude 这类 AI 代码辅助工具,输入一句"帮我写登录页",马上就出一堆代码。

但是成品往往不符合预期:

  • 组件排布乱,样式冲突
  • 用错组件,功能不完整
  • 代码零散,难维护

根本原因是:AI 缺少上下文

它根本不懂你用的组件库(比如 ShadCN UI)结构和用法,只是简单"堆积代码片段",没法理解组件间的组合逻辑。


MCP Server 是什么?

MCP Server(Model-Component-Protocol Server)就是为了解决这个问题诞生的。它本质上是一个 Node 服务,能把组件库的结构、用法、依赖关系,封装成 AI 能理解的接口。

举个例子:

  • 它能告诉 AI:"这个按钮组件需要哪些参数,有什么示例用法。"
  • "这个表单组件怎么嵌套输入框,怎么触发提交。"
  • "某个布局块包含哪些子组件。"

这样,AI 就能根据真实规则,准确调用组件,不再乱拼。


我的具体三步工作流

1. 搭建 ShadCN UI MCP Server

MCP Server 的源码在 GitHub 上开源,点这里

安装很简单:

bash 复制代码
npx @jpisnice/shadcn-ui-mcp-server

建议绑定 GitHub 个人访问令牌,提升请求配额:

sql 复制代码
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_你的token

启动后,AI 客户端(比如 Cursor)可以访问它的接口,获取组件列表、示例代码、依赖元信息。

2. 编写规则文件 rule.mdc

rule.mdc 是定义 AI 生成流程的关键"剧本"。

示例内容:

arduino 复制代码
@rule.mdc

我想用 ShadCN UI 组件构建一个现代网站,先做登录页,包含邮箱、密码输入框和登录按钮。  
登录成功后跳转到仪表盘页面,仪表盘有卡片布局,每张卡片展示 MCP Server 的信息。  

请帮我列出需要用到的关键组件和页面结构。  
按顺序实现,保持代码风格一致,便于扩展和维护。

这文件会告诉 AI 要做什么、怎么做、用哪些组件、执行顺序,避免 AI 乱写。

3. 用 Cursor 结合 MCP Server 生成代码

Cursor 是个强大的 AI 代码助手,能集成 MCP Server。

你只要在 Cursor 设置中添加 MCP Server 地址和令牌,AI 就会自动用 MCP Server 提供的组件上下文生成代码。

比如我输入:

css 复制代码
@rule.mdc

Cursor 会根据规则,调用 MCP Server 接口,解析组件结构,生成符合规范的代码。

这过程 AI 不再"瞎写",而是一步步按照规则文件和组件说明搭建页面。

4. 用 TweakCN 定制样式

ShadCN UI 默认样式美观,但很多项目会撞款。

TweakCN 是一个可视化主题编辑器,可以在浏览器里拖拽调色、调整间距、字体,实时预览。

编辑好主题后,导出配置,直接装到项目里。

这样,生成的界面不仅"对",还更有个性。


多服务本地开发的困境和解决方案

我们说了 AI 生成 UI 是未来趋势,但实际开发环境中,经常是多服务并行跑:

  • MCP Server
  • AI Agent(Cursor、Claude)
  • Next.js 本地开发服务器
  • Mock API 服务

每个都要单独启动,端口还得记,窗口一多,新人根本不知道先开哪个。

这是大多数开发者的痛点。


ServBay 轻量级本地多服务管理工具

ServBay 是我近期发现的本地开发利器。

它可以通过 .servbay.js 配置文件,一条命令启动多个服务,自动分配端口,甚至支持本地域名访问,比如:

arduino 复制代码
http://mcp.localhost
http://app.localhost
http://agent.localhost

同时,ServBay 还能自动配置服务间路由,避免跨端口通信问题。

举个简单示例 .servbay.js

yaml 复制代码
module.exports = {
  services: {
    mcp: {
      command: 'npx',
      args: ['@jpisnice/shadcn-ui-mcp-server', '--github-api-key', 'ghp_你的token'],
      port: 3001,
      domain: 'mcp.localhost',
    },
    app: {
      command: 'npm',
      args: ['run', 'dev'],
      port: 3000,
      domain: 'app.localhost',
    },
    agent: {
      command: 'cursor',
      args: [],
      port: 3002,
      domain: 'agent.localhost',
    },
  },
};

启动命令:

sql 复制代码
servbay start

所有服务自动就绪,省去切换窗口、记端口的烦恼。


总结

  • AI 生成高质量 UI 的关键,是给 AI 充分的组件上下文,MCP Server 就是解决这点的利器。
  • 规则文件让 AI 有章可循,不再随意拼凑代码。
  • 主题定制工具 TweakCN 让界面更加个性化。
  • 多服务开发环境复杂,但 ServBay 这样统一管理工具能显著简化启动流程、端口管理和跨服务调用。

这套结合 MCP Server、AI Agent、ShadCN UI 及 ServBay 的方案,代表了未来前端开发一个很有潜力的方向。

参考链接

相关推荐
奕辰杰3 小时前
关于npm前端项目编译时栈溢出 Maximum call stack size exceeded的处理方案
前端·npm·node.js
JiaLin_Denny4 小时前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包
路光.5 小时前
触发事件,按钮loading状态,封装hooks
前端·typescript·vue3hooks
我爱996!5 小时前
SpringMVC——响应
java·服务器·前端
咔咔一顿操作6 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹6 小时前
用el-table实现的可编辑的动态表格组件
前端·vue.js
漂流瓶jz7 小时前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
换日线°7 小时前
css 不错的按钮动画
前端·css·微信小程序
风象南7 小时前
前端渲染三国杀:SSR、SPA、SSG
前端
90后的晨仔8 小时前
表单输入绑定详解:Vue 中的 v-model 实践指南
前端·vue.js