使用说明

Bernova MCP服务器

模型上下文协议（MCP）服务器伯诺娃 -JS中的CSS库，允许AI代理以编程方式与Bernova样式交互和管理。

⚡ 现在针对Bun进行了优化！ 安装速度快3倍，启动速度快10倍。看 BUN_GUIDE.md 了解详情。

支持的IDE

✅ 克劳德桌面 -Anthropic的桌面应用程序
✅ VS Code -使用Cline扩展
✅ 光标 -AI第一代码编辑器
✅ 帆板运动 -Codeium的集成开发环境
✅ 泽德 -高性能编辑器
✅ 任何兼容MCP的IDE

看 CLAUDE_DESKTOP_SETUP.md 详细的IDE配置。

特性

配置管理：创建、读取和更新Bernova配置
风格汇编：编译不同模式的样式（完整、仅基础、仅组件）
组件管理：创建、读取、更新和删除样式化组件
CSS变量：添加和更新CSS自定义属性（基础）
媒体查询：管理响应断点
验证：编译前验证样式
TypeScript支持：全类型安全和自动完成

安装

使用Bun（推荐）

bun add bernova-mcp

或全局安装：

bun add -g bernova-mcp

使用npm

npm install bernova-mcp

快速开始

1.在您的项目中安装Bernova

# Using Bun (recommended)
bun add bernova

# Using npm
npm install bernova

2.运行MCP服务器

# Using Bun
bunx bernova-mcp

# Using npx
npx bernova-mcp

3.配置IDE

请参阅中所有支持的IDE的完整设置指南 CLAUDE_DESKTOP_SETUP.md.

Claude Desktop的快速示例：

使用Bun（推荐）：

{
  "mcpServers": {
    "bernova": {
      "command": "bun",
      "args": ["run", "/absolute/path/to/bernova-mcp/dist/index.js"]
    }
  }
}


## Available Tools

### Configuration Tools

#### `get_config`
Get the current Bernova configuration from `bernova.config.json`.

```typescript
// No parameters required

答复：

{
  "success": true,
  "data": {
    "provider": { ... },
    "themes": [ ... ]
  },
  "message": "Configuration loaded successfully"
}

`create_config`

使用默认值创建新的Bernova配置文件。

{
  themeName?: string  // Default: "default"
}

例子：

{
  "themeName": "dark-theme"
}

`update_config`

更新Bernova配置（合并或替换）。

{
  config: BernovaConfig,  // Partial or complete config
  merge?: boolean         // Default: true
}

例子：

{
  "config": {
    "themes": [
      {
        "name": "dark",
        "stylesPath": "./src/styles/dark"
      }
    ]
  },
  "merge": true
}

`list_themes`

列出所有可用的主题。

// No parameters required

答复：

{
  "success": true,
  "data": ["default", "dark", "light"],
  "message": "Found 3 theme(s)"
}

编译工具

`compile_styles`

使用不同模式编译Bernova样式。

{
  mode?: "full" | "foundationOnly" | "componentOnly"  // Default: "full"
}

例子：

{
  "mode": "full"
}

模式：

full：编译基础+组件
foundationOnly：仅编译CSS变量和基本样式
componentOnly：仅编译组件类

`build_styles`

具有自定义选项的高级构建。

{
  baseOutDir?: string,
  minifyJs?: boolean,
  embedCss?: boolean,
  types?: ("cjs" | "esm")[]
}

例子：

{
  "baseOutDir": "./dist",
  "minifyJs": true,
  "embedCss": true,
  "types": ["cjs", "esm"]
}

组件工具

`create_component`

使用样式创建新组件。

{
  componentName: string,
  styles: ComponentStyles,
  themeName?: string
}

例子：

{
  "componentName": "BUTTON",
  "styles": {
    "background_color": "blue",
    "color": "white",
    "padding": "10px 20px",
    "border_radius": "4px",
    "_icon": {
      "width": "16px",
      "height": "16px"
    },
    "PRIMARY": {
      "background_color": "darkblue"
    },
    "$pseudoClasses": {
      "hover": {
        "background_color": "lightblue"
      }
    }
  }
}

`get_component`

获取现有组件的样式。

{
  componentName: string,
  themeName?: string
}

例子：

{
  "componentName": "BUTTON",
  "themeName": "default"
}

`update_component`

更新现有组件的样式。

{
  componentName: string,
  styles: ComponentStyles,
  themeName?: string
}

`delete_component`

删除组件。

{
  componentName: string,
  themeName?: string
}

`list_components`

列出主题中的所有可用组件。

{
  themeName?: string
}

答复：

{
  "success": true,
  "data": ["BUTTON", "CARD", "INPUT"],
  "message": "Found 3 component(s) in theme 'default'"
}

CSS变量工具

`add_css_variable`

将CSS变量添加到基础中。

{
  category: string,
  name: string,
  value: string | number,
  themeName?: string
}

例子：

{
  "category": "colors",
  "name": "primary",
  "value": "#0066cc"
}

这将产生： --colors-primary: #0066cc

`update_css_variable`

更新现有的CSS变量。

{
  category: string,
  name: string,
  value: string | number,
  themeName?: string
}

`get_css_variables`

从主题中获取所有CSS变量。

{
  themeName?: string
}

媒体查询工具

`add_media_query`

添加媒体查询配置。

{
  name: string,
  type: string,
  values: Record<string, string>,
  themeName?: string
}

例子：

{
  "name": "tablet",
  "type": "screen",
  "values": {
    "min-width": "768px",
    "max-width": "1024px"
  }
}

`list_media_queries`

列出主题中的所有媒体查询。

{
  themeName?: string
}

验证工具

`validate_component_styles`

在创建/更新之前验证组件样式语法。

{
  styles: ComponentStyles
}

例子：

{
  "styles": {
    "background_color": "red",
    "_text": {
      "font-size": "16px"
    }
  }
}

答复：

{
  "success": false,
  "data": {
    "valid": false,
    "errors": [],
    "warnings": [
      "Property 'font-size' should use underscores instead of hyphens"
    ]
  }
}

用法示例

示例1：从头开始创建设计系统

AI Agent: "Create a new Bernova project with a button component"

1. create_config({ themeName: "myapp" })
2. add_css_variable({ 
     category: "colors", 
     name: "primary", 
     value: "#007bff" 
   })
3. add_css_variable({ 
     category: "spacing", 
     name: "md", 
     value: "16px" 
   })
4. create_component({
     componentName: "BUTTON",
     styles: {
       background_color: "var(--colors-primary)",
       padding: "var(--spacing-md)",
       border: "none",
       border_radius: "4px"
     }
   })
5. compile_styles({ mode: "full" })

示例2：添加响应式设计

AI Agent: "Add responsive breakpoints and make the button adapt to mobile"

1. add_media_query({
     name: "mobile",
     type: "screen",
     values: {
       "max-width": "767px"
     }
   })
2. update_component({
     componentName: "BUTTON",
     styles: {
       padding: "16px",
       $mediaQueries: {
         mobile: {
           padding: "12px",
           font_size: "14px"
         }
       }
     }
   })
3. compile_styles({ mode: "componentOnly" })

示例3：创建组件变体

AI Agent: "Create primary and secondary button variants"

update_component({
  componentName: "BUTTON",
  styles: {
    padding: "10px 20px",
    border_radius: "4px",
    PRIMARY: {
      background_color: "#007bff",
      color: "white"
    },
    SECONDARY: {
      background_color: "#6c757d",
      color: "white"
    },
    $pseudoClasses: {
      hover: {
        opacity: "0.9"
      }
    }
  }
})

项目结构

bernova-mcp-server/
├── src/
│   ├── index.ts              # Main MCP server
│   ├── tools/
│   │   ├── config.ts         # Configuration tools
│   │   ├── compile.ts        # Compilation tools
│   │   ├── components.ts     # Component management
│   │   └── variables.ts      # Variables & media queries
│   ├── types/
│   │   └── bernova.types.ts  # TypeScript types
│   └── utils/
│       ├── file-system.ts    # File system utilities
│       └── validators.ts     # Validation utilities
├── package.json
├── tsconfig.json
└── README.md

Bernova风格语法参考

基本属性

使用下划线而不是连字符：

{
  background_color: "red",    // ✅ Correct
  font_size: "16px",          // ✅ Correct
  // background-color: "red"  // ❌ Wrong
}

嵌套的元素

对嵌套元素（BEM）使用下划线前缀：

{
  BUTTON: {
    padding: "10px",
    _icon: {              // Creates .button__icon
      width: "16px"
    },
    _text: {              // Creates .button__text
      font_size: "14px"
    }
  }
}

变体

使用大写键表示变体（BEM修饰符）：

{
  BUTTON: {
    padding: "10px",
    PRIMARY: {            // Creates .button--primary
      background: "blue"
    },
    SECONDARY: {          // Creates .button--secondary
      background: "gray"
    }
  }
}

伪类

使用 $pseudoClasses 为了 :hover, :focus等等：

{
  $pseudoClasses: {
    hover: {
      background_color: "darkblue"
    },
    focus: {
      outline: "2px solid blue"
    }
  }
}

伪元素

使用 $pseudoElements 为了 ::before, ::after:

{
  $pseudoElements: {
    before: {
      $content: '""',
      display: "block"
    }
  }
}

媒体查询

使用 $mediaQueries 具有配置的断点：

{
  width: "100%",
  $mediaQueries: {
    mobile: {
      width: "90%"
    },
    tablet: {
      width: "80%"
    }
  }
}

属性

使用 $attributes 对于属性选择器：

{
  $attributes: {
    "data-active": {
      background_color: "green"
    }
  }
}

高级选择器

使用 $advancedSelector 对于后代、子代、兄弟姐妹选择器：

{
  $advancedSelector: [
    {
      descendant: {
        $target: "span",
        color: "red"
      }
    },
    {
      child: {
        $target: "p",
        font_size: "14px"
      }
    }
  ]
}

动态值

使用 $dynamicValues 对于运行时CSS变量：

{
  $dynamicValues: ["$bgColor", "$textColor"],
  background_color: "$bgColor",
  color: "$textColor"
}

TypeScript类型

服务器提供完整的TypeScript支持：

import type { 
  BernovaConfig, 
  ComponentStyles,
  CSSProperties 
} from 'bernova-mcp-server';

错误处理

所有工具都返回一致的响应格式：

{
  success: boolean,
  data?: any,
  error?: string,
  message?: string
}

成功：

{
  "success": true,
  "data": { ... },
  "message": "Operation completed successfully"
}

错误：

{
  "success": false,
  "error": "Component 'BUTTON' not found"
}

发展

构建

npm run build

观看模式

npm run dev

在本地运行

npm start

需求

Node.js>=20.0.0
伯诺瓦>=1.3.2
Bernova项目 bernova.config.json

贡献

欢迎投稿！请随时提交拉取请求。

许可证

麻省理工学院

支持

对于问题和疑问：

Bernova问题：https://github.com/kubit-ui/bernova/issues
MCP服务器问题：在此存储库中创建问题

更新日志

版本1.0.0

初始版本
用于Bernova交互的15+MCP工具
完全支持TypeScript
验证实用程序
配置管理
组件CRUD操作
CSS变量管理
媒体查询支持
样式编译工具

使用说明

Bernova MCP服务器

支持的IDE

特性

安装

使用Bun（推荐）

使用npm

快速开始

1.在您的项目中安装Bernova

2.运行MCP服务器

3.配置IDE

create_config

update_config

list_themes

编译工具

compile_styles

build_styles

组件工具

create_component

get_component

update_component

delete_component

list_components

CSS变量工具

add_css_variable

update_css_variable

get_css_variables

媒体查询工具

add_media_query

list_media_queries

验证工具

validate_component_styles

用法示例

示例1：从头开始创建设计系统

示例2：添加响应式设计

示例3：创建组件变体

项目结构

Bernova风格语法参考

基本属性

嵌套的元素

变体

伪类

伪元素

媒体查询

属性

高级选择器

动态值

TypeScript类型

错误处理

发展

构建

观看模式

在本地运行

需求

贡献

许可证

相关项目

支持

更新日志

版本1.0.0

相关 MCP

TailwindCSS工具服务器

GSAP动画生成工具

前端开发工具集

模型上下文协议服务器

Ant Design 组件文档服务

React设计系统服务

`create_config`

`update_config`

`list_themes`

`compile_styles`

`build_styles`

`create_component`

`get_component`

`update_component`

`delete_component`

`list_components`

`add_css_variable`

`update_css_variable`

`get_css_variables`

`add_media_query`

`list_media_queries`

`validate_component_styles`