Von der Idee zur fertigen Seite. Ein Schritt nach dem anderen.

Der Weg vom leeren Ordner bis zur Seite, die danach selbst gepflegt wird. Jeden Schritt abhaken, wenn er erledigt ist. Der Fortschritt wird automatisch gespeichert, das Weitermachen ist also jederzeit möglich. Die Tipps lassen sich bei Bedarf aufklappen. Und keine Sorge: nichts geht kaputt, alles ist rückholbar.

Das Briefing liegt schon im Ordner: Bauplan_Kayser-Website.md (was gebaut wird und in welchen Grenzen) und Taste-Skill.md (der Design-Maßstab). Beides bekommt Claude Code als Grundlage. Aber wichtig: Der Bauplan legt nur das Grundgerüst und die Leitplanken. Wie die Seite am Ende wirklich aussieht, entscheidest du selbst.

Vorbereiten

Bevor Claude Code überhaupt aufgemacht wird. Das braucht es für einen sauberen Start.

Assets sortieren. Bestes Bild- und Videomaterial in einen Ordner legen: Strecke, Arbeit mit den Fahrern, Workshop, Ironman.

iTipp ›

Nicht alles wird gebraucht, das Beste reicht. Eine gute Vorauswahl jetzt macht den Aufbau später viel schneller. Das Hero-Video ist besonders wichtig (der dunkle, dynamische Einstieg).

Briefing bereitlegen. Bauplan, Taste, Anforderungen, Antworten und Styleguide liegen im Projektordner.

iWas das ist ›

Der Bauplan sagt, was gebaut wird und wo die Grenzen und die Freiheiten sind. Die Taste ist der Design-Maßstab (damit es hochwertig aussieht). Zusammen führen sie Claude Code, damit kaum etwas schiefgeht.

Schriften festlegen. Nur den Link zur Schriftart bereitstellen: Onest (Headlines) bei Google Fonts, dazu Open Sans für den Text.

iNicht runterladen ›

Nichts herunterladen nötig. Es reicht, Claude Code den Link zur Schrift zu geben (die Onest-Seite bei Google Fonts), er bindet sie direkt ein.

Inspiration sammeln. hintsa.com und weitere Vorbild-Seiten ansehen. Von Stellen, die gefallen, Screenshots machen und in einen Ordner ablegen.

iWarum Screenshots ›

Die Screenshots sind später Gold wert: sie zeigen Claude Code genau, was gemeint ist, besser als jede Beschreibung. Also ruhig mehrere Stellen festhalten (Weißraum, große Zahlen, ruhige Bewegung).

Sitemap durchgehen. Im Bauplan nachsehen, welche Seiten kommen (EPC, BGM, Motorsport, Über mich und so weiter).

Tool bereithalten. Den Krankheitskostenrechner für später griffbereit halten.

iWann das dran kommt ›

Das kommt erst in Phase 4. Gut, dass der Rechner schon fertig ist: die Seite baut dann darauf auf, nicht bei null.

Erster Schritt: „Normaler“ Claude

Opus 4.8, Effort Max

Im normalen Claude den Bauplan und die Vision durchgehen.

iWarum getrennt vom Bauen ›

Im Chat wird frei und schnell gedacht, ohne dass echte Dateien angefasst werden. Fehler kosten hier nichts. Mit einem klaren Plan geht es dann in Claude Code, und der baut zielsicher.

Die eigenen Entscheidungen aus dem Bauplan klären: welches Video in den Hero, welche Bilder wo, grobe Selbstcheck-Fragen.

iDas sind deine Freiheiten ›

Im Bauplan sind das die mit ✓ markierten Punkte. Hier führt niemand, das ist der Gestaltungsraum. Genau der macht die Seite zu deiner.

Pro Seite grob überlegen, was drauf soll (auf Basis Bauplan).

Am Ende steht ein klarer Plan für Phase 2.

Jetzt in Claude-Code

Erst die ganze Struktur in einem Rutsch. Noch nichts online.

Von Claude Code ein lokales Projekt aufsetzen lassen. Die Struktur (Astro, GitHub, Netlify, Resend) liegt vor.

iWas heißt lokal ›

Lokal heißt: nur auf dem eigenen Rechner, nur für dich sichtbar. Das Anbinden an GitHub und Netlify (also online gehen) kommt bewusst erst in Phase 5, wenn das Design steht. Das Projekt ist aber von Anfang an so gebaut, dass das später ohne Umbau klappt.

Claude Code den Bauplan geben: Bau nach dem Bauplan_Kayser-Website.md und halt dich an die Taste-Skill.md

In einem großen Auftrag das komplette Grundgerüst bauen lassen: alle Seiten grob, CI eingebunden (Farben, Onest und Open Sans). Dafür Opus 4.8 mit Ultra Code nutzen.

iWarum in einem Rutsch ›

So steht sofort eine komplette Struktur zum Anfassen, statt bei null pro Seite loszulegen. Der erste Wurf ist nie perfekt, das ist Absicht. Verfeinert wird in Phase 3, Seite für Seite.

Die lokale Vorschau starten und das Gerüst ansehen.

Nicht an Details aufhängen. Die interaktiven Tools kommen bewusst noch nicht (Phase 4).

Seite für Seite verfeinern

Hier wird aus dem Gerüst die fertige Seite. Lokal, in Ruhe, eine nach der anderen.

Eine Seite vornehmen, am besten zuerst den dunklen Video-Hero der Startseite.

iEins nach dem anderen ›

Lieber drei kleine, klare Aufträge nacheinander als einer mit drei Wünschen drin. So bleibt jedes Ergebnis prüfbar, und wenn etwas nicht passt, ist klar, welcher Schritt schuld war.

Erst den Plan zeigen lassen: Beschreib mir kurz, was du vorhast, bevor du etwas änderst

iDer wichtigste Satz ›

So werden Missverständnisse abgefangen, bevor sie zu Code werden. Passt der Plan, grünes Licht geben. Passt er nicht, korrigieren, bevor Zeit verloren geht.

Konkret sagen, was gewünscht ist, und wenn möglich eine Referenz zeigen (hintsa-Screenshot, ein Bild).

iKonkret schlägt vage ›

Nicht „mach es schöner“, sondern zum Beispiel „mehr Abstand zwischen den Blöcken, die Überschrift eine Stufe größer“. Ruhig auch sagen, was nicht gewollt ist: aber die Bewegung ruhig halten.

Die echten Inhalte einbauen (Bewertungen, Beweise, Motorsport) und die Leitplanken beachten (unten).

iAchtung, hier passieren Fehler ›

Kein 24-Stunden-Rennen, die 2,70 Euro nur mit Quelle, nur der 590-Euro-Preis auf die Seite. Die komplette Liste steht unten unter Deine Leitplanken. Einmal durchgehen, bevor Inhalte fest werden.

Lokal prüfen, Feinschliff machen, dann kurz den Taste-Check (unten).

Durch alle Seiten arbeiten (Tracker). Jede fertige Seite: Haken dran.

Deine Seiten

Die Seiten aus dem Bauplan sind schon eingetragen. Jede abhaken, wenn sie sitzt. Ändern, löschen oder ergänzen ist möglich.

Die interaktiven Tools einbauen

Jetzt kommt der Krankheitskostenrechner rein. Noch lokal.

Den Krankheitskostenrechner als Datei in den Projektordner legen.

iWarum ›

So baut die Seite auf dem fertigen Rechner auf, nicht bei null. Claude Code nimmt ihn als Grundlage und passt ihn in die Seite ein.

Claude Code beauftragen: Bau den Krankheitskostenrechner aus dieser Datei in die BGM-Seite ein, im Stil der Seite

Festlegen, was nach dem Ausfüllen passiert (Ergebnis zeigen, dann Erstgespräch anbieten). Die E-Mail-Zustellung kommt erst in Phase 5 (Resend).

iJetzt Struktur, später Anbindung ›

Das Tool und sein Ablauf werden jetzt gebaut und lokal getestet. Dass am Ende wirklich eine Mail rausgeht, wird in Phase 5 über Resend angebunden. So bleibt es übersichtlich.

Den Rechner lokal testen: Werte eingeben, Ergebnis prüfen.

Anbinden und live gehen

Wenn das Design steht, geht die Seite raus in die Welt.

Die ganze Seite nochmal lokal durchsehen, auch im schmalen Fenster (Handy-Check).

Die Seite an GitHub anbinden lassen (Versionen, das Sicherheitsnetz).

iWer macht was ›

GitHub speichert jede Version. Netlify baut die Seite und stellt sie online. Resend verschickt E-Mails (Kontakt und Tools). IONOS ist die Adresse. Nichts davon wird selbst bedient, es läuft von allein.

An Netlify anbinden lassen: ab jetzt veröffentlicht sich die Seite automatisch.

Resend anbinden lassen: Kontaktformular und Tool-Mails gehen jetzt echt raus.

Die IONOS-Domain verbinden und alles live prüfen, inklusive einer echten Test-Anfrage übers Formular.

Etwas komisch online? Ruhig bleiben: Roll die letzte Veröffentlichung zurück, in Ruhe fixen, neu live.

Selbst pflegen, die Zukunft

Ab jetzt geht es allein. Das ist der Sinn der ganzen Übung.

Für jede spätere Änderung: erst lokal ändern, Plan zeigen lassen, konkret prompten, lokal prüfen.

Zufrieden? Commit und live: Speichere die Änderung und schick sie live

Größere Sachen: erst kurz im normalen Claude durchdenken, dann in Claude Code umsetzen.

Im Zweifel: nichts kann kaputtgehen, alles ist rückholbar.

Geschafft. Die Seite ist live, und du weißt, wie sie funktioniert.

Genau darum ging es: nicht nur eine Seite, sondern eine, die sich selbst pflegen und weiterbauen lässt. Für die nächste Änderung geht es einfach wieder bei Phase 6 los.

Zum Nachschlagen, immer dabei

🛡Deine Leitplanken (nie falsch machen)›

Das sind die harten Grenzen aus dem Bauplan. Wenn Claude Code hier abweicht, zurückweisen.

Motorsport: Trackside Coach bei Smyrlis Racing, NLS, 12 Fahrer. Kein 24-Stunden-Rennen. F1 nur als Faszination und Methoden-Ursprung, aktive Rolle ist NLS.
Die 2,70 Euro nur mit Quelle „iga.Report 28/40“ und als Median-Referenz, nie als Versprechen.
Keine „Jahre im Feld“ als Kennzahl. Stärkste Belege sind Motorsport, Zertifizierung, Bewertungen.
Preise: nur der EPC-Kickstart mit 590 Euro auf die Seite. BGM-Sprint nicht mit Preis, nur „auf Anfrage“.
Mineralgrün nur als dünner Akzent, nie als große Fläche. Ein Akzent über die ganze Seite.
„Corporate Health Solutions“ nur im BGM-Kontext, im EPC weglassen.
Ton: Beweis vor Behauptung, kein Marketing-Deutsch, keine Phrasen. Keine langen Gedankenstriche im Text.

⚡Fertige Rezepte (Copy-Paste-Prompts)›

Text ändern

Auf der Seite [welche] steht im Abschnitt [welcher] der Text „[alt]“. Ändere ihn zu „[neu]“. Sonst nichts anfassen.

Sektion verfeinern

Nimm dir auf der Startseite den [Abschnitt] vor: [was soll anders sein]. Halt dich an Bauplan und Taste. Zeig mir erst den Plan.

Bild oder Video einsetzen

Setz in [wo] das Bild/Video [Dateiname] ein. Halt es ruhig, im Hintsa-Stil. Die Datei liegt in [Ordner].

Dein Tool einbauen

Bau meinen [Selbstcheck / Benchmark] aus der Datei [Dateiname] in die Seite [welche] ein, im Stil der Seite. Zeig mir erst den Plan.

Live schalten

Sieht gut aus. Commit die Änderung und schick sie live.

🏁Der Taste-Check (so prüfst du dein Ergebnis)›

Nach jeder Seite kurz drüberschauen. Stimmt etwas nicht, Claude Code Bescheid geben und nachbessern lassen.

Sehr viel Weißraum, große leichte Headlines, ruhig statt laut.
Mineralgrün nur als dünner Akzent, nirgends als große Fläche.
Bewegung ist dezent: sanftes Einblenden, leichter Parallax. Ruhig kippt nie in unruhig.
Echte Bilder und Videos statt leerer grauer Kästen.
Der Hero passt auf den Bildschirm, ohne zu scrollen.
Kein Layout wiederholt sich stumpf (keine drei gleichen Karten).
Normale Sätze, keine Werbe-Floskeln, keine langen Gedankenstriche.

🚨Wenn es hakt›

Claude Code baut etwas anderes als gemeint. „Das war nicht, was ich wollte. Ich meinte X. Änder es entsprechend.“ Er korrigiert, es muss nichts selbst repariert werden.

Es wird immer verworrener. Stopp. „Mach alle Änderungen seit dem letzten funktionierenden Stand rückgängig.“ Sauber neu ansetzen ist oft schneller als flicken.

Er versteht nicht. Meist fehlt Kontext. Ein Beispiel zeigen, einen Screenshot, oder das Ziel statt den Weg beschreiben.

Die Aufgabe ist zu groß geworden. Zerlegen: „Lass uns nur mit einem Teil anfangen, den Rest danach.“

Faustregel: Wenn dreimal dasselbe erklärt wird und es klappt nicht, zurück in den normalen Claude, die Sache neu durchdenken und mit einem klareren Plan zurückkommen.

🏆Die 4 goldenen Regeln›

Reden wie mit einem Kollegen. Ganze Sätze. Sagen, was gewollt ist und warum.
Erst denken, dann bauen. Idee zuerst im normalen Claude, dann in Claude Code umsetzen.
Erst den Plan zeigen lassen. Das spart die meisten Korrekturschleifen.
Nichts geht kaputt. Alles ist rückholbar. Ruhig Sachen ausprobieren.

📖Mini-Glossar›

Repo: Der Projektordner mit allen Dateien und ihrer Versionsgeschichte. Liegt bei GitHub.
Commit: Ein gespeicherter Änderungsstand. Wie ein Speicherpunkt im Spiel, jederzeit wiederherstellbar.
Deploy: Das Veröffentlichen der Seite ins Internet. Macht Netlify automatisch.
Build: Das Zusammenbauen der fertigen Seite aus den Dateien, bevor sie online geht.
Astro: Das Bau-System der Seite. Gut für Inhalt und Blog, leicht zu pflegen.
Lokal: Die Seite auf dem eigenen Rechner ansehen, bevor sie live geht.
Resend: Der Dienst, der die E-Mails verschickt (Kontakt, Tools).
Domain: Die Internetadresse (bei IONOS), z. B. kayser-performance.de.