UI设计MCP
通过MCP进行AI驱动的前端设计——从自然语言生成高级UI组件、页面和设计系统。
它的作用
此MCP服务器将自然语言转换为生产级前端代码：
- 完整页面（仪表板、登录页面、设置等）
- 具有卓越设计质量的UI组件
- 设计具有一致令牌的系统
- 对现有组件进行手术修改
- 集成到现有项目中的代码片段
工具
| 工具 | 说明 |
|---|---|
generate_vibes | 为新项目生成5个设计氛围选项 |
create_frontend | 创建具有高级设计的新页面或组件 |
modify_frontend | 重新设计特定的UI元素（手术查找/替换） |
snippet_frontend | 生成JSX/HTML代码段以插入到现有代码中 |
先决条件
- Node.js >= 18
- DjionDev API密钥 --得到你的在 djioni.dev/products/ui-design-mcp
安装
npm install -g @djionidev/ui-design-mcp配置
克劳德代码
claude mcp add ui-design --env DJIONI_API_KEY=djd_live_your-key -- npx -y @djionidev/ui-design-mcp克劳德桌面/光标/风帆
{
"mcpServers": {
"ui-design": {
"command": "npx",
"args": ["-y", "@djionidev/ui-design-mcp"],
"env": {
"DJIONI_API_KEY": "djd_live_your-key-here"
}
}
}
}用法
新项目（推荐流程）
- 问：“为我的SaaS仪表板生成设计氛围”
- 选择你最喜欢的氛围
- 问：“创建一个具有所选氛围的定价页面”
- 接收完整的样式化代码
现有项目
将CSS/主题文件作为上下文传递，以便生成的代码与您的设计系统相匹配：
“创建与我现有设计匹配的设置页面”
设计系统
在第一页上，设置 generateDesignSystem: true该工具返回代码和完整的设计系统（颜色、排版、间距、按钮、输入、卡片）。另存为 design-system.md 在项目根目录下，所有后续页面都将自动匹配。
计费
每成功一代消费1个积分。首先使用您的月度计划积分，然后使用一次性充值的任何奖励积分。当您用完时，该工具会返回一个清晰的升级链接。
管理您的订阅和信用包 djioni.dev/products/ui-design-mcp.
环境变量
| 变量 | 必填 | 描述 |
|---|---|---|
DJIONI_API_KEY | 是 | 您的DjionDev API密钥(djd_live_...) |
LLM_MODEL | 否 | 覆盖基础模型 |
DJIONI_LICENSE_API_URL | 否 | 覆盖许可证API URL（默认：生产） |
许可证
麻省理工学院