{"_id":"@djionidev/ui-design-mcp","_rev":"3-2f97628b47acabf7365364504c841755","name":"@djionidev/ui-design-mcp","dist-tags":{"latest":"1.2.0"},"versions":{"1.1.0":{"name":"@djionidev/ui-design-mcp","version":"1.1.0","keywords":["mcp","ui","design","ai","frontend","react","tailwind","model-context-protocol"],"author":{"name":"DjioniDev","email":"djioni@djionidev.com"},"license":"MIT","_id":"@djionidev/ui-design-mcp@1.1.0","maintainers":[{"name":"djionidev","email":"contact@djionidev.com"}],"bin":{"ui-design-mcp":"dist/index.js"},"dist":{"shasum":"62b2845b6b2831725595a1eb067ca4eedfabc268","tarball":"https://registry.npmjs.org/@djionidev/ui-design-mcp/-/ui-design-mcp-1.1.0.tgz","fileCount":12,"integrity":"sha512-AEFAKwxWsFP8P9WFKfd7TBt28wDNnJnWRMRU9fQPjgGJq/3vnCbtIZbD136FgyDGKJ7DxX0fFsFY7a3EDlldxw==","signatures":[{"sig":"MEYCIQCkPmyhlNGYgMHcIK3+kQnpuSwD8NdWM+CjzUEEZ2aiRwIhAM3I+hG+sZumuJiQlsw6nv2RlgR7knLZ7dYypYVH3wd6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55794},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"gitHead":"cacf21174985e274746f2b9d216b6971991d59a6","scripts":{"build":"tsc -p tsconfig.json && chmod 755 dist/index.js","start":"node dist/index.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"djionidev","email":"contact@djionidev.com"},"_npmVersion":"10.9.0","description":"AI-powered frontend design via MCP — generate premium UI components, pages, and design systems","directories":{},"_nodeVersion":"23.3.0","dependencies":{"zod":"^3.23.0","@modelcontextprotocol/sdk":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.6.0","@types/node":"^22.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-design-mcp_1.1.0_1776691925654_0.8368322365558429","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@djionidev/ui-design-mcp","version":"1.1.1","keywords":["mcp","ui","design","ai","frontend","react","tailwind","model-context-protocol"],"author":{"name":"DjioniDev","email":"djioni@djionidev.com"},"license":"MIT","_id":"@djionidev/ui-design-mcp@1.1.1","maintainers":[{"name":"djionidev","email":"contact@djionidev.com"}],"bin":{"ui-design-mcp":"dist/index.js"},"dist":{"shasum":"d0cd1a276737bd44e8b4f081af7fe58ea170fbf7","tarball":"https://registry.npmjs.org/@djionidev/ui-design-mcp/-/ui-design-mcp-1.1.1.tgz","fileCount":12,"integrity":"sha512-oyxw+KsdU01AbmpgM7WxErjdHZh75ImqzLG1eELKVYCwYhhA979ER4z8zFKkhSfdp3SXZYCNxeY/TdjFpro/EA==","signatures":[{"sig":"MEUCIQDmkYnmwlunb9J712TeqpaAXsGNlNHA2I0/4ORBUTODbQIgK0C4qgxbEqJ2KTfKYNqICGgCHiKkyYYCnY/DWQ5uJ+I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55440},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"gitHead":"0b3b30219217cdab20e59fff46e2d74a03c76056","scripts":{"build":"tsc -p tsconfig.json && chmod 755 dist/index.js","start":"node dist/index.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"djionidev","email":"contact@djionidev.com"},"_npmVersion":"10.9.0","description":"AI-powered frontend design via MCP — generate premium UI components, pages, and design systems","directories":{},"_nodeVersion":"23.3.0","dependencies":{"zod":"^3.23.0","@modelcontextprotocol/sdk":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.6.0","@types/node":"^22.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-design-mcp_1.1.1_1776696751131_0.4998162201239251","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@djionidev/ui-design-mcp","version":"1.2.0","description":"AI-powered frontend design via MCP — generate premium UI components, pages, and design systems","type":"module","main":"dist/index.js","bin":{"ui-design-mcp":"dist/index.js"},"scripts":{"build":"tsc -p tsconfig.json && chmod 755 dist/index.js","start":"node dist/index.js","prepublishOnly":"npm run build"},"keywords":["mcp","ui","design","ai","frontend","react","tailwind","model-context-protocol"],"author":{"name":"DjioniDev","email":"djioni@djionidev.com"},"license":"MIT","publishConfig":{"access":"public"},"dependencies":{"@modelcontextprotocol/sdk":"^1.0.0","zod":"^3.23.0"},"devDependencies":{"@types/node":"^22.0.0","typescript":"^5.6.0"},"engines":{"node":">=18.0.0"},"_id":"@djionidev/ui-design-mcp@1.2.0","gitHead":"0bbd5bfcc43f70d44eb0d783060b38830e59f09e","types":"./dist/index.d.ts","_nodeVersion":"23.3.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-8159LibUTaD1Jyj2KzoQZ1cuGgKmV61+J0rNP6KthHpnn5cSmjZsuXQwS/TYReNLoXmbXWJLmxidH7r8tw4bxg==","shasum":"af01fb2f3b5d6f8b1ff5e188f8477b6e1502cf0d","tarball":"https://registry.npmjs.org/@djionidev/ui-design-mcp/-/ui-design-mcp-1.2.0.tgz","fileCount":12,"unpackedSize":56356,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD83FXs2AQuY1VKb0Uu+a1Qkwz412x/RzamUkWkuyHM5QIgQJO4hEyqMHaP2zW4d/kjn5L4NTsKor7dXisGaZYvdmo="}]},"_npmUser":{"name":"djionidev","email":"contact@djionidev.com"},"directories":{},"maintainers":[{"name":"djionidev","email":"contact@djionidev.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-design-mcp_1.2.0_1776701700941_0.4446749689519216"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-20T13:32:05.496Z","modified":"2026-04-20T16:15:01.182Z","1.1.0":"2026-04-20T13:32:05.837Z","1.1.1":"2026-04-20T14:52:31.301Z","1.2.0":"2026-04-20T16:15:01.072Z"},"author":{"name":"DjioniDev","email":"djioni@djionidev.com"},"license":"MIT","keywords":["mcp","ui","design","ai","frontend","react","tailwind","model-context-protocol"],"description":"AI-powered frontend design via MCP — generate premium UI components, pages, and design systems","maintainers":[{"name":"djionidev","email":"contact@djionidev.com"}],"readme":"# UI Design MCP\n\nAI-powered frontend design via MCP — generate premium UI components, pages, and design systems from natural language.\n\n## What it does\n\nThis MCP server turns natural language into production-grade frontend code:\n\n- Complete pages (dashboards, landing pages, settings, etc.)\n- UI components with premium design quality\n- Design systems with consistent tokens\n- Surgical modifications to existing components\n- Code snippets that integrate into existing projects\n\n## Tools\n\n| Tool | Description |\n|------|-------------|\n| `generate_vibes` | Generate 5 design vibe options for a new project |\n| `create_frontend` | Create a new page or component with premium design |\n| `modify_frontend` | Redesign a specific UI element (surgical find/replace) |\n| `snippet_frontend` | Generate a JSX/HTML snippet to insert into existing code |\n\n## Prerequisites\n\n1. **Node.js** >= 18\n2. **DjioniDev API key**\n\n## Installation\n\n```bash\nnpm install -g @djionidev/ui-design-mcp\n```\n\n## Configuration\n\n### Claude Code\n\n```bash\nclaude mcp add ui-design -- npx -y @djionidev/ui-design-mcp\n```\n\n### Claude Desktop / Cursor / Windsurf\n\n```json\n{\n  \"mcpServers\": {\n    \"ui-design\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@djionidev/ui-design-mcp\"]\n    }\n  }\n}\n```\n\n### API Key\n\nYour `djd_live_` API key is passed **per call** as a tool parameter. Your AI assistant will ask for it the first time a tool is invoked in a conversation. The key is never stored in config files or environment variables — it lives only in the active conversation.\n\n## Usage\n\n### New project (recommended flow)\n\n1. Ask: \"Generate design vibes for my SaaS dashboard\"\n2. Pick your favorite vibe\n3. Ask: \"Create a pricing page with the selected vibe\"\n4. Receive complete, styled code\n\n### Existing project\n\nPass your CSS/theme files as context so generated code matches your design system:\n\n> \"Create a settings page matching my existing design\"\n\n### Design system\n\nOn the first page, set `generateDesignSystem: true`. The tool returns both the code AND a complete design system (colors, typography, spacing, buttons, inputs, cards). Save it as `design-system.md` at your project root — all subsequent pages will automatically match.\n\n## Billing\n\nEach successful generation consumes 1 credit. Your monthly plan credits are used first, then any bonus credits from one-time top-ups. When you run out, the tool returns a clear upgrade link.\n\n## Environment Variables\n\nThe MCP server itself needs no secrets. The only optional env vars are non-sensitive overrides:\n\n| Variable | Required | Description |\n|----------|----------|-------------|\n| `LLM_MODEL` | No | Override the underlying model |\n| `DJIONI_LICENSE_API_URL` | No | Override the license API URL (default: production) |\n\n## License\n\nMIT\n","readmeFilename":"README.md"}