Statisches Website-Kit

Sag Kitty, was du willst.

Kitty ist ein schlankes Baukasten-System für schnelle, saubere Websites — ohne Build-Step, ohne Framework, ohne Cookie-Kopfschmerzen. Du beschreibst die Seite, Kitty setzt sie sauber im System um.

Was Kitty kann In Claude nutzen

Warum Kitty

Ein Baukasten mit Prinzipien — keine Template-Wühlkiste.

Sechs Grundsätze stecken in jeder Datei. Deshalb passt am Ende alles zusammen, egal wer (oder was) die Seite gebaut hat.

Kein Build-Step

Reines HTML, CSS und JS. Läuft per Doppelklick und auf jedem Server — kein Node, kein Deploy-Ritual, kein Versionschaos.

Alles über Tokens

Farben, Abstände und Typografie kommen aus einer Stelle. Du änderst die Tokens, nicht hundert einzelne Komponenten.

DSGVO ernst gemeint

Selbst gehostete Schrift, Cookie-Banner mit echtem Prior-Blocking, abgesichertes Kontaktformular. Kitty achtet drauf.

Barrierearm by default

Fokus-Ringe, Skip-Link, ARIA, Reduced-Motion und kontrastsichere Farben. Nicht nachträglich aufgeklebt, sondern eingebaut.

Denkt in Sektionen

Wiederverwendbare Bausteine und neutrale Templates. Neue Seiten entstehen durch Kombinieren, nicht durch Copy-Paste-Chaos.

Für KI gebaut

Klare Regeln und Template-Marker machen Kitty maschinenlesbar. Eine Claude-Session erweitert das Kit sauber selbst.

0
externe Abhängigkeiten
1
Design-System für alle Seiten
100%
statisch & selbst gehostet

In Claude

Du sagst, Kitty baut.

Kitty ist so geschrieben, dass Claude das System versteht — nicht zufälliges CSS produziert, sondern deine Bausteine, Tokens und Regeln benutzt.

01

Sag, was du brauchst

„Bau mir eine Landingpage für einen Fotografen mit Kontaktformular.“ Ganz normal, in Worten.

02

Kitty nutzt das System

Claude greift auf Tokens, Bausteine und Regeln zu — Ergebnis: konsistent statt zusammengewürfelt.

03

Fertige Dateien

Sauberes HTML, das per Doppelklick läuft und auf deinen Server passt. Die DSGVO-Bausteine sind schon drin.

„Du musst Kitty halt sagen, was du willst — dann erweitert es sich richtig selbst.“

„Mit Kitty bekommst du so eine Landingpage super easy hin.“

Mehr zum Arbeiten mit Kitty

Das System

Ein Token dreht, alles zieht nach.

Das ganze Erscheinungsbild läuft über Design-Tokens in einer einzigen Datei. Willst du eine andere Signalfarbe oder mehr Weißraum, änderst du den Token — nicht die Bausteine.

Layout trennt sauber zwischen Bandbreite und Contentbreite: Bänder laufen voll durch, Text bleibt überall gleich ausgerichtet. Boxed oder Full-Width entscheidet eine einzige Klasse.

Zum Styleguide 
:root {
  --color-accent:  #ffd400;  /* das eine Signal */
  --content-max:   1160px;   /* Textbreite     */
  --section-padding-block: 3.5rem;
}

/* Willst du es anders?
   Dreh am Token, nicht am Baustein. */
Accent #ffd400
Text #171716
Surface-2 #f7f7f6
„Ich sag Kitty, was ich will — und bekomme eine Seite, die aussieht, als hätte jemand wochenlang am Grid gefeilt.“
— So soll es sich anfühlen.

Loslegen

Sieh dir an, was drinsteckt.

Typografie, Spaltenlayouts und der komplette Baukasten — als lebende Beispiele zum Durchklicken.

Beispiele ansehen Styleguide