プロトタイプ · プレビュー版：公式レジストリのすべてのサーバーを掲載し、30分ごとに同期しています。レビューとアカウント機能は今後のステップで始まります。
PopNx MCPAIを使う人のためのMCPサーバー · やさしい言葉で解説
初心者モード オン
配色システムに合わせるライトダーク
言語ไทยEnglish中文日本語한국어EspañolDeutsch
☰ メニュー設定
初心者モード オン
配色システムに合わせるライトダーク
言語ไทยEnglish中文日本語한국어EspañolDeutsch

Marmo UI

作者：mahmoudilyanバージョン 1.1.1i★ –iクラウドで動く
レジストリ名io.github.mahmoudilyan/marmo-ui

インストール

概要

作者による説明（英語の原文）

Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.

PopNx MCPの3つの柱

この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。

できること

このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。

  • 接続方法: クラウドで動く
  • トランスポート: Streamable HTTP
  • カテゴリ: デザイン・画像・音声

インストール

使っているAIアプリを選んで、設定をコピーしてください。

インストールの前に

  • 基本チェック：1項目中1項目に合格
  • 作者のサーバーで動きます。あなたが頼んだ内容は、作者のサーバーを通ります。
  • レジストリには、入力が必要なキーは載っていません。

必要なもの

どのアプリを使っていますか？

上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。

ウェブ、デスクトップ、モバイルのClaudeで使えます：

  1. Settings → Connectors を開く
  2. Add custom connector を押す
  3. 下のアドレスを貼り付けて Add を押す
  4. サインインを求められたら、作者のサービスにサインインする
SettingsConnectors1+ Add2https://…3
https://mcp.marmoui.com/mcp

ターミナルでこれを実行します

claude mcp add --transport http marmo-ui https://mcp.marmoui.com/mcp

Cursorで開く

または、設定を自分でコピーする

プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます

{
  "mcpServers": {
    "marmo-ui": {
      "url": "https://mcp.marmoui.com/mcp"
    }
  }
}

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

VS Codeで開く

または、設定を自分でコピーする

プロジェクトの .vscode/mcp.json に貼り付けます

{
  "servers": {
    "marmo-ui": {
      "type": "http",
      "url": "https://mcp.marmoui.com/mcp"
    }
  }
}

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

ChatGPTがつなげるのは、インターネット上のサーバーだけです：

  1. ウェブ版のChatGPTを開き → Settings → Connectors (Apps)
  2. Create または Add を押す（プランによっては、先に Advanced で Developer mode をオンにする必要があります）
  3. 下のアドレスを貼り付け、名前を付けて保存する
  4. サインインを求められたら、作者のサービスにサインインする
SettingsConnectors1+ Create2https://…3
https://mcp.marmoui.com/mcp

メニューの名前は、プランや時期によって少し違うことがあります。

選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

できること

このサーバーのツール一覧はまだ読み取っていません。エンドポイントは順番にチェックしています。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月8日にチェック

  • ✓ 合格

    作者とリポジトリが一致

    レジストリ名は、リポジトリを所有するGitHubアカウント mahmoudilyan で確認済みです

  • … 未チェック

    今もメンテナンスされている

    このリポジトリはまだGitHubから読み取っていません

  • … 未チェック

    ライセンスがある

    このリポジトリはまだGitHubから読み取っていません

  • … 未チェック

    エンドポイントが応答する

    まだチェックしていません。エンドポイントは順番にチェックしています

  • … 未チェック

    OAuthでサインイン

    まだチェックしていません。エンドポイントは順番にチェックしています

  • … 未チェック

    ツールの説明に隠れた指示がない

    まだチェックしていません。エンドポイントをチェックするときにツール一覧を読み取ります

デザイン・画像・音声のほかのサーバーとの比較i

  • このカテゴリのほかの2801件のうち0%よりスターが多い
  • このカテゴリのほかの2801件のうち14%より最近レジストリに公開
  • 基本チェックの結果が、このカテゴリのほかの2801件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

Marmo UIは安全ですか？

当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。

パソコンで動きますか、それともクラウドですか？

作者のクラウドで動きます。インストール不要でインターネット経由でつながりますが、送った内容は作者のサーバーを通ります。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は–、最新バージョン（1.1.1）がレジストリに届いたのは4 か月前です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URLでつながるので、リモートMCPサーバーに対応したアプリ（開発者モードのChatGPTなど）でも使えます。

代わりに使えるものは？

同じカテゴリには：Figma Context MCP, Claude Real Video, Figma MCP Server

代わりの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

Figma Context MCP

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

作者：GLips広く使われている↓ 16.1万/週★ 1.6万5 か月前更新

パソコンで動く
インストール

Claude Real Video

Let any LLM watch a video locally — and search everything it has ever watched.

作者：HUANGCHIHHUNGLeo広く使われている↓ 1106/週★ 22842 か月前更新

パソコンで動く
インストール

Figma MCP Server

The Figma MCP server brings Figma design context directly into your AI workflow.

作者：figma広く使われている★ 215213 か月前更新

クラウドで動く✓ mcp.figma.com
インストール

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

Marmo UI

The AI agentic designer. Point the agent you already use — Claude Code, Codex, Cursor, Gemini CLI — at Marmo and it builds production dashboards and apps in minutes: real components, real props, your own style. No AI slop.

Platform, docs & pricing → [marmoui.com](https://www.marmoui.com)

npx marmoui init     # connect your agent (free, no account)

npm i @marmoui/ui # the component library (MIT)

Then just ask your agent: *"Build a billing dashboard with Marmo UI."*

How it works

  • [`@marmoui/ui`](packages/ui) — an open-source React 19 design system (MIT, public npm). Tables, charts, forms, app shells — everything a product UI needs, light + dark from one token set.
  • The Marmo MCP — a hosted knowledge server your agent connects to. Instead of guessing from training data, the agent reads live component APIs, composition patterns, and generation rules, and validates its output (review_generated_code) before reporting done. Wrong imports and invented props get caught and fixed before you ever see them.
  • [Claude Code plugin](tools/claude-plugin) — /plugin marketplace add mahmoudilyan/marmoui → /plugin install marmo-ui@marmoui-plugins. Bundles the MCP plus the marmo-ui skill and /marmo-ui:* commands (init, design-md, build) that enforce the find → generate → validate workflow.

Light and dark from one token set

Every component ships both themes off the same semantic tokens (bg, panel, ink, primary-*) — no parallel dark stylesheet, no hardcoded hex.

LightDark

Free vs Pro

FreePro — $9.99/mo, 14-day free trial
React components (@marmoui/ui, MIT)✓✓
Core MCP — live props, validation, default Marmo styling✓✓
Docs, Figma library✓✓
On-brand generation — your DESIGN.md (colors, type, tokens, component overrides) drives every screen any connected agent generates✓
Composition patterns library (app shells, dashboards, forms)✓
Pro blocks, generated straight into your repo✓
Personal MCP token + hosted, brand-themed design-system page✓

Pro mode in one sentence: the free tier makes your agent *correct*; Pro makes it *yours* — run /marmo-ui:init (or write a DESIGN.md by hand), upload it at marmoui.com/connect, and every agent on your account generates UI in your brand instead of the Marmo defaults. Generation always happens in your agent with your LLM tokens; the code lands in your repo and you own it fully.

Monorepo structure

├── apps/

│ └── design-system-docs/ # marmoui.com — docs + marketing site ├── packages/ │ ├── ui/ # @marmoui/ui — publishable component library │ └── cli/ # marmoui — npx marmoui init └── tools/claude-plugin/ # Claude Code plugin + marketplace

The hosted MCP server and platform services live in a private repository; this repo talks to them only through the hosted MCP at mcp.marmoui.com.

Using @marmoui/ui directly

Works as a regular component library too — no agent required:

import '@marmoui/ui/style.css'; // once, in your app entry

import { Button, DataTable } from '@marmoui/ui';

React 19 + react-dom are peer dependencies. Component APIs and examples: marmoui.com/docs.

Development

Node 20+, pnpm 9.

git clone git@github.com:mahmoudilyan/marmoui.git

cd marmo-ui pnpm install pnpm dev # UI package + docs site (localhost:3002)

CommandDescription
pnpm dev:uiDevelop the UI package only
pnpm buildBuild all packages and apps
pnpm lintRun ESLint across the monorepo
pnpm type-checkRun TypeScript type checking
pnpm changesetAdd a semver changeset

Contributing

See CONTRIBUTING.md — workflow, Conventional Commits (enforced by husky), and semver via Changesets.

License

MIT — see LICENSE. Components are free forever; a component that ships free never moves behind the paywall.

PopNxに聞く