Zum Inhalt springen

Kuratierte UI-Registry für Tailwind v4

148 CSS-Snippets, 628+ UI-Patterns, 42 Page-Templates — Copy-Paste-ready, ohne Framework-Abhängigkeit, AI-native via MCP. Nur das, was Tailwind nativ nicht kann.

148 CSS-Snippets 628+ UI-Patterns 42 Page-Templates Tailwind v4 MCP-native AI-first Copy-Paste Kein Lock-in MIT-Lizenz Open Source

Das Projekt

Webspire

Open Source · MIT

Eine kuratierte Registry hochwertiger CSS-Effekte und UI-Komponenten, designed für Tailwind v4. Keine Runtime-Abhängigkeiten, kein Framework-Lock-in — jedes Snippet funktioniert standalone. Für Entwickler, die schnell produktionsreife UI brauchen, und für KI-Agenten, die über MCP direkt auf die Registry zugreifen.

  • Tailwind v4 — Complement, kein Replacement
  • Jedes Snippet unter 50 Zeilen, standalone
  • Semantisches System: Domain, Ton, UX-Ziel
  • MCP-Server für KI-Agenten (Claude, Cursor etc.)
  • prefers-reduced-motion + Dark Mode überall
  • MIT-lizenziert, kommerziell nutzbar
webspire.de github.com/casoon/webspire

Was die Registry enthält

Fünf Inhaltstypen, aufeinander abgestimmt — von einzelnen CSS-Effekten bis zu fertigen Seitenvorlagen.

148
CSS-Snippets
628+
UI-Patterns
42
Page-Templates
3
Canvas-Effekte
25
Font-Empfehlungen

CSS-Snippets

148 Effekte in 12 Kategorien

Visuelle Effekte, die Tailwind nicht nativ bietet. Jedes Snippet ist standalone, unter 50 Zeilen und mit konfigurierbaren CSS Custom Properties ausgestattet.

glassanimationsscrolleasinginteractionstextlightingdepthmaskssurfacesdecorativeatmosphere

UI-Patterns

628+ Sektionen in 186 Familien

Ganze Seiten-Sektionen mit 3-Schichten-Token-System. Semantisch annotiert nach Domain, Tonalität und UX-Zielen — für präzise Suche und KI-Komposition.

heronavbarpricingfeaturesdashboarde-commerceaiteamtestimonialscontactfooterbento

Page-Templates

42 fertige Seiten

Komplette, produktionsreife HTML-Seiten für SaaS, Agency, Portfolio, Shop und Company — mit Tailwind CDN, responsive, Vanilla JS.

Canvas-Effekte

3 dynamische Visuals

Particle Fields, Proximity Dots, Gradient Orbs — mit mountCanvas Runtime, HiDPI-Support und ResizeObserver.

Motion & Fonts

Rezepte + 25 Fonts

Framework-agnostische Animationsmuster (GSAP, Motion One) und semantische Font-Empfehlungen nach Domain und Tonalität.

CSS-Snippets

Visuelle Effekte, die Tailwind nicht nativ kann — kuratiert, dokumentiert, produktionsreif.

Warum eigene Snippets neben Tailwind?

Tailwind deckt Spacing, Farben und Layout hervorragend ab. Was es nicht kann: komplexe Filtereffekte, Scroll-Animationen, Glasmorphismus, Backdrop-Blur-Varianten und spezialisierte CSS-Timing-Kurven. Genau diese Lücke füllt die Snippet-Registry.

  • Standalone — jedes Snippet funktioniert ohne Import von Anderen
  • Unter 50 Zeilen — überschaubar, anpassbar, kein Overhead
  • CSS Custom Properties — konfigurierbare Parameter ohne Fork
  • Reduced Motion — alle Animationen respektieren prefers-reduced-motion
  • Dark Mode — color-scheme-aware, kein separater Override nötig
glass

Glasmorphismus & Backdrop-Filter

animations

Eingangsanimationen, Reveal, Fade

easing

Timing-Funktionen & Kurven

scroll

Scroll-Effekte & Parallax

interactions

Hover, Click, Pointer-Feedback

text

Typografie-Effekte, Glow, Shimmer

lighting

Licht- & Schatteneffekte

depth

Tiefe & Perspektive

masks

Masken & Ausschnitte

decorative

Hintergründe & Gradients

surfaces

Oberflächen & Texturen

atmosphere

Stimmungs-Overlays

UI-Patterns

628+ Sektionen für jede Seite — semantisch annotiert, direkt einsetzbar.

Semantisches System

Patterns sind nicht nur nach Typ organisiert, sondern semantisch annotiert: Domain (Branche), Tonalität und UX-Ziel. So findet die Suche nicht nur "hero", sondern das richtige Hero für eine Kanzlei mit seriösem Ton und dem Ziel, Vertrauen aufzubauen.

  • Domain — legal, healthcare, saas, agency, education, ecommerce u.a.
  • Tonalität — serious, premium, modern, friendly, technical, playful
  • UX-Ziel — build_trust, drive_signup, explain_offer, showcase_work u.a.
  • compose_page — KI stellt komplette Seiten aus passenden Patterns zusammen

Pattern-Familien (Auswahl)

hero
navbar
pricing
features
dashboard
team
testimonials
contact
footer
e-commerce
ai
developer tools
bento
stats
timeline
accordion
about
enterprise saas

186+ Familien insgesamt

AI-native via MCP

Webspire ist für KI-Agenten gebaut — nicht als Nachgedanke, sondern als Kernarchitektur.

Warum MCP statt REST?

MCP erwartet persistente Verbindungen — ein stateless HTTP-Endpunkt ist architektonisch falsch. Der Webspire MCP-Server läuft deshalb als lokales npm-Paket via stdio, mit der kompletten Registry gebündelt. Offline-fähig, latenzfrei, keine API-Kosten.

Setup in 2 Schritten

In .mcp.json eintragen, fertig:

{
  "mcpServers": {
    "webspire": {
      "command": "npx",
      "args": ["-y", "@webspire/mcp"]
    }
  }
}

Funktioniert mit Claude Code, Cursor, Cline und allen MCP-kompatiblen Clients.

21 verfügbare Tools

  • search_snippets / get_snippet
  • recommend_snippet
  • search_patterns / get_pattern
  • compose_page
  • search_templates / get_template
  • search_canvas_effects
  • search_motion_recipes
  • recommend_fonts
  • setup_tokens
  • recommend_token_mapping

Wie KI-gestützte Seitenkomposition funktioniert

1

Intent beschreiben

"Seriöse Landing Page für eine Rechtsanwaltskanzlei mit Kontaktformular"

2

System normalisiert

domain: legal · tone: serious · ux_goal: build_trust, drive_contact

3

Seite entsteht

Passende Patterns, Snippets und Font-Stack — in der richtigen Reihenfolge

3-Schichten-Token-System

Alle Patterns passen sich automatisch an, wenn die eigenen Design-Tokens gesetzt sind.

Schicht 1

Host Tokens

Die eigenen Design-Variablen des Projekts — Farben, Abstände, Radien. Einmalig gesetzt, wirken auf alles.

--color-brand, --radius-card,
--font-heading ...

Schicht 2

Alias Tokens

Generische Webspire-Variablen, die auf Host-Tokens zeigen. Die Brücke zwischen Projekt und Registry.

--ws-color-primary,
--ws-font-heading,
--ws-radius-sm ...

Schicht 3

Component Tokens

Komponentenspezifische Overrides — für präzise Kontrolle ohne globale Änderungen.

--ws-hero-headline-color,
--ws-cta-action-bg,
--ws-navbar-bg ...

Was das Token-System leistet

  • Branding einmalig setzen — alle Patterns übernehmen es automatisch
  • Einzelne Komponenten per Component Token überschreiben, ohne andere zu beeinflussen
  • Dark Mode ohne doppelten CSS-Code — Tokens wechseln, Patterns reagieren
  • setup_tokens generiert die Token-Datei via MCP automatisch
  • recommend_token_mapping mappt bestehende Tokens auf --ws-*
  • Kein Rewrite des Projekts nötig — Integration in bestehende Design-Systeme

Einstieg

MCP-Server einbinden oder direkt auf der Website stöbern — beides dauert unter einer Minute.

MCP-Server (empfohlen)

In die MCP-Konfiguration des KI-Clients eintragen. Kein separater Download, kein Build-Schritt.

npx -y @webspire/mcp

Danach stehen 21 Tools zur Verfügung: Suche, Abruf, Seitenkomposition, Token-Setup.

CLI

Snippets und Patterns direkt aus dem Terminal abrufen und in Projekte einfügen.

npx @webspire/cli init

Für Workflows ohne KI-Client — oder als ergänzendes Tool im Entwicklungsprozess.

Website

Registry durchsuchen, Vorschau anzeigen, direkt kopieren

webspire.de

GitHub

Quellcode, Issues, Beiträge — MIT-lizenziert

github.com/casoon/webspire

npm

MCP-Server und CLI als npm-Pakete

@webspire/mcp @webspire/cli

Webspire in einem Projekt einsetzen?

Bei Fragen zur Integration, zum Token-Mapping oder zu maßgeschneiderten Pattern-Sets — einfach melden.

Anfragen

Im Insights-Blog

MCP in der Praxis: Warum wir uns gegen Remote und für lokal entschieden haben

Hintergrund zur Architekturentscheidung hinter dem Webspire MCP-Server – und warum lokale Ausführung für UI-Registries mehr Sinn ergibt.