Mit dem UI Kit bauen

Drei Wege zum Start#

Drei Wege führen zum selben Ergebnis, einer Component als Quellcode in deinem Projekt. Nimm den, der zu dir passt, und wechsle, wann immer du willst.

• Copy & Paste

  Öffne eine Component, kopiere den Code und leg ihn unter src/components/ui ab. Neben dem Code steht, welche Dateien sie mitbringt.

  Components ansehen

  src/components/ui/pricing.tsx
  src/lib/kit.ts
  src/styles/kit.css

• CLI

  Ein Command holt die Component samt Abhängigkeiten aus der Registry und schreibt sie in dein Projekt. Dateien, die du geändert hast, bleiben stehen.

  Zur Installation

  npm i -g ai-website
  aiw add @ai-website/pricing

• KI-Assistent

  Beschreib die Seite in einem Satz. Dein Assistent, ob Claude, Cursor, Copilot oder Codex, sucht die passenden Components, installiert sie, baut die Seite und prüft sie in drei Breiten.

  Assistenten verbinden

  Bau eine Startseite für ein Café mit Split-Hero, der Karte als Pricing price-list und den Öffnungszeiten.

Was drinsteckt#

Das Kit umfasst 350 Components mit 1.630 Varianten und 305 eigene Icons. Alles ist selbst gebaut und folgt denselben Regeln.

• Quellcode, der dir gehört

  Jede Component landet als lesbare Datei in deinem Projekt. Du änderst sie wie deinen eigenen Code.

• Hell und dunkel

  Alle Farben kommen aus Tokens. Eine Klasse am html-Element schaltet den Modus für die ganze Seite.

• Deutsch und Englisch

  Texte, die eine Component selbst schreibt, gibt es in beiden Sprachen. Deine Inhalte kommen über Props.

• Für alle gebaut

  Tastatur, Screenreader, Touch-Ziele ab 44 px und ruhige Bewegung, wenn das System es wünscht.

Das Aussehen in einer Zeile#

Modus und Akzent stehen als Klasse und Attribut am html-Element. Dark Mode ist hier der Standard, Blau der Akzent.

<html class="dark" data-accent="blue">

• Blau
• Violett
• Cyan
• Smaragd
• Sunset
• Rosé
• Neutral

Alles zu Tokens, Akzent und eigener Markenfarbe

Alle Themen#

• InstallationEin neues Projekt mit einem Command oder das Kit im Projekt, das du schon hast.
• KI-AssistentenStarte das Kit mit der aiw CLI als lokalen MCP-Server und verbinde es einmal mit dem Assistenten, den du schon nutzt.
• Was im Kit stecktJede Gruppe und Kategorie des Kits auf einer Seite, mit der aktuellen Zahl an Components und Varianten.
• ComponentsJede Component folgt demselben Muster.
• ThemingEine Handvoll Tokens trägt das ganze Aussehen.
• MotionRuhige Bewegung, die den Inhalt trägt.
• BarrierefreiheitJede Component ist von Anfang an für Tastatur, Screenreader und Touch gebaut.
• FormulareGanze Formulare als Daten beschrieben, eine Fehlerzusammenfassung, die zu jedem Feld führt, und Zustände für Erfolg, Fehler und gespeicherte Entwürfe.
• DiagrammeDiagramme in SVG, die deine Daten als einfache Zeilen lesen, Zahlen im Format der Seitensprache zeigen und für Tastatur und Screenreader lesbar bleiben.
• Scroll-GeschichtenSections, die beim Scrollen erzählen.
• KI-OberflächenChats, Antworten mit Quellen, Agenten und Einstellungen für Produkte mit KI.
• CLIEine Kommandozeile vom leeren Ordner bis zum Upload.
• StudioBearbeite eine Component mit deinen eigenen Inhalten, sieh sie auf Telefon, Tablet und Desktop und kopiere Code, der deine Texte schon trägt.
• Versionen und UpdatesJedes Release des Kits trägt eine Versionsnummer, jede Component ebenso.
• FAQKurze Antworten auf das, was beim Start mit dem Kit am häufigsten gefragt wird.