labzz mcp正面
MCP服务器，为人工智能辅助前端开发提供Labzz设计系统。此服务器是 堆栈无关 并可与任何前端技术（React、Vue、Svelte、vanilla HTML/CSS等）配合使用。
特性
- 14工具 用于服务、生成和验证设计系统模式
- 完整设计令牌：颜色、排版、间距、阴影、动画、z索引层
- 组件规格：按钮、输入、卡片、对话框、标签、表格、警报、徽章等
- 布局模式：网格系统、导航、页面结构、响应式设计
- 用户体验指南：互动、反馈、表单、模态、动画
- 无障碍规则：WCAG合规性、键盘导航、屏幕阅读器支持
安装
快速安装（Claude Code CLI）
claude mcp add labzz-mcp-front -- npx --yes github:eduardofurihata/labzz-mcp-front验证安装：
claude mcp list手动安装（来源）
git clone https://github.com/eduardofurihata/labzz-mcp-front.git
cd labzz-mcp-front
npm install
npm run buildHTTP模式（回复、REST客户端）
node dist/index.js --http
# or
MCP_HTTP=true MCP_PORT=3000 node dist/index.js看 docs/replit-setup.md 获取完整的HTTP文档。
配置
克劳德代码
添加到您的 ~/.claude/settings.json:
{
"mcpServers": {
"labzz-mcp-front": {
"command": "node",
"args": ["/path/to/labzz-mcp-front/dist/index.js"]
}
}
}或添加到您的项目 .mcp.json:
{
"mcpServers": {
"labzz-mcp-front": {
"command": "node",
"args": ["./labzz-mcp-front/dist/index.js"]
}
}
}游标/其他MCP客户端
根据客户的MCP服务器设置配置：
- 命令:
node - 参数:
["/path/to/labzz-mcp-front/dist/index.js"] - 类型:
stdio
可用工具
服务工具（阅读设计系统）
| 工具 | 说明 |
|---|---|
get_design_tokens | 获取设计标记（颜色、排版、间距等）。按类别筛选。 |
get_component_spec | 获取UI组件的完整规范 |
get_layout_patterns | 获取布局模式（网格、导航、页面结构） |
get_ux_guidelines | 获取用户体验指南（交互、反馈、表单等） |
list_components | 列出所有可用组件 |
get_full_design_system | 一次通话即可获取完整的设计系统 |
生成工具（创建代码）
| 工具 | 说明 |
|---|---|
generate_css | 基于标记为组件生成纯CSS |
generate_tailwind_classes | 为组件生成Tailwind CSS类 |
generate_css_variables | 生成完整的CSS变量文件 |
generate_component_skeleton | 为组件生成HTML/JSX/Vue/Svelte标记 |
验证工具（检查合规性）
| 工具 | 说明 |
|---|---|
validate_colors | 验证颜色是否在设计系统中 |
validate_spacing | 验证间距是否遵循4px网格 |
validate_component | 根据模式验证组件描述 |
audit_design | 带评分的综合设计审核 |
使用示例
获取设计代币
// Get all tokens
get_design_tokens()
// Get specific category
get_design_tokens({ category: "colors" })
get_design_tokens({ category: "typography" })
get_design_tokens({ category: "spacing" })获取组件规格
get_component_spec({ component_name: "Button" })
get_component_spec({ component_name: "Card" })
get_component_spec({ component_name: "Dialog" })生成代码
// Generate CSS for a button
generate_css({ component: "Button", variant: "primary" })
// Generate Tailwind classes
generate_tailwind_classes({ component: "Button", variant: "outline" })
// Generate React component skeleton
generate_component_skeleton({ component: "Card", framework: "react" })
// Generate CSS variables
generate_css_variables({ includeLight: true, includeDark: true })验证设计
// Validate colors
validate_colors({ colors: ["#0D2872", "#FF0000", "#355EC4"] })
// Validate spacing
validate_spacing({ values: ["8px", "12px", "16px", "15px"] })
// Audit a design description
audit_design({
description: "A blue button with 15px padding and Arial font"
})设计系统概述
颜色
主调色板：
- 主要的，重要的
#0D2872-主要品牌颜色，CTA - 次要：
#355EC4-次要动作、链接 - 口音：
#FFBE00-亮点、徽章
语义颜色：
- 成功：
#10b981 - 警告：
#f59e0b - 错误：
#ef4444 - 信息：
#3b82f6
排版
- 标题：国际（700）
- 身体：国际米兰（400、500、600）
- 规模：xs（12像素）到6xl（60像素）
间距
基于4px网格系统：
space-1：0.25雷姆（4像素）space-2：0.5雷姆（8像素）space-4：1雷姆（16像素）space-6：1.5雷姆（24像素）space-8：2雷姆（32像素）
边界半径
sm：0.125雷姆（2倍）md：0.375雷姆（6像素）lg：0.5雷姆（8像素）xl：0.75雷姆（12像素）full：9999px（圆形）
阴影
sm：微妙的提升md：下拉菜单、弹出菜单lg：模态、对话框xl：浮动元素
组件
设计系统包括以下规范：
- 按钮 -6种变体（默认、次要、破坏性、轮廓、重影、链接）
- 输入 -带有验证状态的文本输入
- 卡 -带有页眉、内容和页脚的容器
- 对话 -带叠加的模态对话框
- 标签页 -4种变体（默认、药丸、下划线、卡片）
- 表格 -带排序的数据表
- 警报 -4种变体（默认、破坏性、警告、成功）
- 徽章 -状态指示器
- 复选框 -布尔选择
- 选择 -下拉选择
- 开关 -切换控制
- 文本区域 -多线输入
- 表格 -滑动面板（4个方向）
- 下拉菜单 -操作菜单
- 骨架 -加载占位符
- 旋转器 -加载指示器
- 面包 -通知
发展
# Build
npm run build
# Watch mode
npm run dev
# Run server
npm start许可证
麻省理工学院