UI Preset MCP Server

UI预设MCP服务器

MCP服务器，用于根据可交换的设计预设系统自动配置React UI。与您的Monaco IDE集成，以强制所有业务构建的设计一致性。支持glassmorphism、neumorphism、霓虹赛博朋克、野兽派、柔和粉彩、极光渐变等——一个用于前端开发的婴儿Canva。

建筑

ui-preset-mcp-server/
├── src/
│   ├── index.ts                    # Server entry point (stdio + HTTP transports)
│   ├── constants.ts                # Shared constants and paths
│   ├── types/
│   │   └── index.ts                # All TypeScript types (tokens, presets, corrections)
│   ├── schemas/
│   │   └── toolSchemas.ts          # Zod validation schemas for every tool
│   ├── services/
│   │   ├── presetLoader.ts         # Reads + deep-merges preset files with caching
│   │   ├── sessionState.ts         # Active preset session management + overrides
│   │   ├── uiCorrector.ts          # AST correction engine (10 correction passes)
│   │   ├── tokenResolver.ts        # Resolves {{token:x.y.z}} placeholders + export generators
│   │   └── fileWatcher.ts          # Hot-reload presets on disk changes (dev mode)
│   ├── tools/
│   │   ├── presetTools.ts          # load_preset, swap_template, list_presets, diff_presets, scaffold_preset
│   │   ├── correctionTools.ts      # autocorrect_component, validate_ui, generate_component, generate_tokens, apply_token_overrides
│   │   └── styleTools.ts           # generate_color_palette, suggest_style, list_style_categories
│   ├── routes/
│   │   └── uiRoutes.ts             # REST API + Design Studio dashboard (GET /, /api/*)
│   └── ui/
│       └── dashboardHtml.ts        # Embedded Design Studio HTML (9 sections)
└── presets/
    ├── glassmorphic-base/          # Core preset (all others inherit from this)
    │   ├── manifest.json
    │   ├── tokens.json             # Full design token system
    │   ├── components/
    │   │   ├── shell/Sidebar.json
    │   │   ├── surfaces/GlassCard.json
    │   │   ├── settings/OptionGroup.json
    │   │   └── navigation/NavGroup.json
    │   └── layouts/DashboardLayout.json
    ├── client-fintech/             # Blue accent, dense spacing
    ├── client-saas/                # Purple accent, wider cards
    ├── client-dark-minimal/        # Monochrome, reduced glass intensity
    ├── style-neumorphic/           # Light soft UI, extruded shadows, no blur
    ├── style-neon-cyberpunk/       # Pitch-dark + neon accents, monospace type
    ├── style-brutalist/            # Raw B&W, zero radius, heavy typography
    ├── style-soft-pastel/          # Lavender background, pastel accents, generous rounding
    └── style-aurora/               # Deep navy + iridescent aurora purple/teal accents

MCP工具

预设管理

修正与生成

风格和颜色

样式类别

安装

npm install
npm run build

用法

stdio（用于摩纳哥IDE集成）

node dist/index.js

HTTP服务器

TRANSPORT=http PORT=3001 node dist/index.js

热重载开发模式

WATCH_PRESETS=true node dist/index.js

设计工作室UI

在HTTP模式下运行时，a 设计工作室 迷你用户界面在 GET /.

UI部分

UI通过REST API与服务器通信，该API也可在 /api/*.

REST API（HTTP模式）

典型工作流程

1. list_style_categories()                    # Discover available aesthetics
2. suggest_style("dark sci-fi dashboard")     # Get preset recommendation
3. load_preset("style-neon-cyberpunk")        # Activate chosen style
4. const palette = generate_color_palette({ seed_color: "#00ff88", harmony: "triadic" })
5. apply_token_overrides({
     overrides: {
       colors: {
         accent: {
           primary: palette.semantic.accent,
           highlight: palette.semantic.highlight
         }
       }
     }
   })
6. autocorrect_component(code)               # Fix component on save
7. validate_ui(code)                         # Get conformance score
8. generate_tokens({ format: "css" })        # Export CSS variables
9. scaffold_preset({ preset_id: "client-x", extends: "style-aurora" })

创建新预设

新预设只需要覆盖与父级不同的令牌：

// presets/client-newbrand/tokens.json
{
  "colors": {
    "accent": {
      "primary": "#e11d48"
    }
  }
}

// presets/client-newbrand/manifest.json
{
  "id": "client-newbrand",
  "name": "New Brand",
  "extends": "glassmorphic-base",
  "version": "1.0.0",
  "styleCategory": "glassmorphic",
  "designPrinciples": ["backdrop-blur", "dark-substrate"],
  "tags": ["custom"],
  "components": [],
  "layouts": []
}

所有基础标记、组件和布局都会自动继承。

更正规则

校正引擎对每个组件执行这些规则：

• 没有硬编码的颜色 （错误）：所有颜色值都必须使用CSS自定义属性
• 无硬编码间距 （警告）：间距应使用标记比例
• 强化玻璃表面 （错误）：表面元素必须具有 backdropFilter +半透明bg
• 没有硬编码字体系列 （错误）：字体系列必须使用排版标记
• 使用动画令牌 （警告）：过渡必须使用动画标记
• 强制使用侧边栏组件 （错误）：侧栏内容必须使用NavGroup/NavItem
• 强制设置组件 （错误）：设置UI必须使用OptionGroup/OptionRow
• a11y img alt （警告）：图像必须具有alt属性
• a11y图标按钮标签 （警告）：图标按钮需要aria标签

摩纳哥一体化

在您的摩纳哥编辑中，致电 autocorrect_component 在保存事件上：

editor.onDidSaveModel(async () => {
  const code = editor.getValue();
  const result = await mcpClient.callTool('autocorrect_component', {
    code,
    context: 'auto',
    dry_run: false
  });
  if (result.corrected !== code) {
    editor.setValue(result.corrected);
  }
});