最近我在尝试一套非常实用的 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 的方案,代表了未来前端开发一个很有潜力的方向。