Die vier Bausteine #
Jedes AI Website Template besteht aus vier Teilen. Einer davon wird später im Browser sichtbar, die anderen drei arbeiten im Hintergrund und machen deine KI zu jemandem, der dieses Projekt kennt.
Die fertige Website
Alle Seiten, Texte, Bilder, Schriften und die komplette Gestaltung, hell und dunkel. Das ist der Teil, den Besucher sehen. Er ist vollständig: Du tauschst Inhalte aus, statt eine Website aufzubauen.
Die Guideline CLAUDE.md
Eine einzelne Textdatei im Hauptordner. Sie erklärt deiner KI, wie dieses Projekt gebaut ist, welche Regeln gelten und was sie nie tun darf. Deine KI liest sie von selbst, sobald du den Ordner öffnest.
Der Wissensordner Wissen
Vier Nachschlagetexte zur Branche deines Templates: Zielgruppe, Tonfall, Bauplan der Bausteine und die Suchstrategie. In englischsprachigen Templates heißt der Ordner Knowledge.
Sieben Skills unter .claude/skills/
Sieben Playbooks für die immer gleichen Aufgaben: einrichten, umbauen, texten, gestalten, für die Suche vorbereiten, nachschlagen und prüfen. Sie greifen von selbst, wenn dein Satz zur Aufgabe passt.
.claude nicht siehst Ordner, deren Name mit einem Punkt beginnt, blenden Windows und macOS standardmäßig aus. Der Ordner fehlt also nicht. Im Windows-Explorer schaltest du ihn über Ansicht und Ausgeblendete Elemente ein, im Finder mit der Tastenkombination aus Befehlstaste, Umschalt und Punkt. In deinem KI-Editor ist er ohnehin sichtbar.
Der Ordnerbaum, kommentiert #
Die meisten Templates sind mit Astro gebaut. Du erkennst sie an einem Ordner src und einer Datei package.json im Hauptordner. So sieht so ein Template aus, mit einem Halbsatz zu jedem Eintrag.
- src/ · alles, woraus die Website gebaut wird
- src/pages/ · eine Datei je Seite, der Dateiname wird zur Adresse
- src/components/ · wiederkehrende Bausteine wie Kopf, Fuß und Karten
- src/layouts/ · die Hülle, die jede Seite umschließt
- src/data/ · deine Texte: Kontakt, Navigation, Leistungen, Zahlen, FAQ
- src/styles/global.css · Farben, Schriften und Abstände als Tokens
- public/ · Bilder, Schriften und Symbole, kommen 1:1 auf den Server
- astro.config.mjs · deine Domain und die Grundeinstellungen
- package.json · die Liste der Bausteine, die npm install holt
- styleguide.html · das Design-System zum Ansehen im Browser
- START-HIER.md · die Kurzanleitung für den ersten Tag
- CLAUDE.md · die Guideline für deine KI
- Wissen/ · Zielgruppe, Ton, Bauplan und Suchstrategie
- .claude/skills/ · die sieben Playbooks
Drei dieser Einträge brauchst du wirklich oft, den Rest siehst du selten. In src/data/ stehen deine Inhalte, unter src/pages/ liegt je eine Datei pro Seite, und src/styles/global.css hält oben in einem Block alle Farben und Schriften. Für alles Weitere gilt: Deine KI findet die Stelle schneller, als du sie suchst.
Zwei Ordner tauchen erst später auf und stehen in keinem Baum, weil sie erzeugt werden. node_modules entsteht bei npm install und enthält die geladenen Bausteine. dist entsteht bei npm run build und enthält die fertigen Seiten für den Server. Beide darfst du jederzeit löschen, der nächste Befehl legt sie neu an.
Aus src/pages/kontakt.astro wird die Adresse /kontakt/, aus src/pages/blog/mein-beitrag.astro wird /blog/mein-beitrag/. Wer eine Seite umbenennt, ändert damit ihre Adresse und muss die Links darauf mitziehen. Deine KI erledigt das in einem Zug, wenn du es dazusagst.
Das Template ohne Bauschritt #
Manche Templates kommen ohne Bauschritt. Du erkennst sie an einer index.html direkt im Hauptordner und daran, dass es kein src gibt. Sie bestehen aus reinem HTML, CSS und JavaScript. Was du in den Dateien siehst, ist 1:1 das, was später auf dem Server liegt.
- index.html · die Startseite, liegt ganz oben
- ueber-mich/index.html · je Seite ein Ordner, der Ordnername wird zur Adresse
- blog/name-des-beitrags/index.html · je Beitrag ein eigener Ordner
- assets/css/ · das Stylesheet, ganz oben der Token-Block
- assets/js/ · Navigation, Einblendungen, Einwilligungs-Dialog
- assets/img/ · alle Bilder
- api/ · der Versand der Formulare, läuft erst auf dem Server
- .htaccess · Adressen ohne Dateiendung, Weiterleitungen, Zwischenspeicher
- sitemap.xml · die Übersicht aller Seiten für Suchmaschinen
- CLAUDE.md · Wissen/ · .claude/skills/ · styleguide.html · dieselbe Rolle wie oben
Der Vorteil liegt auf der Hand: kein npm install, kein Build, keine Wartezeit. Die Dateien kommen so auf den Server, wie sie sind. Für die Vorschau brauchst du trotzdem einen kleinen lokalen Server, weil die Adressen ohne Dateiendung arbeiten. Ein Doppelklick auf die Datei reicht dafür nicht.
Ohne Bauschritt gibt es keine gemeinsame Hülle: Navigation, Fußbereich und Einwilligungs-Dialog stehen als Kopie in jeder einzelnen HTML-Datei. Änderst du einen Menüpunkt, muss die Änderung in alle Dateien. Sag deiner KI deshalb immer dazu, dass sie die Änderung auf allen Seiten nachzieht. Genau das ist die Aufgabe, bei der Handarbeit teuer wird und ein Satz im Chat billig ist.
Die eiserne Regel: eine Stelle je Sache #
Dein Template hält sich an zwei Regeln, die alles zusammenhalten. Sie klingen technisch und sind in Wahrheit der Grund, warum eine Änderung bei dir fünf Minuten dauert und nicht fünf Stunden.
Texte stehen in src/data/, nicht in den Bausteinen
Alles, was an mehreren Stellen auftaucht, steht genau einmal zentral: Name, Telefon, Adresse, Öffnungszeiten, Navigation, Leistungen, Preise, Zahlen, Stimmen und FAQ liegen in src/data/site.ts. Die Seiten holen sich diese Werte von dort. Du änderst die Telefonnummer an dieser einen Stelle, und sie ändert sich im Kopf, im Fuß, auf der Kontaktseite und in den maschinenlesbaren Angaben für Google mit.
Was nur auf einer einzigen Seite steht, etwa der Werdegang auf der Über-mich-Seite, wohnt oben in der Datei dieser Seite. Die Suchreihenfolge ist deshalb immer dieselbe: erst src/data/, dann die Seite. Beim Template ohne Bauschritt entfällt die zentrale Datei, dort steht der Text in der jeweiligen index.html.
Farben stehen im Token-Block, nicht in einzelnen Seiten
Jede Farbe, jede Schrift und jeder Rundungsgrad steht als benannter Wert an einer Stelle. Beim Astro-Template ist das der Block ganz oben in src/styles/global.css, beim statischen Template der :root-Block in assets/css/style.css. Keine einzelne Seite enthält einen Farbwert. Auch der Dunkelmodus entsteht aus denselben Werten, nur mit anderen Zuweisungen.
Das bedeutet: Deine Hausfarbe wechselst du an einer Stelle, und die ganze Website zieht mit, Knöpfe, Links, Symbole, Ränder und der Dunkelmodus inklusive. Wie du das sauber machst, steht im Kapitel Design anpassen.
Eine Farbe direkt in eine Seite zu schreiben, sieht im ersten Moment richtig aus und bricht dann im Dunkelmodus oder auf der nächsten Seite. Das gleiche gilt für Texte, die statt in src/data/ in einer Seite landen: Sie ändern sich später nicht mehr mit. Wenn deine KI vorschlägt, etwas an einer Einzelstelle zu lösen, sag ihr, sie soll den Weg über die Tokens oder die Datenquelle nehmen.
CLAUDE.md, das Gedächtnis des Projekts #
Die Datei CLAUDE.md im Hauptordner ist die wichtigste Datei deines Templates, obwohl kein Besucher sie je zu sehen bekommt. Sie ist ein Brief an deine KI. Jede KI, die diesen Ordner öffnet, liest sie zuerst und weiß danach, wo sie ist.
Ohne diese Datei würde deine KI bei jeder Aufgabe raten. Mit ihr weiß sie es. Darin steht:
- Was das Projekt ist. Welche Branche, welche fiktive Person im Auslieferungszustand steht und dass alle Zahlen und Stimmen Platzhalter sind.
- Die Design-Regel. Welche Flächen, welcher eine Akzent, welche Schrift. Und dass es keinen zweiten Akzent gibt.
- Wo Inhalte leben. Welche Datei welche Sektion speist, damit die KI nicht in der falschen Ecke sucht.
- Wie die Website spricht. Sie-Form oder Du-Form, Satzlänge, verbotene Wörter, Haltung.
- Was nie zu tun ist. Keine Rechtstexte erfinden, keine Belege ausdenken, keine externen Schriftdienste einbinden, den Dunkelmodus nie an Einzelstellen reparieren.
- Welche Befehle es gibt. Vorschau starten, bauen, und was nach einer Änderung fehlerfrei durchlaufen muss.
Die Guideline muss mitwachsen
Das ist der Punkt, an dem die meisten Projekte langsam schlechter werden. Du baust die Website um: neue Seiten, neue Farbe, neue Leistungen, ein angebundenes Formular. Die Guideline beschreibt danach einen Stand, den es nicht mehr gibt. In der nächsten Sitzung liest deine KI diesen alten Stand und arbeitet gegen deine neue Website an. Sie sucht Texte in Dateien, die du verschoben hast, und schlägt eine Farbe vor, die du längst ausgetauscht hast.
Deshalb gehört zu jeder größeren Änderung ein zweiter Schritt: die Guideline nachziehen. Das dauert einen Satz und spart dir später ganze Sitzungen. Anlässe sind zum Beispiel eine neue Seite, eine geänderte Hausfarbe, die ersetzte Persona, ein angebundenes Formular oder eine entfernte Sektion.
Wir haben die Website umgebaut. Bring CLAUDE.md auf den heutigen Stand: Identität, Farben, Schriften, alle Seiten, wo welche Inhalte liegen und welche Regeln jetzt gelten. Nimm heraus, was nicht mehr stimmt, und zeig mir die Änderungen, bevor du speicherst.
Gewöhn dir an, jede Arbeitsrunde mit einer Frage zu beenden: Stimmt CLAUDE.md noch? Deine KI vergleicht dann den Text mit dem, was ihr gerade geändert habt, und trägt die Unterschiede nach. Eine gepflegte Guideline ist der Unterschied zwischen einer KI, die dein Projekt kennt, und einer, die jedes Mal von vorn anfängt.
Der Wissensordner #
Neben der Guideline liegt der Ordner Wissen. Der Unterschied ist einfach: Die Guideline ist die Regel, der Wissensordner ist der Hintergrund. Regeln liest die KI immer, Hintergrund liest sie, wenn eine Aufgabe größer wird. Vier Dateien stehen in jedem Template.
zielgruppe.md
Wen diese Website überzeugen muss. Wer sucht, mit welchem Anlass, mit welcher Sorge, und was diese Person sehen will, bevor sie sich meldet. Das ist die Grundlage jeder guten Überschrift. Wenn du in eine andere Nische gehst, ist das die erste Datei, die du umschreiben lässt.
tone-of-voice.md
Wie die Website spricht. Anrede, Satzlänge, Vokabular, was verboten ist. Daran hält sich deine KI, wenn sie einen neuen Absatz schreibt. Deshalb klingt der zwanzigste Text noch wie der erste.
komponenten-bauplan.md
Welcher Baustein woher seine Daten holt. Eine Tabelle, die für jede Sektion sagt, aus welchem Eintrag sie entsteht. Wenn du wissen willst, was passiert, sobald du eine Leistung löschst, steht die Antwort hier.
seo-strategie.md
Welche Suchbegriffe das Template bedient und welche Rolle jede Seite dabei spielt: Startseite für die Positionierung samt Stadt, Leistungsseiten für die konkrete Anfrage, Blogbeiträge für die Fragen davor. Mehr dazu im Kapitel SEO und Sichtbarkeit.
Manche Templates legen noch etwas dazu, etwa eine vollständige Projekt-Landkarte, eine Liste häufiger Aufgaben oder eine Anleitung zum Veröffentlichen. Sieh einmal in den Ordner, damit du weißt, was dort steht. Auswendig lernen musst du nichts davon: Es reicht, dass deine KI dort nachliest.
Die vier Texte beschreiben die Branche des Templates, nicht deine. Wenn du in eine benachbarte Nische gehst oder eine andere Zielgruppe ansprichst, lass sie umschreiben. Ein Satz genügt: Meine Zielgruppe sind jetzt diese Menschen, pass zielgruppe.md und tone-of-voice.md daran an.
Die sieben Skills #
Unter .claude/skills/ liegen sieben Ordner, in jedem eine Anleitung für eine Art von Aufgabe. Sie sind der Grund, warum du keine Anleitung auswendig können musst: Deine KI holt sich das passende Playbook, sobald dein Satz zur Aufgabe passt.
- start · führt dich beim ersten Mal durch ein Gespräch in vier Runden
- template-aufbau · macht aus der Vorlage deine echte Website, Schritt für Schritt
- systemwissen · beantwortet Fragen zum Aufbau und nennt dir die Datei
- copywriting · schreibt Texte im Ton deiner Website, nicht im Ton der KI
- seo · Titel, Beschreibungen, Stadt, Leistungen und neue Beiträge
- design-system · Farben, Logo, Abstände und der komplette Umgang mit Bildern
- qualitaetspruefung · prüft nach jeder Änderung und vor dem Livegang
Was jeder Skill genau kann, wann er von selbst greift und mit welchem Satz du ihn gezielt anstößt, steht im nächsten Kapitel Die sieben Skills.
Der Styleguide im Browser #
Im Hauptordner liegt styleguide.html. Ein Doppelklick genügt, kein Build, kein Server, keine Installation. Die Datei zeigt dir das Design-System deiner Website auf einer Seite: die komplette Farbwelt in Hell und Dunkel, alle Schriftgrößen und die prägenden Bausteine wie Knöpfe, Karten und Formularfelder.
Der Nutzen zeigt sich beim ersten eigenen Eingriff. Bevor du eine Farbe änderst, siehst du hier, was alles an ihr hängt. Nach der Änderung siehst du das Ergebnis in beiden Modi nebeneinander, ohne durch zehn Seiten zu klicken. Wenn du einen Wert im Token-Block änderst, lass den Styleguide mitziehen, sonst zeigt er bald etwas anderes als deine Website.
Er ist eine Arbeitsunterlage, keine Seite deiner Website. Beim Astro-Template liegt er außerhalb von public und landet deshalb nie im Build. Beim statischen Template ist er gesperrt und vom Hochladen ausgenommen. Lass das so.
Was nicht auf den Server gehört #
Ein Teil deines Templates ist für dich und deine KI gemacht, nicht für Besucher. Diese Dateien bleiben auf deinem Rechner:
- Alle Dateien mit der Endung
.md, alsoCLAUDE.md,START-HIER.md,README.mdund der Bildnachweis. - Der Ordner
Wissenmit den vier Hintergrundtexten. - Der versteckte Ordner
.claudemit den sieben Skills. - Die Datei
styleguide.htmlsamt allem, was nur zur Vorschau da ist.
Beim Astro-Template erledigt sich das von selbst. npm run build erzeugt den Ordner dist, und nur dessen Inhalt kommt auf den Server. Beim statischen Template schließt du diese Dateien beim Hochladen aus. Deine KI kann dir die Liste dafür schreiben.
Sag mir, welche Dateien und Ordner in diesem Projekt nicht auf den Server gehören, und schreib mir daraus eine Ausschlussliste für den Upload. Nenn bei jedem Eintrag in einem Satz den Grund.
Nichts davon ist gefährlich, wenn es doch einmal mit hochgeht. Für Besucher sind diese Dateien wertlos, und sie beschreiben in Ruhe, wie deine Website aufgebaut ist. Beides sind gute Gründe, sie dort zu lassen, wo sie hingehören. Der ganze Weg auf den Server steht im Kapitel Live gehen.
Ich will etwas ändern, wo schaue ich? #
Diese Tabelle ist der Kern des Kapitels. Sie beantwortet die Frage, die am Anfang am häufigsten kommt. Links steht, was du ändern willst, in der Mitte die Stelle im Astro-Template, rechts die Stelle im Template ohne Bauschritt.
| Das willst du ändern | Template mit src | Template ohne Bauschritt |
|---|---|---|
| Telefon, E-Mail, Adresse | src/data/site.ts, ganz oben im Block mit der Identität | jede index.html und zusätzlich die maschinenlesbaren Angaben im Kopf der Startseite |
| Menüpunkte und Reihenfolge | src/data/site.ts, der Eintrag für die Navigation | der Kopfbereich in jeder HTML-Datei |
| Text einer einzelnen Seite | die passende Datei unter src/pages/ | die index.html im Ordner dieser Seite |
| Leistungen, Preise, FAQ, Zahlen | src/data/site.ts, je ein Eintrag pro Sektion | die jeweilige Seite, dort direkt im Text |
| Neuer Blogbeitrag | neue Datei unter src/pages/blog/ und ein Eintrag in src/data/blog.ts | neuer Ordner unter blog/, eine Karte in der Übersicht und ein Eintrag in sitemap.xml |
| Farben, Schriften, Abstände | der Token-Block oben in src/styles/global.css | der :root-Block in assets/css/style.css |
| Bilder | public/images/, der Pfad beginnt danach mit einem Schrägstrich | assets/img/ |
| Titel und Beschreibung für Google | oben in der jeweiligen Datei unter src/pages/ | im Kopf der jeweiligen HTML-Datei |
| Impressum und Datenschutz | src/pages/impressum.astro und src/pages/datenschutz.astro | impressum/index.html und datenschutz/index.html |
| Kontaktformular und Versand | die Kontaktseite unter src/pages/, der Versand wird angebunden | das Formular in kontakt/index.html und die Dateien unter api/ |
Wenn dein Template an einer Stelle anders aufgebaut ist, steht das in seiner eigenen CLAUDE.md. Sie schlägt diese Tabelle immer, weil sie dein konkretes Template beschreibt.
Frag deine KI, statt zu suchen #
Du musst dir nichts davon merken. Für genau diese Fragen gibt es den Skill Systemwissen. Er kennt den Aufbau deines Projekts und antwortet mit Datei und Zeile, statt dich suchen zu lassen. Der erste Satz lohnt sich schon, bevor du etwas änderst.
Nutze den Skill systemwissen und erklär mir den Aufbau dieses Projekts: welche Seiten es gibt, wo die Texte liegen, wo die Farben stehen und wo die Bilder. Nenn zu jedem Punkt die Datei und schreib es so, dass ich es ohne Vorwissen verstehe.
Und wenn du eine bestimmte Sache ändern willst, frag nach der Landkarte für genau diese Sache. Lass dir erst die Fundstellen zeigen und entscheide dann. So siehst du, was passiert, bevor es passiert.
Ich will die Telefonnummer auf der ganzen Website ändern. Zeig mir zuerst jede Stelle, an der sie vorkommt, mit Datei und Zeile, sichtbare Texte und maschinenlesbare Angaben getrennt. Ändern sollst du erst, wenn ich die Liste gesehen habe.
Vier Bausteine, zwei Regeln, eine Tabelle. Mehr brauchst du über den Aufbau nicht zu wissen. Wie du jede dieser Ecken mit einem Satz bewegst, steht im Kapitel Die sieben Skills.