使用说明
双子座设计mcp
MCP服务器，通过Google Gemini API生成前端代码，内置CRO（转化率优化）原则。
为什么要为前端生成提供专用的MCP？
使用LLM编排器生成生产级前端需要大量 隐含 知识：框架约定、可访问性规则、CRO模式、设计令牌以及每个界面的视觉利害关系的正确模型。将所有这些内容塞进编排器的提示中，对于一个玩具应用程序来说是有效的——在一个真实的项目中，它会吃掉上下文窗口，并悄悄地降低推理质量。
此MCP旨在嵌入编排器驱动的工作流，如Claude Code，并解决了四个具体难题：
1.各项目之间零即时重复
系统提示、CRO原则、框架指南和模型选择逻辑 这里，与服务器进行版本控制。你的项目不会携带它们，也不会将它们粘贴到每个新的仓库中。更新MCP一次→ 每个项目都受益。编排器只是调用一个工具——它不需要知道 怎么 生成了良好的前端。
2.编排者的上下文保持干净
召唤 gemini_create_frontend 使编排器只需调用一次工具，而不是前端最佳实践的2k个令牌，不是设计系统的副本，也不是内联转储的生成输出。繁重的工作（大型系统提示、设计系统内容、完整代码生成）发生在Gemini的上下文中，而不是Claude的上下文中。你的编排器在40%的上下文使用阈值下停留的时间更长，这使得规划质量和工具选择准确性保持较高水平。
3.在不污染编排者的情况下进行示范仲裁
MCP公开了一个分层系统（预算/标准/质量/高级——请参阅 选型指南).编排者说 什么 建设；MCP决定 哪个 双子座模型符合视觉风险。从以下位置切换 gemini-2.5-flash 到 gemini-3-pro 因为英雄页面是一个参数更改，而不是提示重构。新模型通过在此处更新枚举一次来引入。
4.结构化、管道友好型输出
gemini_design_system 生成符合 谷歌实验室DESIGN.md规范 --可直接访问，可导出到Tailwind/DTCG代币，并可由下游代理读取。 gemini_cro_review 返回带有分数、问题和建议的JSON，而不是需要重新解析的散文。MCP的行为类似于构建管道中的节点，而不是黑盒。
它在Claude Code编排器中的位置
Claude Code orchestrator (lightweight, stays in planning mode)
│
├── @ui-architect (specifies UI, owns DESIGN.md)
│
├── gemini-design-mcp ← this server (heavy lifting isolated here)
│ ├── gemini_design_system (DESIGN.md generation)
│ ├── gemini_create_frontend (pages / views)
│ ├── gemini_snippet_frontend (reusable components)
│ ├── gemini_modify_frontend (edits existing UI)
│ └── gemini_cro_review (conversion audit)
│
├── @developer (wires business logic onto generated UI)
└── @reviewer (gatekeeps before merge)
MCP拥有 好的前端是什么样子的。您的编排者拥有 建造什么以及为什么这种分离使得设置可以跨多个大型项目进行扩展，而无需每个项目都拖动规则的副本。
特性
- 5个MCP工具 用于前端开发
- CRO首次设计 -所有生成的代码都遵循转换优化原则
- 多框架支持 -React、Vue、Svelte、HTML
- CSS灵活性 -顺风、shadcn/ui、香草CSS
- 设计系统集成 -生成和使用一致的设计令牌
安装
git clone https://github.com/ThomasHazera/gemini-design-mcp.git
cd gemini-design-mcp
npm install
cp .env.example .env
# Add your GEMINI_API_KEY to .env
使用Claude代码
claude mcp add gemini-design -e GEMINI_API_KEY=your_key -- npx tsx /path/to/gemini-design-mcp/src/index.ts
然后重新启动Claude Code以加载MCP。
可用工具
1. gemini_create_frontend
生成完整的页面或视图。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
description |
string | 必填 | 要创建什么 |
framework |
enum | react |
React、HTML、Vue、Svelte |
cssFramework |
enum | tailwind |
顺风、css、阴影 |
designSystemPath |
string | 可选 | 设计系统路径.md |
model |
enum | gemini-2.5-flash |
Gemini模型 |
responsive |
布尔值 | true |
移动优先设计 |
accessibility |
布尔值 | true |
WCAG 2.1 AA |
applyCroPrinciples |
布尔值 | true |
应用CRO指南 |
2. gemini_snippet_frontend
生成隔离的、可重用的组件。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
componentType |
string | 必填 | 模态、卡片、表格、表格、导航栏等。 |
description |
string | 必填 | 组件规格 |
framework |
enum | react |
目标框架 |
cssFramework |
enum | tailwind |
CSS方法 |
designSystemPath |
string | 可选 | 设计系统文件 |
model |
enum | gemini-2.5-flash |
Gemini模型 |
applyCroPrinciples |
布尔值 | true |
应用CRO指南 |
3. gemini_modify_frontend
修改现有前端代码。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
filePath |
string | 必需 | 要修改的文件 |
instruction |
string | 必填 | 要做哪些更改 |
framework |
enum | react |
文件框架 |
model |
enum | gemini-2.5-flash |
Gemini模型 |
4. gemini_cro_review
审核CRO问题的UI代码。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
filePath |
string | 可选 | 要分析的文件 |
code |
string | 可选 | 直接分析的代码 |
model |
enum | gemini-2.5-flash |
Gemini模型 |
退货： 分数（0-100）、严重性问题（严重/重大/轻微）、可操作建议。
5. gemini_design_system
生成一个完整的设计系统。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
projectDescription |
string | 必填 | 项目上下文 |
style |
string | 可选 | 简约、企业、俏皮等。 |
existingCssPath |
string | 可选 | 要分析的现有CSS |
framework |
enum | react |
目标框架 |
cssFramework |
enum | tailwind |
CSS方法 |
model |
enum | gemini-2.5-pro |
专业推荐 |
includeCroPrinciples |
布尔值 | true |
包括CRO模式 |
CRO原则
所有生成的代码都遵循以下用户至上原则：
- 价值实现时间 -消除摩擦，每场比赛一个目标
- 行动>解释 -互动学习而非被动学习
- 进度可见性 -展示进步，庆祝完成
- 空州 -首次行动指南，切勿留白
- 导游 -最多3-5步，始终可忽略
- 激活焦点 -为“顿悟时刻”而设计
来源： 入职培训技能
选型指南
经验法则：将模型与匹配 视觉赌注 界面。
目前最强大的型号(gemini-3-flash-preview 今天）应该使用
用于承载产品整体感觉或视觉质量的界面
直接影响转化/保留。
层级
| 层级 | 型号 | 成本（近似值） | 用途 |
|---|---|---|---|
| 预算 | gemini-2.0-flash-lite |
~0.075/1M代币 | 快速修复，微小的文本更改 |
| 标准 | gemini-2.5-flash |
约15美元/百万代币 | 默认 --表单、管理、CRUD、设置 |
| 质量 | gemini-2.5-pro |
~1.25/1M美元代币 | 设计系统生成，架构一致性 |
| 保费 | gemini-3-flash-preview |
每100万代币约0.50美元/3美元 | 英雄界面 --仪表板、入职、登陆、转换页面、主要数据 |
决策矩阵
| 接口类型 | 推荐型号 | 基本原理 |
|---|---|---|
| 主仪表板 | gemini-3-flash-preview |
第一印象，日常使用 |
| 入职/首次运行 | gemini-3-flash-preview |
转换关键 |
| 登录/营销页面 | gemini-3-flash-preview |
面向公众，品牌形象 |
| 数据可视化（英雄） | gemini-3-flash-preview |
复杂、高用户价值 |
| 设计系统生成 | gemini-2.5-pro |
整个应用程序的架构一致性 |
| 设置/配置文件 | gemini-2.5-flash |
实用性，视觉风险低 |
| 管理面板 | gemini-2.5-flash |
内部、职能重点 |
| 表单（CRUD） | gemini-2.5-flash |
标准图案 |
| 模态/吐司/警报 | gemini-2.5-flash |
体积小，可重复使用 |
| 简单组件修复 | gemini-2.0-flash-lite |
快速迭代 |
如果未指定，所有工具默认为
gemini-2.5-flash.通行证model: "gemini-3-flash-preview"当界面是产品的英雄界面时。
备注 --一旦
@google/genaiSDK迁移落地，高级版将从gemini-3-flash-preview（预览）到gemini-3-pro（GA）和违约gemini_design_system/gemini_create_frontend将相应地改变。
发展
npm run build # Compile TypeScript
npm run dev # Run in dev mode
许可证
麻省理工学院
