内容
# 🎨 MCP Tailwind Gemini
为 Tailwind CSS 提供的高级模型上下文协议 (MCP) 服务器，集成了 Gemini AI，并支持跨平台的智能设计辅助。
[](https://github.com/Tai-DT/mcp-tailwind-gemini)
[](LICENSE)
[](https://nodejs.org/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
## 🌟 特性
### 🤖 AI 驱动的设计
- **智能组件生成**：使用 Gemini AI 创建复杂的 Tailwind 组件
- **智能优化**：基于 AI 的类优化和冲突解决
- **设计分析**：全面的设计质量评估及改进建议
- **主题创建**：在 AI 的帮助下生成统一的设计系统
### 🎨 Tailwind CSS 工具
- **组件生成器**：创建按钮、卡片、表单、导航、模态框和自定义组件
- **类优化器**：清理冗余类并解决冲突
- **CSS 转换器**：将现有的 CSS/SCSS 转换为 Tailwind 类
- **布局生成器**：为仪表板、登陆页面、博客等构建响应式布局
- **主题创建器**：生成自定义色彩调色板、排版和设计令牌
- **预览生成器**：可视化组件预览并支持截图功能
### 🌐 跨平台集成
- **多框架支持**：支持 React、Vue、Svelte、Angular，并自动转换组件
- **构建工具集成**：支持 Vite、Webpack、Next.js、Nuxt、SvelteKit 项目生成
- **IDE 扩展**：VS Code、WebStorm 插件，提供实时帮助
- **设计工具同步**：Figma 插件用于设计到代码的转换
- **通用部署**：CLI 工具、浏览器扩展和 API 集成
## 📦 安装
### 先决条件
- Node.js 18 或更高版本
- npm 或 yarn 包管理器
- Gemini API 密钥以启用 AI 功能
### 设置
1. **克隆仓库：**
```bash
git clone https://github.com/Tai-DT/mcp-tailwind-gemini.git
cd mcp-tailwind-gemini
```
2. **安装依赖：**
```bash
npm install
```
3. **构建项目：**
```bash
npm run build
```
4. **设置 Gemini AI（可选）：**
```bash
export GEMINI_API_KEY="your-api-key-here"
```
## 🔧 MCP 配置
### 对于 Cursor IDE
添加到你的 `~/.cursor/mcp.json`：
```json
{
"mcpServers": {
"mcp-tailwind-gemini": {
"command": "node",
"args": ["/path/to/mcp-tailwind-gemini/dist/index.js"],
"env": {
"GEMINI_API_KEY": "your_gemini_api_key_here"
}
}
}
}
```
### 对于 Claude Desktop
添加到你的 `claude_desktop_config.json`：
```json
{
"mcpServers": {
"mcp-tailwind-gemini": {
"command": "node",
"args": ["/path/to/mcp-tailwind-gemini/dist/index.js"],
"env": {
"GEMINI_API_KEY": "your_gemini_api_key_here"
}
}
}
}
```
**配置文件位置：**
- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
- **Windows**: `%APPDATA%\\Claude\\claude_desktop_config.json`
- **Linux**: `~/.config/Claude/claude_desktop_config.json`
### 替代配置（使用 npm）
```json
{
"mcpServers": {
"mcp-tailwind-gemini": {
"command": "npm",
"args": ["run", "start"],
"cwd": "/path/to/mcp-tailwind-gemini",
"env": {
"GEMINI_API_KEY": "your_gemini_api_key_here"
}
}
}
}
```
## 🛠️ 可用工具
### 组件生成
```javascript
{
"tool": "generate_component",
"description": "创建一个响应式按钮组件",
"type": "button",
"variant": "primary",
"size": "lg",
"framework": "react",
"responsive": true,
"accessibility": true
}
```
### 类优化
```javascript
{
"tool": "optimize_classes",
"html": "<div class=\"p-4 px-4 py-4 text-blue-500 text-blue-600\">内容</div>",
"removeRedundant": true,
"mergeConflicts": true
}
```
### 主题创建
```javascript
{
"tool": "create_theme",
"brandColor": "#3B82F6",
"style": "modern",
"colorCount": 9,
"includeConfig": true
}
```
### 设计分析
```javascript
{
"tool": "analyze_design",
"html": "<div>...</div>",
"checkAccessibility": true,
"checkResponsive": true,
"checkPerformance": true
}
```
### 预览生成
```javascript
{
"tool": "generate_preview",
"html": "<button class=\"bg-blue-500 text-white px-4 py-2 rounded\">按钮</button>",
"width": 800,
"height": 600
}
```
### CSS 转换
```javascript
{
"tool": "convert_to_tailwind",
"code": ".button { padding: 1rem; background: #3B82F6; }",
"format": "css",
"optimize": true
}
```
### AI 建议
```javascript
{
"tool": "suggest_improvements",
"html": "<div>...</div>",
"context": "电子商务产品卡片",
"focusAreas": ["accessibility", "performance", "ux"]
}
```
### 布局生成
```javascript
{
"tool": "create_layout",
"type": "dashboard",
"sections": ["header", "sidebar", "main", "footer"],
"complexity": "medium",
"framework": "react"
}
```
### Shadcn/ui 组件
```javascript
{
"tool": "get_shadcn_component",
"componentName": "button",
"includeDemo": true,
"framework": "react"
}
```
### 项目生成
```javascript
{
"tool": "create_project",
"projectName": "我的应用",
"framework": "react",
"typescript": true,
"components": ["button", "card", "form"],
"template": "dashboard"
}
```
## 🎯 用例
### 创建组件
生成生产就绪的组件，借助 AI 的帮助：
- 具有可访问性特征的现代按钮变体
- 具有适当间距的响应式卡片布局
- 带有验证样式的表单组件
- 采用移动优先设计的导航菜单
### 设计优化
通过智能分析改善现有设计：
- 移除冗余的 Tailwind 类
- 解决冲突的工具类
- 优化性能和可维护性
- 增强可访问性合规性
### 主题开发
构建全面的设计系统：
- 生成统一的色彩调色板
- 创建排版比例
- 设计间距系统
- 导出 Tailwind 配置文件
## 🌐 跨平台使用
### 多框架开发
```javascript
// 将 HTML 组件转换为任何框架
{
"tool": "generate_component",
"description": "现代按钮组件",
"framework": "react", // 或 "vue", "svelte", "angular"
"typescript": true,
"features": ["loading-state", "variant-support"]
}
```
### 通用项目生成
```javascript
// 使用任何技术栈创建全栈项目
{
"tool": "create_project",
"name": "我的应用",
"framework": "react",
"buildTool": "vite", // 或 "webpack", "nextjs", "nuxt"
"features": ["typescript", "tailwind", "testing", "deployment"]
}
```
## 🔧 开发
### 本地运行
```bash
# 开发模式，支持热重载
npm run dev
# 为生产构建
npm run build
# 启动生产服务器
npm start
```
### 测试 MCP 服务器
1. **使用 echo 命令测试：**
```bash
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list"}' | node dist/index.js
```
2. **使用简单工具调用测试：**
```bash
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "generate_component", "arguments": {"description": "一个简单的按钮", "type": "button"}}}' | node dist/index.js
```
3. **使用环境变量测试：**
```bash
GEMINI_API_KEY="your_key" node dist/index.js
```
### 环境变量
- `GEMINI_API_KEY`：你的 Google Gemini API 密钥（可选）
- `NODE_ENV`：环境模式（development/production）
### 项目结构
```
src/
├── index.ts # 主 MCP 服务器
├── tools/ # MCP 工具实现
│ ├── component-generator.ts
│ ├── class-optimizer.ts
│ ├── theme-creator.ts
│ ├── design-analyzer.ts
│ ├── preview-generator.ts
│ ├── css-converter.ts
│ ├── ai-suggestions.ts
│ └── layout-generator.ts
└── utils/
└── gemini.ts # Gemini AI 集成
```
## 🔧 故障排除
### 常见问题
1. **MCP 服务器未启动：**
- 确保你已先运行 `npm run build`
- 检查 `dist/index.js` 是否存在
- 验证 Node.js 版本是否为 18+
2. **Gemini API 错误：**
- 设置你的 `GEMINI_API_KEY` 环境变量
- 验证 API 密钥是否有效并具有适当权限
- 检查你的互联网连接
3. **Claude Desktop 无法连接：**
- 更新配置后重启 Claude Desktop
- 检查配置文件路径是否正确
- 验证 JSON 语法是否有效
4. **构建错误：**
```bash
# 清理并重建
rm -rf dist/ node_modules/
npm install
npm run build
```
### 调试模式
```bash
# 以调试日志运行
DEBUG=mcp:* node dist/index.js
```
## 🤝 贡献
我们欢迎贡献！请查看我们的贡献指南以获取详细信息。
### 开发设置
1. Fork 仓库
2. 创建功能分支
3. 进行更改
4. 如果适用，添加测试
5. 提交拉取请求
## 📄 许可证
MIT 许可证 - 详细信息请参见 LICENSE 文件。
## 🙋♂️ 支持
- **问题**： [GitHub Issues](https://github.com/Tai-DT/mcp-tailwind-gemini/issues)
- **文档**：查看本 README 中的示例
- **讨论**： [GitHub Discussions](https://github.com/Tai-DT/mcp-tailwind-gemini/discussions)
---
为 Tailwind CSS 和 AI 社区构建 ❤️
MCP 市场
