快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

详细介绍

材料3表达型MCP服务器

![License: MIT](https://opensource.org/licenses/MIT) ![TypeScript](https://www.typescriptlang.org/) ![Material Design](https://m3.material.io/)

具有MCP（模型上下文协议）服务器功能的全面Material 3表达性设计系统实现。该服务器为AI代理提供了强大的工具，可以根据谷歌的Material 3表达性设计语言生成设计令牌、组件、主题和完整的设计系统。

✨ 特性

🎨 动态色彩系统

HCT颜色空间：使用材质颜色实用程序进行感知均匀的颜色操作
九种配色方案：完全支持所有Material 3方案（表现力、色调点、内容、保真度、活力、中性、单色、水果沙拉、彩虹）
动态主题：从单个源颜色生成算法颜色
品牌整合：自定义颜色协调，同时保持语义关系

🧩 构件库

框架无关：支持React、Vue、Angular、Svelte和vanilla HTML/CSS
材料3表现力：通过有趣的互动增强情感表达
可访问性优先：WCAG 2.1 AA符合全面的屏幕阅读器支持
春季物理学：带有触觉反馈的自然流畅的动画

🤖 AI驱动的设计指南

研究支持：基于46项研究，18000多名参与者
零部件阵列：创建Material 3表达性组件的分步指南
验证规则：自动合规检查和改进建议
设计原则：关于材料3表达原则的综合教育

🛠️ 开发者体验

MCP集成：与AI开发环境无缝集成
多种导出格式：CSS、SCSS、JavaScript、JSON和Figma标记
互动展示：主题切换的实时组件演示
CLI工具：用于开发和验证的命令行实用程序

🚀 快速开始

安装

npm install -g material-expressive-mcp-server

基本用法

作为MCP服务器

# Start the MCP server
material-expressive

# The server will be available for MCP clients to connect

生成设计令牌

# Generate CSS tokens with expressive scheme
material-expressive generate-tokens --base-color "#4C5C92" --scheme expressive --format css

# Generate complete theme with custom colors
material-expressive generate-theme --name "My Brand" --base-color "#1976D2" --custom-colors brand:#FF6B35,accent:#4ECDC4

创建零部件

# Generate React button component
material-expressive generate-component button --framework react --variant filled

# Generate complete component library
material-expressive generate-library --framework vue --output ./components

MCP工具

服务器为AI代理提供了五个主要的MCP工具：

1. `get_design_tokens`

生成完整的Material 3设计令牌集。

{
  "baseColor": "#4C5C92",
  "scheme": "expressive",
  "format": "css",
  "contrastLevel": 0,
  "customColors": [{ "name": "brand", "color": "#FF6B35", "harmonize": true }]
}

2. `generate_component`

使用Material 3表达风格创建特定于框架的组件。

{
  "componentType": "button",
  "variant": "filled",
  "framework": "react",
  "includeAnimations": true,
  "accessibilityLevel": "enhanced"
}

3. `create_theme`

生成具有可访问性验证的完整主题。

{
  "name": "Brand Theme",
  "baseColor": "#1976D2",
  "scheme": "fidelity",
  "customColors": [
    { "name": "brand-primary", "color": "#1976D2", "harmonize": false }
  ],
  "expressiveness": {
    "emotionalIntensity": 0.8,
    "springPhysics": true,
    "contextualResponses": true
  }
}

4. `get_showcase_page`

生成交互式展示应用程序。

{
  "framework": "react",
  "includeAccessibilityTools": true,
  "includeThemeSwitcher": true,
  "responsive": true
}

5. `get_ai_guidance`

获得全面的设计指导和最佳实践。

{
  "topic": "component-creation",
  "componentType": "button",
  "framework": "react",
  "includeExamples": true
}

📚 文档

材料3表达原则

此实现遵循谷歌的Material 3 Expressive设计语言，该语言强调：

诱发情绪：活泼、精力充沛、有创造力、友好、积极
通信功能：清晰的视觉层次和优先级信号
提高可用性：关键动作的认知负荷减少4倍
适合每种风格：动态主题和用户偏好
满足各种需求：包容性设计标准
充满活力和适应性：情境反应和春季物理学

配色方案

富有表现力的 （默认）：与源颜色分离的大胆创意表达
色调斑点：平衡、和谐（Android默认设置）
内容：以源代码为中心，适用于内容丰富的应用程序
富达：忠实于源色，打造品牌精准体验
充满活力的：高能应用程序的最大色彩
中性：专业/最小界面接近灰度
单色：纯灰度，便于访问/聚焦
水果沙拉：有趣、丰富多彩的体验
彩虹：充满活力，多样化，适合社交/娱乐

支持的组件

按钮：填充、轮廓、文本、FAB（带药丸形状）
卡片：升高、填充、轮廓（半径28px）
导航：应用栏、底部导航、抽屉、轨道、标签
输入：文本字段、开关、滑块、芯片
反馈：小吃栏、对话框、底部表格
布局：网格、容器
数据显示：列表、表格

框架支持

反应：现代挂钩和TypeScript支持
Vue：成分API和反应主题化
Angular：具有依赖注入的组件架构
斯维尔特：带存储的反应性组件
香草：语义HTML，逐步增强

📱 现场实例

看看 React展示应用程序 在 examples/react-showcase 目录，查看所有MCP服务器功能的全面演示：

cd examples/react-showcase
npm install
npm run dev

该展示展示了：

设计所有令牌类型的令牌生成
主题创建与可访问性验证
为多个框架生成组件
全部9种材料3种配色方案
无障碍功能和最佳实践

查看示例文档

🎯 用法示例

生成完整的设计系统

// Using the MCP tools programmatically
const theme = await mcpClient.callTool('create_theme', {
  name: 'Acme Corp Design System',
  baseColor: '#1976D2',
  scheme: 'fidelity',
  customColors: [
    { name: 'brand-primary', color: '#1976D2', harmonize: false },
    { name: 'brand-secondary', color: '#FFC107', harmonize: true },
    { name: 'brand-accent', color: '#FF5722', harmonize: true },
  ],
  accessibility: {
    highContrast: false,
    colorBlindnessSupport: true,
  },
  expressiveness: {
    emotionalIntensity: 0.6,
    contextualResponses: true,
    springPhysics: true,
  },
});

// Generate components using the theme
const button = await mcpClient.callTool('generate_component', {
  componentType: 'button',
  variant: 'filled',
  framework: 'react',
  includeAnimations: true,
  accessibilityLevel: 'enhanced',
});

创建交互式展示

const showcase = await mcpClient.callTool('get_showcase_page', {
  framework: 'react',
  theme: theme,
  includeAccessibilityTools: true,
  includeThemeSwitcher: true,
  responsive: true,
});

🔧 发展

先决条件

Node.js 18+
TypeScript 5.3+
材质颜色实用程序

设置

# Clone the repository
git clone https://github.com/your-org/material-expressive-mcp-server.git
cd material-expressive-mcp-server

# Install dependencies
npm install

# Build the project
npm run build

# Run tests
npm test

# Start development server
npm run dev

项目结构

src/
├── ai-guidance/          # AI guidance system and design principles
├── cli/                  # Command-line interface
├── components/           # Component definitions and generators
├── mcp/                  # MCP server implementation
├── showcase/             # Interactive showcase generation
├── theme/                # Theme generation and color schemes
├── tokens/               # Design token system
└── utils/                # Shared utilities

测试

# Run all tests
npm test

# Run tests with coverage
npm run test:coverage

# Run specific test suite
npm test -- src/theme/generator.test.ts

装订和格式化

# Check code quality
npm run lint

# Fix linting issues
npm run lint:fix

# Format code
npm run format

🤝 贡献

我们欢迎捐款！请查看我们的贡献指南了解详情。

开发工作流程

分叉存储库
创建要素分支(git checkout -b feature/amazing-feature)
进行更改
添加新功能的测试
确保所有测试通过(npm test)
提交您的更改(git commit -m 'Add amazing feature')
推到分支(git push origin feature/amazing-feature)
打开拉取请求

代码的风格

对所有新代码使用TypeScript
遵循现有的代码风格（ESLint+Prettier）
为新功能编写全面的测试
使用JSDoc记录公共API
遵循材料3表达性设计原则

📄 许可证

此项目根据MIT许可证获得许可-请参阅许可证文件以获取详细信息。

🙏 致谢

谷歌材料设计团队 材料3表达性设计语言
材质颜色实用程序 用于HCT颜色空间实现
模型上下文协议 用于AI集成框架
开源社区 对于那些令人惊叹的工具和库

📞 支持

文档: 完整文档
问题:
讨论:

🗺️ 路线图

\[\]额外的框架支持（Flutter、SwiftUI）
\[\]集成Lottie的先进动画系统
\[\]设计工具插件（Figma、Sketch、Adobe XD）
\[\]实时协作功能
\[\]高级可访问性测试工具
\[\]性能优化和捆绑分析

______________________________________________________________________

由以下材料制成❤️ 由材料表达MCP团队

目录标签

设计系统TypeScript设计本地部署Material3AI设计组件库动态主题

接入字段

传输方式（transport，传输协议）

未说明

鉴权方式（authType，认证方式）

token

工具数量（toolCount，工具数）

5

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

未说明token部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

仍需确认：installCommand

来源信息

MCP World

mcpworld.com

/detail/85cedcaa7da7f53e18f3c586a2cc5bd4

Material 3 Expressive MCP Server 是一个全面的设计系统实现，提供AI代理生成设计令牌、组件、主题和完整设计系统的能力，遵循Google的Material 3 Expressive设计语言。

继续浏览同类 MCP

更多设计创作 MCP（1,700）返回 MCP 目录

上一个 MCP

Material Design MCP Server

Enables browsing Material Design 3 documentation by listing top-level sections and retrieving page content as Markdown.

下一个 MCP

Material UI MCP Server

Material UI MCP服务器提供对Material UI组件库文档的全面访问，帮助AI助手构建一致且设计良好的React应用。

Material Expressive MCP