广告合作
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 服务器

MilliGate (x402 Crypto Paywall)

MilliGate Core

MilliGate is a developer-first remote MCP server that functions as a secure crypto paywall. By leveraging the HTTP 402 (Payment Required) protocol, it allows developers to monetize AI agents, APIs, and digital infrastruc

Foremerge

naw103

Catch intent conflicts before code conflicts. The open-source coordination protocol for coding agents, built above Git.

50

SSH MCP Server

hypnosis

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

1

Total CMS

Joe Workman

Read-only Total CMS docs and site content over MCP: exact Twig signatures, field types, schema options, the CLI, release notes and comparisons. No key required.

Collide MCP

Lithometric Inc. | Collide Inc.

Collide is the multiplayer layer for AI coding agents, and it pays for itself. Expert orchestration across every agent on your repo saves teams tens to hundreds of dollars a day in token burn. Run Claude Code, Codex, Cu

广告合作