English Français العربية

io.github.mahmoudilyan/marmo-ui

السجل الرسمي أدوات المطورين

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

الشيفرة المصدرية الموقع التوثيق

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

Remote (streamable-http)
Claude Code 
claude mcp add --transport http marmo-ui 'https://mcp.marmoui.com/mcp'
إعداد JSON (Claude Desktop وCursor وVS Code) 
{
    "mcpServers": {
        "marmo-ui": {
            "type": "http",
            "url": "https://mcp.marmoui.com/mcp"
        }
    }
}

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  1. Marmo UI
  2. How it works
  3. Light and dark from one token set
  4. Free vs Pro
  5. Monorepo structure
  6. Using @marmoui/ui directly
  7. Development
  8. Contributing
  9. License

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

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 — 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 — /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.

الأسئلة الشائعة

ما هو io.github.mahmoudilyan/marmo-ui؟

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

كيف أثبّت io.github.mahmoudilyan/marmo-ui؟

يعمل كخادم بعيد. في Claude Code: claude mcp add --transport http marmo-ui 'https://mcp.marmoui.com/mcp'. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج io.github.mahmoudilyan/marmo-ui إلى مفتاح API؟

لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.

هل io.github.mahmoudilyan/marmo-ui مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون io.github.mahmoudilyan/marmo-ui؟

ينشره mahmoudilyan. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.