広告掲載
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`.

コメント

「開発者ツール」の他のコンテンツ

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

Moxie Docs

Jackalope-Dev

Automated codebase documentation for GitHub: searchable docs, MCP context for AI agents, doc drift detection, and Friday Cleanup PRs.

1

ZeroBeacon — 1000-Tool Collision-Proof Commerce Router

DavidFox998

ZeroBeacon.ai — Collision-proof commerce router for AI agents. 1000 MCP tools: commerce, trust, billing, sovereign ID + everyday tools. LIVE.

Casefile

azimov777

One case file per task — shared by every session, agent and person that touches it. Self-hosted MCP server and live board. MIT.

3

Modelglass

Modelglass

Modelglass turns "which model should I use?" into a lookup instead of a guess. Seven tools give your agent live pricing across image, language, video, and audio models. Sourced and versioned, not scraped once and forgott

1
広告掲載