How it works

Three ways to use Webspire

Browse and copy by hand, install from the CLI, or connect an AI agent through MCP. The code lands in your project and stays yours.

683

Patterns

187

Families

189

CSS Snippets

Templates

Retrieve. Own. Evolve.

Webspire is not a framework and not a dependency. You pick a pattern, snippet, or template — or let your agent retrieve one — and the source goes into your project. Customize it, turn it into a component, add it to your global CSS — whatever fits your stack. No npm install, no version conflicts, no breaking updates.

No dependencies

Pure HTML + Tailwind. Nothing to install, nothing to update.

Fully yours

Adapt colors, layout, structure — it lives in your codebase, under your control.

Agent-ready

Need more? Browse webspire.de or let your AI agent search the registry via MCP.

Project Reality

This registry is intentionally alive.

Not every pattern or snippet is optimal yet. Quality improves over time, and the library is under continuous review, replacement, and refinement.

What matters is the moment you make the request. Search results, composition output, taxonomy labels, metadata, and code can change later because the system is designed to keep evolving.

That evolution does not change the core rule: Webspire should not become a framework dependency. The AI or MCP server provides context, retrieval, and composition help; the output should still land in your project as code you own.

Step 1

Browse & Copy

Browse 683 UI patterns, 189 CSS effects, and 52 full-page templates. Everything is pure HTML + Tailwind — no framework, no build step. Preview it, click copy, paste into your project.

Patterns — UI sections from Hero to Footer
Snippets — CSS effects Tailwind can't do
Templates — complete standalone pages

HTML

<!-- Copy pattern HTML — uses component tokens -->
<section class="ws-cta bg-[var(--ws-cta-bg)] py-20">
  <div class="mx-auto max-w-3xl px-6 text-center">
    <h2 class="text-[var(--ws-cta-text)] text-3xl font-bold">
      Ready to get started?
    </h2>
    <a class="bg-[var(--ws-cta-action-bg)] rounded-lg px-5 py-3">
      Get started
    </a>
  </div>
</section>

Step 2

Developer Tools

Go beyond copy-paste. Use the CLI to add patterns from your terminal, or connect an AI agent via MCP to search, recommend, and retrieve components automatically.

CLI

Add patterns directly from your terminal

Terminal

# Add patterns, snippets, or templates
npx @webspire/cli add hero/split
npx @webspire/cli add glass/frosted
npx @webspire/cli add saas-landing/modern

# Setup token system for brand customization
npx @webspire/cli init --tokens

# List all available content
npx @webspire/cli list --patterns

Install: npm i -g @webspire/cli

MCP for AI Agents

Let your AI assistant search and retrieve patterns

MCP Config

// Add to your MCP config (Claude Code, Cursor, VS Code)
{
  "mcpServers": {
    "webspire": {
      "command": "npx",
      "args": ["-y", "@webspire/mcp"]
    }
  }
}

Install: npx -y @webspire/mcp — runs locally, offline-capable, zero cost

12 MCP Tools

Search, recommend, retrieve patterns, snippets, templates — plus token setup and mapping

Works Everywhere

Claude Code, Cursor, Windsurf, VS Code — any MCP-compatible client

Local & Offline

Registry bundled at build time. No server, no API calls, no cost

For AI Agents

Structured UI knowledge — not just a snippet list

Webspire is a machine-readable design system your agent can reason about. Every pattern carries semantic metadata — which domains it fits, which tone it signals, what UX goal it serves. That structure lets an agent do more than retrieve code: it can decide what belongs on a page.

Semantic model

683+ patterns tagged across 12 domains, 12 tones, and 13 UX goals. An agent can filter by "fintech × serious × build_trust" and get exactly the right candidates.

16 MCP tools

search_patterns, compose_page, recommend_token_mapping and more. The agent searches, composes, and retrieves HTML — all within the conversation.

HTML inline — offline-capable

The full registry with all HTML source is bundled into the MCP package. No network call per pattern — the agent loads it once and works offline.

Page composition

"Build a SaaS landing page for a fintech product" → compose_page selects patterns by domain and tone, returns the HTML for each section in order.

Token recommendations

The agent can map a brand's color palette to the Webspire token system and tell you exactly which CSS variables to override — without touching component code.

A cookbook, not a framework

Webspire gives the agent structured recipes — it cooks. The output lands in your project as plain HTML you own. The agent is the chef; Webspire is the ingredient library.

Ready to start building?

Browse the catalog or install the CLI to get started.

Browse Patterns View Templates Read the Guide