Design with Claude
Install the plugin
Bring the entire Semji Core design system into your editor. Install the Claude plugin for skills that teach Claude the system, or connect the MCP server to use it from any MCP-capable tool — Claude Code, Claude Desktop, Cursor, VS Code and more. Both stay in sync with this site.
What you get
The plugin's skills and the MCP server expose the same design system — one source of truth, always current.
Design tokens
Every theme token (oklch + hex) for semji & semji-dark — colours, radii, shadows, fonts. Always prefer the semantic roles.
85 components
FlyonUI components themed for Semji, with ready-to-paste HTML & React for every example.
50 page blocks
Prebuilt sections — hero, pricing, navbars, dashboards, e-commerce, auth — to assemble pages fast.
Brand guidelines
Voice & tone, logo, colours, typography, mission, icons and illustrations — so copy and brand stay on-point.
Install
Pick your tool. The plugin (skills + MCP) is the richest in Claude Code; everywhere else, connect the remote MCP server by URL.
Full plugin
RecommendedInstalls the skills and wires the MCP server. Run these in Claude Code:
/plugin marketplace add semji/semji-design-plugin
/plugin install semji-core@semjiOr from the hosted marketplace: /plugin marketplace add https://design.semji.com/marketplace.json. Update later with /plugin update semji-core@semji.
MCP server only
Just the live design-system tools — no skills, no install step:
claude mcp add --transport http semji-core https://design.semji.com/api/mcpThen /mcp to confirm it connected.
Plugin or MCP — which?
They complement each other; install both in Claude Code.
The plugin (skills)
Markdown skills that auto-load in Claude Code & Cowork and teach Claude how to set up the theme, use components and write on-brand — even before you ask. Best for Claude Code.
The MCP server
A live tool endpoint any MCP client can query for component markup, tokens, icons and brand guidelines on demand. One URL, no install, works in Cursor, VS Code and other LLMs.