关键词

Vue UI组件AI开发辅助设计系统令牌前端代码生成动态主题配置

项目简介

LittleBrand UI Kit MCP服务器是Vue 3组件库LittleBrand UI Kit的配套后端服务。它基于Model Context Protocol (MCP) 构建，旨在帮助AI助手（如Claude）准确理解和使用LittleBrand UI Kit中的组件、设计令牌和主题配置。通过这个服务器，AI助手可以避免“幻觉”现象，生成正确且符合最佳实践的代码示例和文档，极大地提升AI在前端开发辅助方面的效率和准确性。

主要功能点

  • 组件发现与文档: 允许AI助手查询LittleBrand UI Kit中所有可用组件的详细信息，包括组件名称、类别、描述、属性（props）、插槽（slots）、事件（emits）及使用示例。
  • 设计令牌查询: 提供对所有CSS自定义属性（设计令牌，如颜色、间距、圆角等）的列表、搜索和详细信息查询，确保AI助手使用正确的令牌进行样式生成。
  • 代码生成: 支持AI助手根据给定的组件名称和使用场景，自动生成Vue.js代码示例，包含正确的导入、模板语法和属性配置。
  • 主题配置生成: 能够为AI助手生成JavaScript代码，用于运行时定制LittleBrand UI Kit的主题颜色和饱和度曲线，自动生成完整的颜色刻度、暗黑模式和语义化令牌。
  • 安装与主题指南: 提供详细的UI Kit安装、设置以及主题定制的指导文档，方便AI助手快速获取最新、最准确的信息。

安装步骤

该MCP服务器是LittleBrand UI Kit NPM包的一部分。您无需单独安装，只需安装LittleBrand UI Kit即可。

npm install littlebrand-ui-kit

MCP 服务器配置

为了让您的MCP客户端（如Claude Code或Claude Desktop）能够连接并使用此服务器，您需要提供服务器的启动命令。请根据您的MCP客户端的配置方式，将以下信息添加到其配置文件中：

{
  "mcpServers": {
    "littlebrand-ui-kit": {
      "command": "node",
      "args": [
        "您的项目路径/node_modules/littlebrand-ui-kit/mcp-server/dist/index.js"
      ]
    }
  }
}
  • 'littlebrand-ui-kit': 服务器的唯一名称。
  • 'command': 启动MCP服务器的可执行文件，通常是 'node'。
  • 'args': 传递给 'command' 的参数数组。这里是MCP服务器的入口文件路径。请将 '"您的项目路径"' 替换为您的项目实际的根目录的绝对路径，例如 '/Users/youruser/my-vue-app' (macOS/Linux) 或 'C:\Users\youruser\my-vue-app' (Windows)。

基本使用方法

配置完成后，重启您的MCP客户端。您现在可以向AI助手提问，利用LittleBrand UI Kit的强大功能：

  • “列出所有可用的LittleBrand组件”
  • “如何使用LbButton组件？”
  • “有哪些间距令牌可用？”
  • “生成一个包含电子邮件输入框和提交按钮的表单”
  • “生成一个紫色和橙色品牌色的主题配置”

信息

分类

开发者工具

访问项目