Es gibt diesen Erwartungsdruck, den ich kenne: Ich arbeite in der Kommunikation und weiss, was eine gute Webseite braucht – zumindest als Auftraggeber. Und genau das macht den Moment vor dem leeren Dokument so lähmend: Der Anspruch an sich selbst.
Jetzt habe ich sie gebaut: mit KI, über ein paar Tage verteilt, in rund 11 Stunden.
Das hier ist mein erster «Building in Public»-Post.
Was du mitnimmst
- Die Vorbereitung hat mehr gebracht als jeder Prompt: Mit Konzept und Brand Guide im Rücken wusste Claude, was ich will.
- Übersprungene Schritte habe ich später doppelt bezahlt, obwohl ich das vorher wusste.
- Elf Stunden für die Webseite, und nebenbei Brand Guide, Logodateien und ein Prozess, den ich wiederverwenden kann.
Bevor eine Zeile Code geschrieben wurde
Der grösste Irrtum beim KI-gestützten Bauen: zu glauben, man könne direkt loslegen. Kann man. Aber das Ergebnis sieht dann auch so aus.
Ich habe zuerst den strategischen Rahmen gebaut: Kommunikationskonzept, Brand Guide und Website-Wireframe, teilweise mit bestehenden Abläufen erarbeitet und dann von Hand verfeinert. Konkret hiess das, die Waldmann-Identität festzulegen: ein dunkles Waldgrün als Hauptfarbe, ein klares Blau als Akzent, Inter als Schrift, der intelligente Wald als Bild dahinter. Dazu die Claims «Wo Ideen Wurzeln schlagen» und «Natürlich digital», der Deskriptor «KI-Kommunikation für KMU» und drei Cases statt vieler: Content-KI, VeggieVault, Coaching.
Danach eine Awwwards-Recherche: Ich wollte verstehen, nach welchen Prinzipien ausgezeichnete Agentur-Webseiten gebaut sind, bei Farner, Jung von Matt, June und den Awwwards-Gewinnern. Das Resultat war ein klarer Designrahmen: expressive Typografie, organische Layouts, dunkles Farbschema, maximal drei Farben.
Die Seite selbst soll vorführen, was KI kann.
Tooling: Wo Setup überraschend Spass gemacht hat
Ich dachte, der technische Teil würde am meisten Nerven kosten. Deployment, Hosting, DNS. Hatte halb Recht.
Claude Code in VS Code integrieren und mit Code schreiben loslegen: unter fünf Minuten, und überraschend befriedigend. Das ist selten bei Setup-Prozessen. Normalerweise erwartet man Frustrationspunkte und bekommt diese auch. Ein YouTube-Video hat mir dabei den entscheidenden Workflow gezeigt – wie Claude Code in der Praxis funktioniert, wie man mit CLAUDE.md arbeitet, wie man Iterationsschleifen aufbaut. Für diesen konkreten Anwendungsfall war es präziser als jeder Artikel. (Ja, es war einer dieser unausstehlichen Hustle-Bro-Kanäle mit «|AI» im Kanalnamen.)
Aus dem Brand Guide wurde dann ein BRAND.md, eine maschinenlesbare Datei mit den Marken-Vorgaben, die Claude bei jedem Schritt als Referenz nutzt. Einmal definiert, muss ich sie nicht mehr in jeden Prompt kopieren. Technisch habe ich mich für Astro als Basis entschieden, davor aber einen React-Prototyp gebaut, um schnell ausprobieren zu können. Was das genau bedeutet, verstehe ich erst nach und nach.
Hostpoint aufsetzen war nicht schwieriger, nur öder: die Art von öd, bei der man einfach durchklickt.
Die Lernphase: 3–4 Stunden, bis der Prozess sitzt
Die erste Phase in Claude.ai war Spielerei, ein bisschen Ausprobieren, ein bisschen Lernen. Das Projekt selbst hat dann mit Claude Code von vorne begonnen: mit Brand Guide, Logo-Dateien, Bildern, allem drum und dran.
Was mich dabei beeindruckt hat: der Screenshot-Loop mit eingebauter Qualitätsprüfung. Claude macht einen Screenshot des aktuellen Stands, bewertet ihn nach definierten Kriterien, identifiziert Abweichungen und korrigiert sie selbst, jeweils zwei Runden. Kein Hexenwerk, aber ein Werkzeug, das ich vorher nicht kannte und jetzt nicht mehr missen will.
Die Webseite selbst: 5 Stunden + 2 Stunden
Die Hauptseite hat 5 Stunden gekostet, die Unterseiten nochmal 2. Gerade bei den Texten war mir wichtig, meine Notizen und Gedanken einfliessen zu lassen. Die KI recherchiert und strukturiert Inhalte, oft besser als ich. Was sie aus keinem Briefing ableiten kann, ist meine Perspektive: die Erfahrung und der Kontext, die ich mitbringe. Daran merke ich, ob ein Text nur klingt oder für mich stimmt.
Die vier Lektionen, die hängen geblieben sind
- Vorbereitung schlägt Prompting. Mein bestes Ergebnis kam nicht aus dem cleversten Prompt. Es kam daher, dass ich vorher ein solides Kommunikationskonzept und einen durchdachten Brand Guide hatte. Claude hatte klare Rahmen und Richtlinien zum Arbeiten. Das lernen viele, die mit KI arbeiten, erst spät: dann, wenn ihr Ergebnis mittelmässig bleibt, egal wie sie den Prompt formulieren.
- Prompts, die sich selbst kontrollieren. In Claude Code bin ich auf Prompts angewiesen, die präzise genug sind, damit Claude sein Ergebnis gleich selbst prüft. Das ist eine Fähigkeit, die man lernen muss.
- Keine Schritte überspringen, nur weil KI es theoretisch ermöglicht. Ein guter kreativer Prozess läuft in Runden, und Fehler, die spät auffallen, kosten ein Mehrfaches an Zeit. Das wusste ich, und es hat mich trotzdem nochmal erwischt.
- Dokumentation ist mühselig, und ich mag sie nicht. Aber sie ist das Fundament für alles, was danach kommt: Ohne sauber dokumentierten Ablauf lässt sich kein Resultat wiederholen.
Gesamtaufwand: rund 11 Stunden, Lernphase inklusive.
Der realistische Vergleich sind nicht die Kosten einer Digitalagentur. Der realistische Vergleich ist Squarespace oder Wix – die Alternative, die die meisten KMU tatsächlich wählen würden. Mit etwas Aufwand und einem guten Template kommt man da auf CHF 200–400 pro Jahr. Aber Stunden investiert man trotzdem, und das Resultat sieht aus wie Squarespace. Was ich gebaut habe, sieht auch aus wie Squarespace, aber es ist Teil eines Pakets: neben der Webseite habe ich mindestens noch einen eigenen Brand Guide, Logodateien in allen Formaten und ein Kommunikationskonzept für meine Agentur. Dazu habe ich einen reproduzierbaren Prozess gelernt, der jedes Mal besser wird. Das ist der Wert der eingesparten CHF 200–400 resp. der investierten 11 Stunden.
Als Nächstes: Wie ich mit Tessera eine App gegen die To-do-Liste baue – Building in Public, Stein für Stein.
