Popmelt MCP Server

基本能力

产品定位

Popmelt MCP Server 是一个用于生成和管理动态设计系统的服务，通过处理 JSON 配置文件生成现代 CSS 和 UI 组件。

核心功能

• 动态配置文件处理：从 /profiles 目录读取和处理 JSON 配置文件。
• CSS 生成引擎：基于配置文件中的加权属性生成现代 CSS 输出。
• 设计令牌系统：支持 CSS 变量和现代设计令牌。
• 组件变体：处理组件变体、状态（悬停、聚焦、活动）和嵌套元素。
• 上下文提供者：新的 API 端点用于获取上下文信息以优化配置文件可视化。
• RESTful API：完整的 API 用于配置文件应用、生成和管理。
• 组件模板：即用型组件模板用于快速生成 UI。
• 可视化前端：交互式仪表板用于设计系统生成和预览。
• 实时预览：实时查看应用样式的组件。
• 完整系统生成：通过单个请求生成完整的设计系统。
• 响应式支持：生成的 CSS 包含响应式设计模式。
• 测试套件：全面测试覆盖所有关键功能。

适用场景

• 快速生成动态设计系统。
• 管理和预览 UI 组件样式。
• 通过 API 集成到现有开发流程中。

工具列表

• npm：用于安装依赖和运行脚本。
• Jest & Supertest：用于测试 API 端点。
• Express.js：用于构建 RESTful API。

常见问题解答

• 如何更改默认端口？：通过设置 PORT 环境变量更改默认端口。
• 如何运行测试？：使用 npm test 命令运行测试套件。

使用教程

使用依赖

1. 确保已安装 Node.js 和 npm。

安装教程

1. 克隆仓库：

git clone https://github.com/your-username/popmelt-mcp-server.git
cd popmelt-mcp-server

1. 安装依赖：

npm install

1. 启动服务：

npm start

调试方式

1. 开发模式下启动服务（热重载）：

npm run dev

1. 运行测试套件：

npm test

1. 访问可视化前端：

http://localhost:3000

许可证

该项目遵循 MIT 开源许可条款。