Zum Inhalt springen
UI Kit
Accent

CLI

Eine CLI für die ganze Website

aiw bringt eine Website vom leeren Ordner bis zum Upload. Jeder Command läuft im Terminal und, mit aiw_ davor, als MCP-Tool in Claude, Cursor, Copilot, Codex oder Gemini.

Installierennpm i -g ai-websiteIm Terminalaiw add @ai-website/heroIm KI-Assistentenaiw_add

Ausprobieren

Command wählen. Das Terminal zeigt, was er ausgibt.

Der Installer des Kits. aiw add holt die Component aus der Registry des Kits, löst ihre Dependencies auf und schreibt die Dateien.

northwind-site

$ aiw add @ai-website/pricing

Registry @ai-website

pricing and 7 dependencies resolved

+ components/ui/pricing.tsxcomponent

+ lib/kit.tsutils

+ styles/kit.csskit

+ components/ui/button.tsxbutton

+ components/ui/icon.tsxicon

+ components/ui/reveal.tsxreveal

+ components/ui/section.tsxsection

+ components/ui/motion.tsxmotion

8 files written, nothing overwritten

Schritt 1

Starten

Rechner prüfen, Projekt anlegen, Kit starten.

Rechner prüfen

Liest nur

Listet jedes Programm, das die CLI braucht, zeigt, was fehlt, und wie es dazukommt.

$ aiw doctor

Options

Keine weiteren Optionen.

Beispiel

$ aiw doctor

Every required program is there

✓ browser for checksrequired

✓ video encoderrequired

✓ node 24.15required

✓ git 2.54required

image metadata tool missing, install command shown

MCP-Tool aiw_doctor

Projekt anlegen

Schreibt Dateien

Astro mit React Islands, Tailwind und den Tokens des Kits, bereit für Components. Mit --dry-run erst der Plan.

$ aiw new <name> [options]

Options

--dir
Übergeordneter Ordner
--stack
Framework des ProjektsDefault astro
--presets
Starter Sets: kit, scroll, seo, search, qualityDefault kit,scroll
--no-git
Ohne git-Repository
--dry-run
Nur den Plan zeigen, nichts schreiben

Beispiel

$ aiw new northwind-site

Astro with React islands and Tailwind

Kit tokens in src/styles/kit.css

.mcp.json and CLAUDE.md for your AI assistant

git repository with a first commit

cd northwind-site && npm run dev

MCP-Tool aiw_new

Kit starten

Baut die Registry und startet diese Seite auf deinem Rechner.

$ aiw kit [--built] [--port 4747]

Options

--built
Die gebaute Seite statt des Dev Servers
--port
Port des KitsDefault 4747

Beispiel

$ aiw kit

Registry built, 363 items

Kit running on your machine

http://127.0.0.1:4747

Schritt 2

Components finden

Der ganze Katalog im Terminal, jede Variant mit Install-Zeile.

Components finden

Liest nur

Ohne Suchwort alle Kategorien mit Anzahl. Mit Kategorie oder Suchwort jede Variant samt Install-Zeile.

$ aiw components [category]

Options

Keine weiteren Optionen.

Beispiel

$ aiw components

170 categories, 350 components, 1,630 variants

hero1 component17 variants

features1 component15 variants

logos1 component8 variants

stats1 component8 variants

pricing1 component11 variants

testimonials1 component11 variants

and 164 more categories

$ aiw components pricing

Pricing · 11 variants

cards<Pricing variant="cards" />

toggle<Pricing variant="toggle" />

comparison-table<Pricing variant="comparison-table" />

single-plan<Pricing variant="single-plan" />

two-plans<Pricing variant="two-plans" />

aiw add @ai-website/pricing

MCP-Tool aiw_components

Schritt 3

Install

Der Installer des Kits. aiw add holt die Component aus der Registry des Kits, löst ihre Dependencies auf und schreibt die Dateien.

Components installieren

Schreibt Dateien

Holt die Component aus der Registry des Kits, löst ihre Dependencies auf und schreibt die Dateien ins Projekt. Ab dann gehört der Code dir.

$ aiw add <items> [options]

Options

--project
Projektordner
--dry-run
Nur den Plan zeigen, nichts schreiben
--overwrite
Vorhandene Dateien ersetzen
--path
Ordner für die Components

Beispiel

$ aiw add @ai-website/pricing

Registry @ai-website

pricing and 7 dependencies resolved

+ components/ui/pricing.tsxcomponent

+ lib/kit.tsutils

+ styles/kit.csskit

+ components/ui/button.tsxbutton

+ components/ui/icon.tsxicon

+ components/ui/reveal.tsxreveal

+ components/ui/section.tsxsection

+ components/ui/motion.tsxmotion

8 files written, nothing overwritten

MCP-Tool aiw_add

Registry bauen

Schreibt Dateien

Macht aus jeder Component einen installierbaren Eintrag, die Quelle für aiw add. Nach jeder Änderung an einer Component ausführen.

$ aiw registry build [options]

Options

--source
Ordner mit registry.json, sonst das Kit
--out
Zielordner für die Einträge

Beispiel

$ aiw registry build

363 items written

public/r/*.json

Index updated

MCP-Tool aiw_registry_build

Schritt 4

Design

Farben, Fonts, Bilder und Video, so aufbereitet, wie das Web sie braucht.

Farbsystem aus Markenfarben

Schreibt Dateien

Elf OKLCH-Stufen je Farbe, jede mit Kontrast gegen Weiß und Schwarz, als Tailwind-Variablen und Tokens.

$ aiw theme [options]

Options

--colors
Farben als name=wert, Hex oder OKLCH
--brand
JSON-Datei mit Markenfarben
--project
Projektordner
--css
CSS-Datei, die geschrieben wirdDefault src/styles/theme.css
--tokens
Token-Datei, die geschrieben wirdDefault tokens/colors.tokens.json
--no-neutral
Ohne neutrale Skala
--dry-run
Nur den Plan zeigen, nichts schreiben

Beispiel

$ aiw theme --colors primary=#1f6feb

2 scales with 11 steps each, neutral added

primary-300oklch(0.78 0.10 258)1.9 : 1 white

primary-500oklch(0.58 0.19 258)4.9 : 1 white

primary-700oklch(0.42 0.15 258)8.6 : 1 white

src/styles/theme.css

tokens/colors.tokens.json

MCP-Tool aiw_theme

Schriften selbst hosten

Schreibt Dateien

Installiert Schriften lokal und schreibt eine passende Ersatzschrift, damit beim Laden nichts springt.

$ aiw fonts add <families> [options]

Options

--project
Projektordner
--css
CSS-Datei, die geschrieben wirdDefault src/styles/fonts.css
--no-variable
Statische Dateien statt Variable Font
--dry-run
Nur den Plan zeigen, nichts schreiben

Beispiel

$ aiw fonts add Inter

Inter, variable, 2 files

Fallback with matched metrics, no jump while loading

src/styles/fonts.css

MCP-Tool aiw_fonts_add

Schriften kürzen

Schreibt Dateien

Behält nur die Zeichen, die deine Seiten nutzen, und lädt sie vorab. Nach jedem Build ausführen.

$ aiw fonts subset [dist]

Options

Keine weiteren Optionen.

Beispiel

$ aiw fonts subset

214 characters in use on 38 pages

inter.woff248 KB → 19 KB

Preload added to 38 pages

MCP-Tool aiw_fonts_subset

Referenzseite auswerten

Liest nur

Bildschirmfotos in drei Breiten, Haupttext, Farbpalette in OKLCH und Schriftgrößen, als Material für den eigenen Entwurf.

$ aiw research <url> [options]

Options

--out
Zielordner
--widths
Breiten in PixelnDefault 390,768,1440
--colors
Höchstzahl der Farben in der PaletteDefault 12

Beispiel

$ aiw research https://example.com

Screenshots at 390, 768 and 1440

Main text, 1,240 words

Palette with 12 colors in OKLCH

Type scale with 9 steps

.ai-website/research/example.com

MCP-Tool aiw_research

Bilder fürs Web

Schreibt Dateien

AVIF und WebP in mehreren Breiten, nie größer als das Original, dazu ein Manifest mit Maßen und Platzhaltern.

$ aiw media optimize <dir> [options]

Options

--out
Zielordner
--widths
Breiten in PixelnDefault 480,960,1440,1920
--formats
AusgabeformateDefault avif,webp
--avif-quality
AVIF-QualitätDefault 55
--webp-quality
WebP-QualitätDefault 78

Beispiel

$ aiw media optimize src/assets

14 images, 112 files in AVIF and WebP

total18.4 MB → 2.1 MB

manifest.json with sizes and placeholders

MCP-Tool aiw_media_optimize

Teilbilder

Schreibt Dateien

Ein Bild mit 1200 mal 630 Pixeln aus einem Titel, oder eines je gebauter Seite aus Titel und Beschreibung.

$ aiw media og [options]

Options

--title
Titel für ein einzelnes Bild
--subtitle
Zweite Zeile
--dist
Gebauter Ordner, ein Bild je Seite
--out
ZielordnerDefault public/og
--brand
Name oder Domain oben
--background
HintergrundfarbeDefault #0b0b0c
--text
TextfarbeDefault #f5f5f4
--accent
Farbe des Accent-BalkensDefault #f5f5f4
--font
Font-Datei, TTF, OTF oder WOFF
--max
Höchstzahl der SeitenDefault 300

Beispiel

$ aiw media og --dist dist

38 share images at 1200 × 630

public/og

MCP-Tool aiw_media_og

Hero-Video

Schreibt Dateien

MP4 und WebM ohne Ton in sinnvoller Breite, dazu ein Posterbild in zwei Formaten.

$ aiw media video <file> [options]

Options

--out
Zielordner
--max-width
Höchstbreite in PixelnDefault 1920
--audio
Ton behalten
--crf-mp4
MP4-Qualität, kleiner ist besserDefault 23
--crf-webm
WebM-Qualität, kleiner ist besserDefault 34

Beispiel

$ aiw media video hero.mov

hero.mp41920 px · 4.2 MB

hero.webm1920 px · 3.1 MB

Poster in AVIF and WebP, sound removed

MCP-Tool aiw_media_video

Schritt 5

Check

Code, Seiten, Accessibility, Links, Speed und SEO. Gemessen statt geschätzt.

Code prüfen

Liest nur

Lässt die im Projekt installierten Prüfer in einem Lauf laufen und meldet jeden einzeln.

$ aiw lint [project] [options]

Options

--only
Nur diese Checker laufen lassen

Beispiel

$ aiw lint

✓ format and rules0 problems

✓ types0 errors

✓ unused filesnone

✓ file namesconsistent

MCP-Tool aiw_lint

Website prüfen

Liest nur

HTML, Konsole, seitlicher Überlauf, Barrierefreiheit, Links und Tempo je Seite in drei Breiten, mit Bildschirmfotos.

$ aiw check <target> [options]

Options

--pages
Höchstzahl der Seiten im BrowserDefault 5
--paths
Diese Pfade statt automatischer Auswahl
--widths
Breiten in PixelnDefault 390,768,1440
--no-external-links
Links auf fremde Seiten auslassen
--out
Zielordner

Beispiel

$ aiw check dist

5 pages at 390, 768 and 1440

HTML valid, console clean

No sideways overflow

Accessibility, 0 violations

1 broken link on /team/

Speed 98 on mobile

.ai-website/check/report.html

MCP-Tool aiw_check

SEO-Prüfung

Liest nur

Titel, Beschreibungen, canonical, Überschriften, Teilbilder, strukturierte Daten, Alt-Texte, hreflang, Sitemap und robots.

$ aiw seo audit [dist] [options]

Options

--title-min
Kürzester Titel in ZeichenDefault 25
--title-max
Längster Titel in ZeichenDefault 60
--description-min
Kürzeste BeschreibungDefault 70
--description-max
Längste BeschreibungDefault 160
--errors-only
Nur Fehler, keine Warnungen

Beispiel

$ aiw seo audit

38 pages, titles between 25 and 60 characters

2 descriptions shorter than 70 characters

canonical, hreflang, sitemap and robots in place

MCP-Tool aiw_seo_audit

Schritt 6

Publish

Suchindex, Preview und Upload. Immer erst als Dry Run.

Seitensuche

Schreibt Dateien

Baut einen statischen Volltextindex über die gebaute Seite. Ohne Server.

$ aiw search build [dist]

Options

Keine weiteren Optionen.

Beispiel

$ aiw search build

38 pages indexed, 6,410 words

dist/_search84 KB

MCP-Tool aiw_search_build

Preview online

Wirkt nach außen

Stellt den Build unter einer Wegwerf-Adresse online. Ohne --yes nur der Plan.

$ aiw preview [options]

Options

--name
Projektname, Teil der Adresse
--dist
Gebauter OrdnerDefault dist
--yes
Wirklich ausführen, sonst Dry Run

Beispiel

$ aiw preview --name northwind

Dry run, nothing goes online yet

dist38 files

Add --yes to publish

MCP-Tool aiw_preview

Zum Hoster hochladen

Wirkt nach außen

Lädt nur Geändertes hoch und löscht standardmäßig nichts. Ohne --yes läuft ein Dry Run.

$ aiw deploy <target> [options]

Options

--project
Projektordner
--yes
Wirklich ausführen, sonst Dry Run

Beispiel

$ aiw deploy live

Dry run against the target live

changed12 files

deletednone

Add --yes to upload

MCP-Tool aiw_deploy

Schritt 7

KI-Assistenten

Ein Command bindet ein Projekt an. Ab dann ist jeder Command ein Tool für deinen Assistenten.

KI-Assistenten anbinden

Schreibt Dateien

Schreibt die .mcp.json eines Projekts und ergänzt die Regeln des Kits in der CLAUDE.md. Eigene Einträge bleiben.

$ aiw mcp init [project] [options]

Options

--remote
Stattdessen den eigenen HTTP-Server nutzen
--no-rules
CLAUDE.md unverändert lassen

Beispiel

$ aiw mcp init

.mcp.json with the kit server

Kit rules added to CLAUDE.md, your entries stay

Your assistant now has 21 tools

MCP-Tool aiw_mcp_init

Server für KI-Assistenten

Startet die CLI als MCP-Server für Claude, Cursor, Copilot, Codex, Gemini und andere auf demselben Rechner. Jeder Command wird ein Tool.

$ aiw mcp

Options

Keine weiteren Optionen.

Beispiel

$ aiw mcp

Server on stdio, 21 tools ready

Server über HTTP

Dieselben Tools für den eigenen Server, mit Token geschützt. Publish bleibt aus, bis du es erlaubst.

$ aiw serve [--port 8787] [--host 127.0.0.1]

Options

--port
Port des ServersDefault 8787
--host
Adresse, auf der der Server lauschtDefault 127.0.0.1

Beispiel

$ aiw serve --port 8787

http://127.0.0.1:8787/mcp

Token required for every call

Publishing stays off until you allow it

Schritt 8

Mehr

Weitere Commands der CLI.

Show newer component versions

Liest nur
$ aiw outdated [options]

Options

--project
Projektordner

MCP-Tool aiw_outdated

Update components

Schreibt Dateien
$ aiw update [components] [options]

Options

--project
Projektordner
--dry-run
Nur den Plan zeigen, nichts schreiben

MCP-Tool aiw_update

Oft gesucht

Direkt zu

In die Zwischenablage kopiert