mcpp-ui

前端 UI 开发辅助工具 - UI 模板搜索、素材获取、组件库查询

安装

npm install -g mcpp-ui

配置

在 MCP 配置文件中添加：

{
  "mcpServers": {
    "ui": {
      "command": "npx",
      "args": ["-y", "mcpp-ui@latest"],
      "env": {
        "MCP_ACCESS_KEY": "your-access-key",
        "UI_DOWNLOAD_DIR": "./src"
      }
    }
  }
}

环境变量

| 变量 | 说明 | 默认值 | |------|------|--------| | MCP_ACCESS_KEY | 访问密钥 | 必填 | | UI_DOWNLOAD_DIR | 下载目录 | .mcpp-ui-downloads |

工具列表

| 工具 | 功能 | |------|------| | search_ui_pattern | 搜索 UI 组合方案（登录页、表格页、表单页等） | | get_ui_template | 获取 UI 模板代码 | | get_template_files | 获取模板包含的所有文件列表 | | download_template | 批量下载整个模板到本地 | | download_file | 下载单个文件到本地 | | search_assets | 搜索素材（图标、图片、插画） | | download_asset | 下载素材 | | search_components | 搜索组件库组件（TDesign、Ant Design、Element Plus） | | get_component_usage | 获取组件使用示例 | | get_color_palette | 获取配色方案 | | generate_layout | 根据描述生成布局代码 |

使用示例

搜索 UI 模板

search_ui_pattern({ keyword: "登录", framework: "vue" })

获取组件用法

get_component_usage({ componentName: "Table", library: "tdesign" })

搜索图标

search_assets({ keyword: "用户", type: "icon" })

生成布局

generate_layout({ description: "左侧菜单右侧内容区域", framework: "vue" })

支持的组件库

• TDesign (tdesign)
• Ant Design (antd)
• Element Plus (element)

支持的框架

• Vue 3 (vue)
• React (react)
• HTML (html)

获取 Access Key

访问 https://mcp.hxstudio.website 注册获取