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

原创

用户11680974

修改于 2025-08-01 23:46:59

40800

代码可运行

运行总次数：0

代码可运行

最近我在尝试一套非常实用的 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 上开源，点这里。

安装很简单：

npx @jpisnice/shadcn-ui-mcp-server

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

npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_你的token

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

2. 编写规则文件 rule.mdc

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

示例内容：

@rule.mdc

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

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

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

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

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

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

比如我输入：

@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 配置文件，一条命令启动多个服务，自动分配端口，甚至支持本地域名访问，比如：

http://mcp.localhost
http://app.localhost
http://agent.localhost

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

举个简单示例 .servbay.js：

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',
    },
  },
};

启动命令：