AI导哈

AI前端设计生成器

通过自然语言生成高质量UI组件、页面和设计系统的AI前端设计工具，适用于SaaS仪表盘、定价页面等场景。

  • by Djioni
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Djioni/gemini-design-mcp

使用说明

UI设计MCP

通过MCP进行AI驱动的前端设计——从自然语言生成高级UI组件、页面和设计系统。

它的作用

此MCP服务器将自然语言转换为生产级前端代码：

  • 完整页面（仪表板、登录页面、设置等）
  • 具有卓越设计质量的UI组件
  • 设计具有一致令牌的系统
  • 对现有组件进行手术修改
  • 集成到现有项目中的代码片段

工具

工具 说明
generate_vibes 为新项目生成5个设计氛围选项
create_frontend 创建具有高级设计的新页面或组件
modify_frontend 重新设计特定的UI元素（手术查找/替换）
snippet_frontend 生成JSX/HTML代码段以插入到现有代码中

先决条件

  1. Node.js >= 18
  2. 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"
      }
    }
  }
}

用法

新项目（推荐流程）

  1. 问：“为我的SaaS仪表板生成设计氛围”
  2. 选择你最喜欢的氛围
  3. 问：“创建一个具有所选氛围的定价页面”
  4. 接收完整的样式化代码

现有项目

将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（默认：生产）

许可证

麻省理工学院

相关 MCP