内容
# Shadcn 工作室 MCP 服务器
使用 Shadcn 工作室在几分钟内构建现代、生产就绪的 UI 块、组件和完整页面。无缝集成到您最喜欢的 IDE 中，并支持 React、Next.js 等最流行的框架。
## 🚀 什么是 Shadcn 工作室 MCP 服务器？
Shadcn 工作室 MCP 服务器是一个 [Shadcn AI](https://shadcnstudio.com/mcp) 构建工具，帮助您使用 Shadcn 工作室块创建、激发、完善和转换 Figma 设计成惊艳的、生产就绪的块、UI 组件和完整页面。它可以直接集成到您最喜欢的 IDE 中，实现快速高效的工作流程。
今天就免费试用 Shadcn 工作室 MCP 服务器。
## 🛠️ 安装
我们让安装变得非常简单！
1. 访问[安装指南](https://shadcnstudio.com/mcp/onboarding)，选择您的 IDE（VS Code、Cursor、Windsurf 等）。
2. 按照逐步说明在您的 IDE 中设置 MCP 服务器。
3. 免费开始使用 Shadcn 工作室 MCP 服务器。
### 快速设置（npx）
```json
{
"mcpServers": {
"shadcn-studio-mcp": {
"command": "npx",
"args": ["-y", "shadcn-studio-mcp"]
}
}
}
```
### 专业用户（带有 API 密钥和电子邮件）
```json
{
"mcpServers": {
"shadcn-studio-mcp": {
"command": "npx",
"args": ["-y", "shadcn-studio-mcp", "API_KEY=your-api-key", "EMAIL=your@email.com"]
}
}
}
```
> **注意：** 对于免费增值功能，不需要凭证。对于专业功能，`API_KEY` 和 `EMAIL` 都是必需的。
## 📒 文档
Shadcn 工作室 MCP 服务器设计为直观易用。命令简单直接，允许您快速创建、激发、完善和转换 Figma 设计为 UI 块。
有关如何使用 Shadcn 工作室 MCP 服务器的详细文档，请参阅 [Shadcn 工作室 MCP 文档](https://shadcnstudio.com/docs/getting-started/shadcn-studio-mcp-server)。
## 🔧 用法
Shadcn 工作室 MCP 服务器提供四种主要工作流程：
| 命令 | 描述 | 用例 |
|---------|-------------|----------|
| `/cui` | 创建 UI | 从现有的 Shadcn 工作室块中自定义和安装 |
| `/iui` | 激发 UI | 生成新的、创意的 UI 块，灵感来自现有的块 |
| `/rui` | 完善 UI | 完善、编辑或主题化现有的块或页面 |
| `/ftc` | Figma 到代码 | 将 Figma 设计块直接转换为 Shadcn 工作室块 |
在这里查看完整文档：[Shadcn 工作室 MCP 文档](https://shadcnstudio.com/docs/getting-started/shadcn-studio-mcp-server)。
### 示例
**创建 UI（`/cui`）：**
```
/cui 为 eLearning Academy 网站创建一个英雄板块。
/cui 为我的 SaaS 目标页面创建一个功能板块。
/cui 创建一个带有每月/年切换的定价板块。
```
**激发 UI（`/iui`）：**
```
/iui 为我的 AI SaaS - AI 视频生成器创建一个英雄板块。
/iui 为我的生产力应用程序创建一个功能板块。
/iui 构建一个受现代设计趋势启发的评价板块。
```
**完善 UI（`/rui`）：**
```
/rui 更新主题为 Modern Minimal。
/rui 将“Get Started”按钮替换为登录和注册按钮。
/rui 更新定价卡为动态 3D 悬停卡。
/rui 更新登录按钮为动画涟漪样式。
```
**Figma 到代码（`/ftc`）：**
```
/ftc 使用 shadcn/studio 块为选定的 Figma 框架生成代码
/ftc 为此设计安装匹配的 shadcn/studio 块
```
## 📚 文档和资源
- [官方文档](https://shadcnstudio.com/docs/getting-started/shadcn-studio-mcp-server)
- [安装指南](https://shadcnstudio.com/mcp/onboarding)
- [Shadcn 工作室块](https://shadcnstudio.com/blocks)
- [Shadcn 工作室组件](https://shadcnstudio.com/components)
- [Shadcn 工作室主题](https://shadcnstudio.com/theme-generator)
- [首页](https://shadcnstudio.com)
## 社区 🤝
加入 Shadcn 工作室社区，讨论库，提问和分享您的经验：
- 🐦 [在 Twitter 上关注我们](https://x.com/ShadcnStudio)
- 💬 [在 GitHub 上讨论](https://github.com/shadcnstudio/shadcn-mcp-server/discussions)
- 🎮 [加入我们的 Discord](https://discord.com/invite/kBHkY7DekX)
## 贡献 📝
修复一个错误或添加一个新功能。您可以提出一个拉取请求，并在 Shadcn 工作室 MCP 的下一个版本中看到您的代码。
在提出拉取请求之前，请查看 **[贡献指南](https://github.com/shadcnstudio/shadcn-studio/blob/main/CONTRIBUTING.md)**。
