双子座-MCP服务器
项目介绍
<div align="center">
<div align="center">
Gemini UI 设计服务器
企业级UI/UX设计与前端实现专家
MCP服务器 · Gemini 2.5 PRO · 企业架构
🎯 专门用于UI/UX设计及前端架构的人工智能代理
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
集成Google Gemini 2.5 PRO作为世界级的UI设计师，
通过MCP协议在Warp终端中从Claude AI访问
🏗️ 架构概述
专为企业级UI/UX设计构建的MCP服务器，通过Gemini 2.5 PRO提供专业能力。架构旨在实现Warp终端代理开发环境中Claude到Gemini之间的无缝通信。
核心功能
┌─────────────────────────────────────────────────────────────┐
│ GEMINI 2.5 PRO UI设计专家 │
├─────────────────────────────────────────────────────────────┤
│ ► 设计UI组件 - 企业级组件 │
│ ► 审查实现 - WCAG AAA合规性 │
│ ► 生成前端代码 - 生产就绪工件 │
│ ► 架构咨询 - 可扩展系统设计 │
│ ► 品牌身份设计 - 一致的视觉系统 │
└─────────────────────────────────────────────────────────────┘
🚀 快速开始
先决条件
- Node.js ≥ 18.0.0
- Warp终端（最新版本）
- Gemini API密钥 → 获取密钥
安装
git clone https://github.com/bobvasic/gemini-ui-design-server.git
cd gemini-ui-design-server
npm install
chmod +x index.js setup.sh
配置
方法1：自动设置
./setup.sh YOUR_GEMINI_API_KEY
方法2：手动配置Warp MCP
添加到~/.config/warp/mcp.json：
{
"mcpServers": {
"gemini-ui-designer": {
"command": "node",
"args": ["${HOME}/gemini-ui-design-server/index.js"],
"env": {
"GEMINI_API_KEY": "YOUR_API_KEY_HERE"
}
}
}
}
重启Warp终端以激活。
🎨 工具参考
design_ui_component
采用无障碍优先方法的企业级组件设计
{
component_type: string; // 按钮、表单、卡片、导航、英雄
requirements: string; // 详细规格、品牌、无障碍
framework?: string; // React、Vue、Angular、Svelte
design_system?: string; // Material、Tailwind、自定义
}
review_ui_implementation
具有WCAG合规验证的专业代码审查
{
code: string; // 要分析的前端代码
framework?: string; // React、Vue、Angular
review_focus?: enum; // 可访问性 | 性能 | UX | 视觉设计 | 响应式 | 所有
}
generate_frontend_code
支持TypeScript的生产就绪代码生成
{
specification: string; // 详细的实施要求
framework?: string; // React、Vue、Angular、Svelte
styling_approach?: string; // Tailwind、CSS模块、Styled组件
typescript?: boolean; // 默认值：true
}
ui_architecture_consultation
面向可扩展系统的战略前端架构指导
{
project_context: string; // 规模、团队、约束
consultation_topic: enum; // 组件架构 | 状态管理
// 设计系统 | 性能 | 测试 | 部署
}
brand_identity_design
创建一致的品牌身份和设计系统
{
brand_requirements: string; // 价值观、受众、行业、情感
deliverables?: string; // 色彩调色板、排版、组件、间距
}
🔧 技术规范
<table> <tr> <td width="50%">协议架构
- MCP SDK 1.0.4
- 标准I/O传输层
- JSON模式验证
- 异步/等待事件循环
AI模型配置
- 模型：
gemini-2.5-pro - 温度：0.7
- 最大令牌数：8192
- 优化提示工程
集成模式
┌──────────────┐ MCP协议 ┌─────────────────┐
│ Claude AI │ ←──────────────────→│ Gemini 2.5 PRO │
│ (Warp IDE) │ UI/UX咨询 │ (UI设计师) │
└──────────────┘ └─────────────────┘
↓ ↓
开发 设计规范
实现 组件架构
代码生成 品牌系统
📋 提示工程
Gemini 2.5 PRO提示是根据Google官方最佳实践设计的：
✓ 结构化角色定义 - 明确专家角色建立
✓ 上下文规范 - 全面的需求框架
✓ 交付物分类学 - 明确的输出结构定义
✓ 约束声明 - WCAG、性能、框架需求
✓ 质量门控 - 企业级、生产就绪指令
🔒 安全架构
- 零凭据硬编码 - 环境变量隔离
- API密钥验证 - 启动时快速失败验证
- 错误净化 - 错误消息中无敏感数据
- 依赖审计 - 0漏洞（已验证）
📚 文档
- SECURITY.md - 安全政策和最佳实践
- CONTRIBUTING.md - 贡献指南
- AUDIT_REPORT.md - 生产就绪认证
🎯 使用场景
| 场景 | 工具链 |
|---|---|
| 组件库 | design_ui_component → generate_frontend_code → review_ui_implementation |
| 设计系统 | brand_identity_design → ui_architecture_consultation → generate_frontend_code |
| 代码优化 | review_ui_implementation → 重构 → review_ui__implementation |
| 架构规划 | ui_architecture_consultation → design_ui_component → generate_frontend_code |
🧪 测试
# 验证安装
export GEMINI_API_KEY="your-key"
npm start
# 预期输出："Gemini MCP服务器正在stdio上运行"
# 通过Warp中的Claude测试
# 调用工具：gemini-ui-designer/design_ui_component
📞 支持
技术问题 → GitHub问题
安全顾虑 → info@cyberlinksec.com
企业咨询 → CyberLink Security
📄 许可
MIT许可 - 版权所有 © 2025 CyberLink Security
<div align="center">
为企业级UI/UX开发打造
由CyberLink Security设计 | 由Gemini 2.5 PRO驱动
</div>