Building blocks
AI agents can find
CSS effects, page sections and complete pages for Tailwind v4 – with metadata an AI client can query instead of inventing markup. The code ends up in your project, with no runtime dependency.
189 CSS snippets, 683 UI patterns, 52 page templates. As of September 2026.
npx -y @webspire/mcp – 23 tools for search, retrieval and page composition in v0.13.1.
webspire add glass/frosted writes a snippet into your project as a standalone file.
Only what Tailwind doesn’t ship.
Tailwind covers spacing, colour and layout. Glass effects, scroll animations, masks and lighting it does not. Webspire collects these gaps as short, standalone building blocks – plus whole sections and pages built on a shared token system.
webspire.de →- 01Copy-paste — the code belongs to your project, no runtime, no build plugin
- 02Machine-readable — JSON endpoints such as
/registry.jsonfor tools and agents - 03Token-based — patterns pick up your project’s colours and spacing
- 04Dark mode and reduced motion — handled in snippets and canvas effects
Six kinds of building blocks.
CSS snippets
Effects in 13 categories, from glass and scroll to masks. Standalone and configurable through CSS custom properties.
UI patterns
Sections such as hero, pricing, navbar or footer, tagged by industry, tone and UX goal. All built on --ws-* tokens.
Page templates
Complete HTML pages for SaaS, agencies, shops, portfolios, blogs, dashboards and more.
Canvas effects
JavaScript visuals on the mountCanvas runtime, with HiDPI support, ResizeObserver and a prefers-reduced-motion check.
Motion recipes
Framework-agnostic animation patterns with GSAP and Motion One, as self-contained HTML files.
Fonts
Heading, body and mono recommendations by industry and tone. In the MCP package: 25 fonts, 15 pairings, all via @fontsource.
One entry in your client config.
{
"mcpServers": {
"webspire": {
"command": "npx",
"args": ["-y", "@webspire/mcp"]
}
}
}compose_page({
domain: "legal",
tone: "serious",
ux_goals: ["build_trust", "drive_contact"]
})
// → sections: navbar → hero → features
// → testimonials → contact → footer
// → matching CSS snippets
// → font stack with npm commandimport { loadRegistry, searchSnippets }
from '@webspire/mcp/registry';
const registry = await loadRegistry();
const results = searchSnippets(registry, {
query: 'glass card hover',
darkMode: true,
});23 tools in version 0.13.1.
search_snippets, get_snippet, recommend_snippet, list_categories, search_canvas_effects, get_canvas_effect
search_patterns, get_pattern, list_pattern_families, compose_page, augment_page, search_templates, get_template, list_templates
search_motion_recipes, get_motion_recipe, list_motion_recipes, list_design_skills, get_design_skill, recommend_design_skill
setup_tokens, recommend_token_mapping, recommend_fonts
Works without a connection, too.
The server runs locally over stdio. It loads registry data in this order.
- 01
Memory cache
5-minute TTL – no re-fetch within the same session.
- 02
Fetch from webspire.de
Gets the current data and writes it to disk when it is newer.
- 03
Disk cache
~/.cache/webspire/– the last version fetched, survives restarts. - 04
Bundled copy
Frozen when the package was published. The last fallback.
Three layers between brand and markup.
- Layer 1
Host tokens
Your project’s variables: colours, spacing, radii.
recommend_token_mappingsuggests the mapping. - Layer 2
Alias tokens
Generic
--ws-*variables that point to your host tokens. Override them and every pattern follows. - Layer 3
Component tokens
Per-component overrides such as
--ws-cta-action-bg, without touching anything global.
Three ways into the registry.
- 1Browser
Browse webspire.de
Every building block with preview and code. Copying is enough.
- 2MCP
In your AI client
Add the server to Claude Code, Claude Desktop or any other MCP client that supports stdio.
npx -y @webspire/mcp - 3CLI
In the terminal
Create the config, then write building blocks into your project as files with
webspire add.npx @webspire/cli init
Website, server, CLI – and a lab.
Registry in the browser
Search and preview, plus a Color Lab with 20 palettes, contrast checks and colour-vision deficiency simulation.
@webspire/mcpMCP server
Local stdio server with a bundled registry and offline fallback.
@webspire/cliCLI
init, add and list. Fetches the current registry on every run.
Design lab
A separate template for building, comparing and discarding design directions. No code link to Webspire; the MCP is optional. Written in German.
The registry in use.
What Webspire does not promise.
Content changes
Taxonomy, scoring and composition output keep evolving. The only fixed answer is the snapshot you get at request time.
Source is not public
The Webspire repository is private, and the MCP package is published on npm as UNLICENSED. Per webspire.de, snippets and patterns are free to use.
Tailwind v4 required
Patterns and tokens are written for Tailwind v4. The page templates load Tailwind from a CDN.
Material, not direction
The registry supplies building blocks. It does not decide which design fits a brand – that is what the Webspire Lab is for.
Frequently asked questions.
What does Webspire cost?
Per webspire.de, all snippets and patterns are free to use. The MCP server and the CLI install from npm at no cost.
Do I need an API key for the MCP server?
No. The server runs locally over stdio and ships with a copy of the registry. For current data it fetches the public registry from webspire.de.
Which clients work?
Any MCP client that starts local servers over stdio, such as Claude Code or Claude Desktop. The command to add is npx -y @webspire/mcp.
Am I tied to Webspire after copying a pattern?
No. Snippets and patterns are copied into your project as code. There is no runtime dependency and no build plugin.
How do I adapt patterns to my brand?
Through the alias tokens: override --ws-color-primary and related variables, and every pattern picks up the values. setup_tokens returns the token files; recommend_token_mapping suggests a mapping to your existing project tokens.
Why does the MCP server run locally instead of as a remote service?
With the registry bundled, search and retrieval work without a network round trip, without an endpoint to operate, and offline. When online, the server fetches current data.
Use Webspire in your project.
Browse the registry in the browser or add the MCP server to your AI client. CASOON answers questions about token mapping and integration.