广告合作
MCP.so
登录

Popmelt MCP Server

@avantjohn

代码仓库

基本信息

分类

开发工具

传输方式

stdio

作者

avantjohn

关于 Popmelt MCP Server

暂无概览

#popmelt#mcp-server#design-system

Popmelt MCP Server 配置

暂无标准配置

该服务器的 README 中没有可解析的 MCP 配置块，请前往代码仓库查看安装说明。

代码仓库

Popmelt MCP Server 工具

工具列表暂未提供

当前收录暂时没有可展示的工具列表，不代表服务没有工具。请查阅项目文档了解支持的能力。

工具是从 README 中自动提取的。维护者可以在 ## Tools 标题下列出工具,即可填充这部分内容。

概览

What is Popmelt MCP Server?

Popmelt MCP Server is a Model-Controlled Programming server for Popmelt, a platform that generates dynamic design systems and UI components based on structured Taste Profiles defined in JSON metadata files. It provides a RESTful API, a visual frontend dashboard, and CSS generation from design tokens.

How to use Popmelt MCP Server?

Clone the repository, install dependencies with npm install, and start the server with npm start (or npm run dev for hot reloading). The server runs on port 3000 by default, configurable via the PORT environment variable. Use the API endpoints or open http://localhost:3000 in a browser to access the visual dashboard.

Key features of Popmelt MCP Server

  • Dynamic processing of profile JSON files from a /profiles directory
  • CSS generation engine based on weighted attributes within profiles
  • Comprehensive design token system for CSS variables
  • Component variant handling (hover, focus, active, nested elements)
  • RESTful API for profile application, generation, and management
  • Visual frontend with real-time component preview

Use cases of Popmelt MCP Server

  • Generate CSS for a single component from a design system profile
  • Create a complete design system CSS for all components in one request
  • Browse, create, update, and delete design system profiles via API
  • Preview components with applied styles in real-time using the dashboard
  • Integrate design token generation into a CI/CD pipeline

常见问题

1

What technology stack does Popmelt MCP Server use?

It uses Node.js, Express.js, fs-extra, body-parser, cors, and Jest with Supertest for testing. The frontend uses HTML, CSS, and JavaScript.

2

How are design tokens represented in the profiles?

Profiles contain design tokens such as colors, spacing, typography, borders, and animations. The server automatically converts these tokens into CSS variables (e.g., `--color-background`, `--spacing-medium`).

3

What API endpoints are available for profile management?

Endpoints include POST `/api/profiles` (create), GET `/api/profiles` (list all), GET `/api/profiles/:slug` (get one), PUT `/api/profiles/:slug` (update), and DELETE `/api/profiles/:slug` (delete).

4

Can I generate a complete design system with one call?

Yes, the `POST /api/generate-design-system` endpoint generates CSS for all components defined in a profile.

5

How do I verify the server is running correctly?

A health check endpoint is available at `/api/health`.

评论

开发工具 分类下的更多 MCP 服务器

SSH MCP Server

hypnosis

SSH MCP server for AI agents: remote commands, file transfer, log search and server audits through OpenSSH.

1

Perfex CRM

themesic

Turn Perfex CRM into an AI-ready workspace. This MCP server exposes your full REST API to Claude, ChatGPT and any AI agent, so leads, invoices and tasks are one prompt away.

1

Cronwatch

cronwatchdev

CronWatch records every run of your scheduled jobs in your own database, and speaks up when one is missed, fails, gets stuck, runs slow or costs too much. CronWatch is free and open-source.

31

Meticulous

Meticulous

Innovalyxx Sovereign Edge

edge.innovalyxx.com

Verified cyber-physical AI tools. 25 MCP tools, x402-payable on Base.

广告合作