Bausteine, die
KI-Agenten finden
CSS-Effekte, Seitensektionen und fertige Seiten für Tailwind v4 – mit Metadaten, die ein KI-Client abfragen kann, statt Markup zu erfinden. Der Code landet im Projekt, ohne Laufzeit-Abhängigkeit.
189 CSS-Snippets, 683 UI-Patterns, 52 Seitenvorlagen. Stand: September 2026.
npx -y @webspire/mcp – 23 Tools für Suche, Abruf und Seitenkomposition in v0.13.1.
webspire add glass/frosted schreibt ein Snippet als eigenständige Datei ins Projekt.
Nur das, was Tailwind nicht mitbringt.
Tailwind deckt Abstände, Farben und Layout ab. Glaseffekte, Scroll-Animationen, Masken und Lichteffekte nicht. Webspire sammelt diese Lücken als kurze, eigenständige Bausteine – dazu ganze Sektionen und Seiten auf einem gemeinsamen Token-System.
webspire.de →- 01Copy-Paste — der Code gehört dem Projekt, keine Runtime, kein Build-Plugin
- 02Maschinenlesbar — JSON-Endpunkte wie
/registry.jsonfür Werkzeuge und Agenten - 03Token-basiert — Patterns übernehmen Farben und Abstände des Projekts
- 04Dark Mode und Reduced Motion — in Snippets und Canvas-Effekten berücksichtigt
Sechs Arten von Bausteinen.
CSS-Snippets
Effekte in 13 Kategorien, von glass über scroll bis masks. Eigenständig und über CSS Custom Properties konfigurierbar.
UI-Patterns
Sektionen wie Hero, Pricing, Navbar oder Footer, annotiert nach Branche, Ton und UX-Ziel. Alle mit --ws-*-Tokens.
Seitenvorlagen
Komplette HTML-Seiten für SaaS, Agentur, Shop, Portfolio, Blog, Dashboard und weitere Branchen.
Canvas-Effekte
JavaScript-Visuals auf der mountCanvas-Runtime, mit HiDPI-Support, ResizeObserver und Abfrage von prefers-reduced-motion.
Motion-Rezepte
Framework-unabhängige Animationsmuster mit GSAP und Motion One, als eigenständige HTML-Dateien.
Schriften
Empfehlungen für Überschrift, Fließtext und Mono nach Branche und Ton. Im MCP-Paket: 25 Schriften, 15 Paarungen, alle über @fontsource.
Ein Eintrag in der Client-Konfiguration.
{
"mcpServers": {
"webspire": {
"command": "npx",
"args": ["-y", "@webspire/mcp"]
}
}
}compose_page({
domain: "legal",
tone: "serious",
ux_goals: ["build_trust", "drive_contact"]
})
// → Sektionen: navbar → hero → features
// → testimonials → contact → footer
// → passende CSS-Snippets
// → Schrift-Stack mit npm-Befehlimport { 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
Läuft auch ohne Verbindung.
Der Server läuft lokal über stdio. Registry-Daten lädt er in dieser Reihenfolge.
- 01
Speicher-Cache
5 Minuten TTL – innerhalb einer Sitzung kein erneuter Abruf.
- 02
Abruf von webspire.de
Holt den aktuellen Stand und schreibt ihn auf die Platte, wenn er neuer ist.
- 03
Platten-Cache
~/.cache/webspire/– der zuletzt geladene Stand, übersteht Neustarts. - 04
Mitgelieferte Kopie
Beim Veröffentlichen des Pakets eingefroren. Die letzte Rückfallebene.
Drei Schichten zwischen Marke und Markup.
- Schicht 1
Host-Tokens
Die Variablen des Projekts: Farben, Abstände, Radien.
recommend_token_mappingschlägt die Zuordnung vor. - Schicht 2
Alias-Tokens
Generische
--ws-*-Variablen, die auf die Host-Tokens zeigen. Wer sie überschreibt, passt alle Patterns an. - Schicht 3
Component-Tokens
Overrides pro Komponente, etwa
--ws-cta-action-bg, ohne globale Änderung.
Drei Wege in die Registry.
- 1Browser
Auf webspire.de stöbern
Jeder Baustein mit Vorschau und Code. Kopieren genügt.
- 2MCP
Im KI-Client
Den Server in Claude Code, Claude Desktop oder einem anderen MCP-Client mit stdio eintragen.
npx -y @webspire/mcp - 3CLI
Im Terminal
Konfiguration anlegen, danach Bausteine per
webspire addals Dateien ins Projekt schreiben.npx @webspire/cli init
Website, Server, CLI – und ein Labor.
Registry im Browser
Suche und Vorschau, dazu ein Color Lab mit 20 Paletten, Kontrastprüfung und Simulation von Farbsehschwächen.
@webspire/mcpMCP-Server
Lokaler stdio-Server mit gebündelter Registry und Offline-Fallback.
@webspire/cliCLI
init, add und list. Holt bei jedem Lauf den aktuellen Registry-Stand.
Design-Lab
Eigenes Template, um Designrichtungen zu bauen, zu vergleichen und zu verwerfen. Kein Code-Link zu Webspire, der MCP ist optional.
Die Registry im Einsatz.
Was Webspire nicht verspricht.
Inhalte ändern sich
Taxonomie, Scoring und Kompositionsergebnisse entwickeln sich weiter. Verbindlich ist nur der Stand zum Zeitpunkt des Abrufs.
Quellcode nicht öffentlich
Das Webspire-Repository ist privat, das MCP-Paket steht auf npm als UNLICENSED. Snippets und Patterns sind laut webspire.de frei nutzbar.
Tailwind v4 vorausgesetzt
Patterns und Tokens sind für Tailwind v4 geschrieben. Die Seitenvorlagen binden Tailwind per CDN ein.
Material, keine Richtung
Die Registry liefert Bausteine. Welche Gestaltung zu einer Marke passt, entscheidet sie nicht – dafür ist das Webspire Lab gedacht.
Häufige Fragen.
Was kostet Webspire?
Laut webspire.de sind alle Snippets und Patterns frei nutzbar. MCP-Server und CLI lassen sich kostenlos über npm installieren.
Brauche ich einen API-Schlüssel für den MCP-Server?
Nein. Der Server läuft lokal über stdio und bringt eine Kopie der Registry mit. Für den aktuellen Stand ruft er die öffentliche Registry von webspire.de ab.
Welche Clients funktionieren?
Jeder MCP-Client, der lokale Server über stdio startet, etwa Claude Code oder Claude Desktop. Eingetragen wird der Befehl npx -y @webspire/mcp.
Bin ich nach der Übernahme an Webspire gebunden?
Nein. Snippets und Patterns werden als Code ins Projekt kopiert. Es entsteht keine Laufzeit-Abhängigkeit und kein Build-Plugin.
Wie passe ich Patterns an meine Marke an?
Über die Alias-Tokens: --ws-color-primary und verwandte Variablen überschreiben, dann übernehmen alle Patterns die Werte. setup_tokens liefert die Token-Dateien, recommend_token_mapping schlägt eine Zuordnung zu vorhandenen Projekt-Tokens vor.
Warum läuft der MCP-Server lokal und nicht als Remote-Dienst?
Mit gebündelter Registry funktionieren Suche und Abruf ohne Netzwerk-Roundtrip, ohne betriebenen Endpunkt und auch offline. Aktuelle Daten holt der Server bei Verbindung nach.
Webspire im eigenen Projekt nutzen.
Registry im Browser durchsuchen oder den MCP-Server in den KI-Client eintragen. Fragen zu Token-Mapping oder Integration beantwortet CASOON.