Die Gestaltung nehmen
Drei Dateien, eine Seite
1 · Die Dateien holen. Das Repository beidwerk-web auf GitHub
hat sie in site/: die Schriften (Archivo und IBM Plex Mono, beide unter offenen Lizenzen), die Design-Tokens
(beidwerk.css: Farben, Schrift, Abstände, hell und dunkel) und das Kit (kit.css).
2 · Einbinden.
<link rel="stylesheet" href="beidwerk/fonts/fonts.css">
<link rel="stylesheet" href="beidwerk/beidwerk.css">
<link rel="stylesheet" href="beidwerk/kit.css">
<body class="bw" data-theme="light"> <!-- light = der Beleg, dark = die Bühne -->
3 · Mit dem Kit bauen. Überschriften, Knöpfe, Karten, Tabellen, Tags und Hinweise nehmen die bw--Klassen
(bw-display, bw-button, bw-card, bw-table, bw-tag, bw-notice…). Farbe, Schrift und Abstände kommen
aus den Tokens, nie von Hand.
Die Bühne und der Beleg
Zwei Arten, eine Sprache
Tapsigned · die Bühne
Deine Arbeit, von beiden bestätigt.
Kopf, Bilder, leere Zustände und erste Schritte stehen auf der Bühne.
Der Beleg · von beiden Seiten bestätigt
| 1 Melange | € 3,80 |
| Café Ewig, Wien 7 | 2026-03-14 07:30 |
| Bestätigt von | Anni H. · ECHT |
Bestätigt Freiregister #1
- Die Bühne (dunkel) für Bilder, erste Schritte und Geschichten.
- Der Beleg (hell) für alles, was man zweimal liest: Formulare, Bestätigungen, Preise.
- Ein Rot pro Bildschirm, für das eine Wichtige.
Mach es zu deinem
Was es zu Beidwerk macht
- Deine eigene Akzentfarbe. Dein Produkt ändert die Farbe, nie die Regeln.
- Zwei Dinge treffen sich. Zeig den Moment der Berührung: eine Bestätigung, ein Handschlag, eine Zahlung, die ankommt.
- Ruhig rundherum, Spiel in den Zeichen. Das Verspielte bleibt klein, der Rest ruhig.
- Keine Schrift in Bildern. Überschriften, Preise und Namen werden gesetzt, über oder neben dem Bild.
Für Agenten
Ein MCP-Server, einfaches JSON
Auch Agenten können im Stil von Beidwerk arbeiten. Der Beidwerk-MCP-Server liest nur und läuft auf deinem eigenen Rechner, ohne Schlüssel und ohne Kosten. Ein Befehl verbindet ihn mit Claude Code:
claude mcp add beidwerk -- uvx --from git+https://github.com/maximedogawa/beidwerk-web beidwerk-mcp
| Werkzeug | Was es liefert |
|---|---|
design_principles |
die sieben Prinzipien, die Probe für alles Neue, was Beidwerk nie tut (Englisch oder Deutsch) |
design_tokens |
die Farben für die Bühne oder den Beleg, Schrift, Abstände, Rundungen und Linien |
kit |
die drei Stylesheets zum Einbinden und jede bw--Komponente mit einem HTML-Beispiel |
signs |
die vier roten Zeichen mit ihrer Bedeutung im B und ihrem SVG |
build_prompt |
ein Bild-Prompt im Stil von Beidwerk für jedes Motiv: hell (der Beleg) oder Nacht (die Bühne) |
Dieselben Daten gibt es auf dieser Seite für Agenten, die nur das Web lesen: api/beidwerk.json und llms.txt.
Wie Beidwerk selbst entsteht
Von Hand, mit KI-Werkzeugen
Beidwerk macht ein Mensch mit einer Reihe von KI-Werkzeugen, Schritt für Schritt: jedes Bild, jede Einstellung und jeder Schnitt wird von Hand ausgewählt, und das meiste wird verworfen.
- Die Band. Vier Figuren haben als Konzeptzeichnungen begonnen. Ihre Gesichter entstehen in Midjourney jedes Mal aus denselben Vorlagen, damit Nahaufnahme und Totale dieselbe Person zeigen.
- Die Lieder. Auf Österreichisch geschrieben, mit Suno gesungen, jedes mit einer singbaren englischen Fassung.
- Die Musikvideos. Einstellung für Einstellung auf das Lied geplant: ein echt wirkendes Standbild pro Einstellung, zu einer kurzen bewegten Einstellung gemacht, im Takt geschnitten, eine Farbstimmung pro Video. Wo ein Mitglied singt, folgt der Mund der echten Stimme des Lieds.
- Die Apps. In derselben Sprache gestaltet und eine nach der anderen gebaut, von der ersten Idee bis live.