Ich hab diese Website gestern Abend angefangen. Heute um 14 Uhr war sie fertig.
Dazwischen habe ich geschlafen. Nicht viel, aber genug.
Das ist kein Blogpost darüber, wie schnell KI alles macht. Das ist ein ehrlicher Bericht darüber, was Vibe Coding in der Praxis bedeutet, wenn man es ernst nimmt. Mit allem was dabei schiefläuft, was überrascht, und was am Ende dabei herauskommt.
Was vibecraft.rocks ist, und warum ich es gebaut habe
Ich bin Alex Januschewsky. Ich arbeite seit 1989 in Kommunikation und Werbung, unter der Marke Prompt Rocker auf digitalhandwerk.rocks berate ich EPUs und KMUs zu generativer KI. vibecraft.rocks ist etwas anderes. Kein Beratungsangebot, kein Kurs, kein Newsletter. Es ist mein Labor. Der Ort, wo ich dokumentiere was ich baue, wie es funktioniert, und was ich dabei lerne.
Die Idee war klar: Vibe Coding als Praxis sichtbar machen. Nicht als Hype-Begriff, nicht als LinkedIn-Schlagwort. Sondern als konkretes Handwerk mit konkreten Ergebnissen.
Das erste Projekt war die Website selbst.
Abend, Tag eins: Die Marke
Bevor eine einzige Zeile Code geschrieben wurde, stand eine Grundsatzfrage. Was ist vibecraft eigentlich? Nicht im Marketing-Sinn, sondern wirklich: wofür steht der Name, wer soll das lesen, was verspricht die Marke?
Der Name verbindet zwei Gegensätze. „Vibe“ steht für den Flow, die Energie, das schnelle Bauen. „Craft“ steht für das Handwerk, die Sorgfalt, den Code Review. Das ist keine zufällige Kombination. Das ist die Spannung in der ich täglich arbeite.
Was daraus wurde: ein Claim in zwei Sätzen. „Build loud. Ship safe.“ Und ein Wordmark, das diese Spannung typografisch trägt: „vibe“ in Sometype Mono, smooth und technisch, in Electric Yellow. „craft“ in Pixelify Sans, pixelig und präzise, in Weiß. Beide in gleicher optischer Größe, nebeneinander, mit einem blinkenden Cursor dahinter.
Der Cursor blinkt. Das ist kein Zufall. Das ist ein Signal: hier arbeitet jemand.
Die Farbe war schnell klar. Electric Yellow auf Near Black. Kein Lila, kein generisches KI-Blau, kein Pastellgradient. Yellow wie Absperrband, wie Warnfarbe, wie Baumaschinen. In der KI-Tool-Landschaft ist das komplett unbesetzt.
Und dann die Schriften. Drei Stück: Sometype Mono für den technischen Part und das Wordmark, Pixelify Sans für Labels, Buttons und Tags, Bricolage Grotesque für alles was wirklich gelesen wird.
Pixelify Sans hat einen Grund, der über Design hinausgeht. Meine erste Programmiererfahrung war 1983 auf einem Commodore VC-20, in BASIC. Dann kam der C64. Dann der Amiga 1000, wo ich das erste Mal in 68000-Assembler reingeschmökert habe. Nicht tief genug um damit produktiv zu sein, aber tief genug um zu verstehen wie ein Prozessor wirklich denkt. Der Pixel-Font ist eine Referenz auf diese Ära. Kein Nostalgie-Kitsch, sondern Biografie.
Jahrzehnte lang habe ich keinen Code mehr geschrieben. Bis Vibe Coding kam. Das ist der Kreis, der sich schließt.
Nacht: DNS, SSL und der erste Fehler
Die Domain war schon registriert. vibecraft.rocks, bei Mittwald. Aber: die Nameserver zeigten auf Cloudflare, und im Cloudflare-Interface gab es zunächst nur einen NS-Record. Keine Möglichkeit, weitere Records anzulegen.
Das ist ein klassisches Setup-Problem, das aussieht wie ein Bug, aber keiner ist. Die DNS-Verwaltung liegt bei Cloudflare, nicht bei Mittwald. Also: Cloudflare Dashboard, vibecraft.rocks, DNS, und die Records von Hand anlegen.
Zwei A-Records für die Mittwald-IP. Vier MX-Records von agenturserver.de. SPF als TXT-Record. DKIM. SSL auf „Vollständig (strikt)“, weil Mittwald ein gültiges Let’s Encrypt-Zertifikat hat und ich keinen halbgaren „Flexibel“-Modus will.
Das Warndreieck bei den A-Records hat mich länger beschäftigt als nötig. „Dieser Hostname ist nicht durch ein Zertifikat abgedeckt.“ Das war kein DNS-Problem. Das war Cloudflares Universal SSL, das noch nicht ausgestellt war. Es wird ausgestellt sobald der erste echte HTTPS-Request über den Cloudflare-Edge läuft. Einfach warten.
WordPress war schon installiert. Das Postfach dev@vibecraft.rocks war schnell angelegt.
Morgen, Tag zwei: Child Theme, Elementor, die ersten Snippets
Ein Child Theme auf Basis von Hello Elementor. Nicht weil ich musste, sondern weil ich alle Designentscheidungen ein einziges Mal treffen und dann nie wieder anfassen will. Farben, Schriften, Größen: alles in CSS Custom Properties, alles als Utility Classes verfügbar. Elementor Global Colors und Global Typography werden beim Aktivieren automatisch gesetzt.
In der Theorie. In der Praxis hat Elementor den Kit nicht automatisch übernommen. Das ist ein bekanntes Timing-Problem: der after_switch_theme-Hook feuert bevor Elementor vollständig geladen ist.
Lösung: WPCode Plugin, PHP-Snippet direkt in WordPress, und die Initialisierung manuell getriggert. Funktioniert sauber, ist nachvollziehbar, und hat mich eine halbe Stunde gekostet die ich im nächsten Projekt spare.
Dann die Snippets. Header, Footer, Hero, „Wie ich arbeite“, Blog-Section, About-Teaser, CTA. Jeder Snippet folgt demselben Prinzip: ein Konfigurations-Block ganz oben, alles andere darunter abgesichert mit !important gegen Elementor-Overrides.
Das ist der Punkt, an dem es interessant wird.
Elementor ist kein Feind. Aber es hat seine eigene Meinung über Schriftgrößen, Farben und Abstände. Ohne !important verliert man diesen Kampf regelmäßig. Mit !important ist man der Chef.
Der Blog-Widget hat noch einen Extra-Layer: WordPress REST API mit eigenem Cache-Endpunkt über WPCode. Erster Request baut den Cache, alle weiteren kommen aus dem Transient, laufen 12 Stunden, und werden automatisch geleert wenn ein neuer Post veröffentlicht wird. Dazu ein Skeleton Screen, der sofort beim Laden erscheint. Der Nutzer sieht nie ein leeres Widget.
Was Vibe Coding in diesem Projekt wirklich bedeutet hat
Ich sage das nicht, um zu beeindrucken: ich habe in dieser Session keinen einzigen Block Code geschrieben ohne ihn zu lesen.
Das ist der Unterschied zwischen Vibe Coding und blindem Copy-Paste. KI schreibt schnell. Sehr schnell. Aber „schnell fertig“ ist nicht dasselbe wie „fertig“. Jeder PHP-Snippet wurde auf Logik geprüft. Jeder CSS-Block auf Konflikte. Jeder REST-Endpunkt auf Sicherheitslücken.
Das Assembler-Wissen vom Amiga 1000 hilft dabei bis heute. Nicht weil ich noch 68000-Opcodes kenne, sondern weil ich gelernt habe, wie ein Computer denkt. Das macht Code-Reviews schneller und treffsicherer.
Zur Klarheit, weil die Begriffe oft durcheinandergeraten: Vibe Coding bedeutet KI-gestützte Entwicklung im Flow, ohne starres Voraus-Planen. Es bedeutet nicht, KI-Output blind zu deployen. Der „Vibe“ ist die Arbeitsweise, das „Craft“ ist die Qualitätssicherung. Wer nur das eine macht ohne das andere, baut entweder zu langsam oder zu leichtsinnig.
Was dabei herausgekommen ist
Sieben Seiten: Startseite, Blog-Archiv, Über mich, Projekte, Kontakt, Impressum, Datenschutz.
Zehn HTML-Snippets für Elementor, alle konfigurierbar ohne den Code zu öffnen.
Ein vollständiges Brand Design System: drei Schriften, drei Primärfarben, ein Claim, ein Wordmark mit blinkendem Cursor.
Ein WordPress REST API-Endpunkt mit Cache, Skeleton Screen und automatischer Cache-Invalidierung.
Eine Datenschutzerklärung die Cloudflare, Matomo, Elementor Pro Forms korrekt abdeckt, nach österreichischem Recht.
Und dieser Blogpost.
Alles zusammen: ein Abend, eine Nacht Schlaf, ein Vormittag.
Das ist nicht, weil ich besonders schnell bin. Das ist, weil Vibe Coding genau das ermöglicht: als Einzelkämpfer ohne Dev-Abteilung ein Produkt zu bauen das früher ein Team und mehrere Wochen gebraucht hätte.
Was noch kommt
Die Website ist da. Der Inhalt kommt noch.
vibecraft.rocks wird in den nächsten Wochen mit echten Projekten gefüllt. Tools für EPUs und KMUs, die vielleicht auch mal kaufbar sind. Dokumentationen die zeigen wie sie gebaut wurden. Blog-Posts die ehrlich berichten was dabei schiefgelaufen ist.
Wer keine Dev-Abteilung hat, aber ein Problem das ein Tool lösen könnte: das ist die Zielgruppe. Nicht Konzerne. Nicht Startups mit fünfstelligem Entwicklungsbudget. Sondern die Einzelkämpfer und die kleinen Teams, die einfach wollen dass etwas funktioniert.
Build loud. Ship safe.
Häufige Fragen zum Vibe Coding Prozess
Kann ich so eine Website auch ohne Programmierkenntnisse bauen?
Bedingt. Vibe Coding mit KI macht vieles zugänglicher, aber du brauchst ein Grundverständnis davon was Code tut. Du musst nicht selbst schreiben können, aber du musst lesen und bewerten können. Wer das überspringt, deployt früher oder später etwas das er nicht versteht.
Wie lange hat die Planung gedauert?
Keine separate Planung. Das Konzept ist im Dialog mit Claude entstanden: Marke, Positionierung, Design, Code. Das ist der Kern von Vibe Coding. Nicht zuerst planen, dann umsetzen, sondern beides gleichzeitig, iterativ, im Gespräch.
DSGVO und Vibe Coding: wie passt das zusammen?
Besser als viele denken. KI kann Datenschutzerklärungen strukturieren, Pflichtangaben prüfen und Formulierungen vorschlagen. Den juristischen Check muss trotzdem ein Mensch machen. Ich habe die Datenschutzerklärung nach österreichischem ECG, TKG 2021 und DSGVO aufgebaut und jeden Abschnitt selbst geprüft.
