Cre8 is a design system built to be read, reasoned about, and rendered by AI. Install it as a plugin — 93 accessible web components' worth of MCP-served lookup, plus four skills for composition, theming, and framework conventions — and your agent composes real, on-brand, production UI instead of throwaway markup.
Free and open source — install the library and compose your first page in minutes.
Cre8 is built so a model can, too. Every component ships the metadata, guardrails, and structure an agent needs to generate correct UI on the first pass.
A full custom-elements.json manifest describes every tag, prop, slot, and event — so an agent knows exactly what exists and how to use it. No scraping, no guessing.
Agents emit structured component trees, not brittle hand-rolled HTML. The output is real Cre8 elements — inspectable, diffable, and identical to what a human would ship.
Whatever the model generates inherits WCAG 2.1 semantics, keyboard support, and ARIA from the components themselves. Accessibility isn't prompted — it's guaranteed.
Generated UI reads from design tokens, so a swap of the token file re-themes everything the AI produced. Cre8, brand, or a custom theme — the model stays inside the lines.
The @tmorrow/cre8-mcp server plugs component intelligence straight into Claude, Cursor, and any MCP client — live, versioned, and always in sync with the library.
Web Components run anywhere — React, Vue, Angular, or plain HTML. Generative UI you build with Cre8 isn't locked to one renderer or one runtime.
The same pipeline behind a generative-UI playground — grounded in a real, governed component library.
A user or agent states intent in plain language — "a dashboard row with three stat cards."
The model calls the MCP server to find the right components, props, and approved patterns.
It emits a tree of verified Cre8 tags — typed, accessible, and token-themed by default.
The browser renders native web components. What the AI drafted is what production runs.
A live tool call finds the right component. A skill is what stops an agent from stopping there — composition rules, token architecture, and framework-specific conventions the MCP intentionally doesn't restate. Bundled together as one plugin — on Claude Code, Codex CLI, and Gemini CLI today — they're the full arsenal: lookup, generation, brand theming, and live interactive surfaces.
Web Components guidance for vanilla JS/HTML and Lit — which component a job calls for, and the token/brand architecture underneath it.
The same judgment, for React — 72 components with props, patterns, and usage conventions specific to the React wrappers.
Serves Cre8 components as live, interactive UI from a Python FastMCP server — a tool call that returns a working surface, not a text reply.
Extracts a brand's colors, type and shape from a website, a picture, or a Design.md, and turns it into a seed-token override — your product, on-brand, in minutes.
// The MCP server and all four skills claude plugin install cre8@tmorrow_ai
// Same bundle, Codex's own plugin format codex plugin add cre8@tmorrow_ai
// Same bundle, as a Gemini extension gemini extensions install https://github.com/tmorrowdev/cre8-gemini-extension.git
On Cursor, Windsurf, VS Code, OpenCode, or any other MCP-compatible tool?
Those don't have an equivalent plugin mechanism for the skills yet. But
@tmorrow/cre8-mcp is the same standard MCP server either way: drop the
mcp.json snippet below into that tool's MCP config and every tool works identically.
The composition and workflow guidance the skills carry is still reachable directly through the
MCP itself — call cre8_guide and get_composition the same way an agent
with the skills installed would.
Point any MCP client at @tmorrow/cre8-mcp directly and it gains 15 tools spanning lookup, agent-authored UI trees, and UI that streams live — no fine-tuning, no stale context.
Enumerate every component in the library with its category and summary.
Pull the full spec for one component — props, slots, events, and usage rules.
Find the right building blocks by name, description, or category.
Retrieve approved composition patterns — login forms, data tables, page layouts.
See how a component actually nests, from the library's own stories and examples — not a guessed naming rule.
Turn a component tree into ready-to-render markup for web components or React.
The full JSON-Schema catalog: every component, typed props, enum constraints, slots, events.
Validates a component tree against the catalog before it ships — not after.
Whether a component takes content through children or slots — never both.
The briefing on emitting UI that validates first try and the traps that cost the most attempts.
Opens a live surface and returns a URL a human can watch update in place.
Streams a change into an open surface — the only mutation tool.
Returns a surface's current tree and data model, with bindings resolved.
Reads what the user did — events fired by components you bound handlers to.
Closes a surface. Also swept automatically after an hour of inactivity.
Works in Claude Code, Cursor, Windsurf, VS Code, Gemini CLI, OpenCode, Codex CLI, and any other Model Context Protocol host.
// Connect any MCP client to the Cre8 design system { "mcpServers": { "cre8": { "command": "npx", "args": ["-y", "@tmorrow/cre8-mcp"] } } }
<cre8-grid> <cre8-grid-item> <cre8-feature heading="Requests" description="1.2M this month"></cre8-feature> </cre8-grid-item> <cre8-grid-item> <cre8-feature heading="Latency" description="48ms p95"></cre8-feature> </cre8-grid-item> </cre8-grid> // ← real components, accessible, on-brand
Every one is a real, registered web component — the raw vocabulary your agents compose with.
Install the plugin — components, MCP server, and all four skills — and start generating real, accessible, on-brand UI today.
Cre8 is free and open source. Contact me if you would like to see how this scales within your organization, using your design system.