Was im ZIP steckt #
Nach dem Kauf lädst du eine ZIP-Datei herunter. Entpack sie zuerst vollständig. Unter Windows geht das über einen Rechtsklick und Alle extrahieren, auf dem Mac genügt ein Doppelklick. Danach hast du einen ganz normalen Ordner, und dieser Ordner ist dein Projekt.
Windows zeigt den Inhalt einer ZIP-Datei wie einen normalen Ordner an. Änderungen darin gehen verloren, und Befehle laufen dort nicht. Entpacken ist der erste Schritt, nicht das Hineinschauen.
Im Ordner liegen drei Sorten Inhalte nebeneinander: die Website selbst, Erklärungen für dich und Anweisungen für deine KI. Diese Übersicht gilt für jedes AI Website Template.
| Das liegt im Ordner | Wofür es da ist |
|---|---|
| START-HIER.md | Deine erste Seite. Sie fasst auf einem Bildschirm zusammen, was dieses Template ist und wie die Vorschau startet. |
| CLAUDE.md | Der Brief an deine KI. Darin stehen die Regeln des Projekts, die Farbwelt, der Ton und alles, was sie nie tun soll. |
| .claude/skills | Sieben Playbooks für deine KI, von Umbau über Texte und SEO bis zur Qualitätsprüfung. Das Kapitel Die sieben Skills geht sie einzeln durch. |
| Wissen | Hintergrund zum Template für dich und deine KI: Zielgruppe, Tonalität, SEO-Strategie und der Bauplan der Bausteine. |
| styleguide.html | Farben, Schriften und Bausteine im Browser. Diese eine Datei darfst du direkt doppelklicken, sie braucht keinen Server. |
| src und public | Die Website selbst. Beim statischen Template heißen diese Stellen index.html und assets. |
| README und BILDNACHWEIS | Kurzüberblick über das Template und die Herkunft jedes mitgelieferten Bildes. |
Für dich sind die Dateien mit der Endung .md und der Styleguide. Für deine KI sind die CLAUDE.md und der Ordner .claude. Beides bleibt später auf deinem Rechner und kommt nie auf den Server.
.claude beginnt mit einem Punkt und ist deshalb in vielen Dateimanagern unsichtbar. Blende versteckte Dateien ein, im Windows Explorer über Ansicht und Ausgeblendete Elemente, auf dem Mac mit Cmd, Shift und Punkt. Der Ordner muss beim Verschieben und Kopieren immer mitkommen, sonst findet deine KI die Skills nicht.
Zwei Arten von Templates #
Öffne den Ordner und sieh nach, ob darin ein Ordner src liegt. Diese eine Frage entscheidet, wie du deine Vorschau startest. Alles Weitere in dieser Dokumentation gilt für beide Arten gleich.
Template mit einem Ordner src
Das ist der Regelfall, fast alle Templates sind so gebaut. Die Website entsteht aus Bausteinen, die ein Programm namens Astro zusammensetzt. Dafür brauchst du Node.js und zwei Befehle im Terminal.
- npm install · einmalig, holt die Bausteine
- npm run dev · startet die Vorschau
Die Vorschau läuft danach unter http://localhost:4321. Solange sie läuft, siehst du jede Änderung sofort im Browser.
Template ohne Ordner src
Einzelne Templates sind fertiges HTML ohne Bauschritt. Du erkennst es daran, dass eine index.html direkt im Hauptordner liegt. Hier gibt es nichts zu bauen, was du siehst, ist bereits das, was später auf dem Server liegt.
Ein Doppelklick auf die index.html reicht für die Vorschau trotzdem nicht, weil die Adressen der Unterseiten einen kleinen Server brauchen. Einer der beiden Befehle genügt:
- npx serve . · Vorschau-Server, kommt mit Node.js
- python -m http.server 8000 · dasselbe mit Python
Die richtige Adresse steht danach im Terminal, meist http://localhost:3000 oder http://localhost:8000. Öffne genau die Adresse, die dort erscheint.
Kontaktformulare verschicken auf deinem Rechner nichts. Je nach Template fehlt der Versand im Auslieferungszustand noch ganz, oder er braucht einen Server mit PHP. Beides ist so vorgesehen und wird vor dem Livegang geklärt, ausführlich im Kapitel Live gehen.
Wohin der Ordner gehört #
Bevor du irgendetwas installierst, leg den Projektordner an einen guten Platz. Der Ablageort entscheidet mit darüber, ob die Befehle später sauber durchlaufen, und er ist die häufigste Ursache für Fehlermeldungen am Anfang.
OneDrive, Dropbox, Google Drive und Netzlaufwerke passen für dieses Projekt nicht. Die Pfade werden zu lang, und die Synchronisation greift in Dateien, während sie gerade geschrieben werden. Der Build bricht dann mit Meldungen ab, die nach einem Fehler im Projekt aussehen, obwohl das Projekt in Ordnung ist.
Leg den Ordner direkt auf die Festplatte, mit einem kurzen Pfad. Unter Windows passt zum Beispiel C:\websites\meinprojekt, auf dem Mac /Users/deinname/websites/meinprojekt. Verzichte im Pfad auf Umlaute und Leerzeichen, das erspart dir eine ganze Klasse von Fehlermeldungen.
Der Ordner Downloads ist als Dauerplatz ungeeignet, weil dort früher oder später aufgeräumt wird. Und weil dein Projekt jetzt außerhalb der Cloud liegt, sichert es niemand mehr automatisch. Wie du das löst, steht im nächsten Abschnitt zur Sicherung und ausführlich im Kapitel Pflegen und erweitern.
Node.js installieren #
Node.js ist das Programm, das die Befehle aus deinem Projekt ausführen kann. Es ist kostenfrei, läuft nur auf deinem Rechner und fällt dir nach der Installation nie wieder auf. Nötig ist es für jedes Template mit einem Ordner src. Beim statischen Template brauchst du es nur, wenn du die Vorschau mit npx serve . startest.
nodejs.org öffnen
Lad dort die Fassung mit dem Zusatz LTS herunter. LTS steht für die Ausgabe mit langer Unterstützung, sie ist die stabile Wahl für dieses Projekt. Die Seite erkennt dein Betriebssystem von selbst und bietet dir die passende Datei an.
Den Installer ausführen
Doppelklick auf die heruntergeladene Datei, dann alle Vorgaben übernehmen und bis zum Ende durchklicken. Du musst nichts auswählen und nichts anpassen. Das dauert ein bis zwei Minuten.
Das Terminal neu öffnen
Ein Terminalfenster, das schon vor der Installation offen war, kennt Node.js noch nicht. Schließ es und öffne ein neues. Dieser Schritt wird oft übersprungen und ist der Grund für die meisten Meldungen im nächsten Absatz.
Kurz prüfen
Schreib node -v ins Terminal und drück Enter, danach npm -v. Kommen zwei Versionsnummern zurück, ist alles da und du bist mit diesem Abschnitt fertig.
Unter Windows heißt es Windows Terminal oder PowerShell, auf dem Mac schlicht Terminal. Am bequemsten ist das eingebaute Terminal deines KI-Editors, denn dort steht der Projektordner bereits richtig und du musst nirgendwohin wechseln.
Deine KI einrichten #
Dieses Template ist für die Arbeit mit einer KI gebaut. Du beschreibst in normalen Sätzen, was du willst, und die KI ändert die Dateien. Claude Code ist der Fall, auf den das Template abgestimmt ist, und deshalb der bequemste Weg.
Dort passieren zwei Dinge von selbst. Claude Code liest die CLAUDE.md, sobald du den Ordner öffnest, und lädt die sieben Skills aus .claude/skills. Deine KI kennt damit ab der ersten Nachricht die Regeln des Projekts, die Farbwelt, den Ton und die Stellen, an denen deine Texte liegen.
Das Template funktioniert genauso mit jeder anderen KI, die Dateien in einem Ordner lesen und schreiben kann. Dort gibst du ihr zu Beginn selbst den Inhalt der CLAUDE.md und zeigst ihr den Projektordner. Wichtig ist nur, dass sie Zugriff auf das ganze Projekt hat und nicht auf einzelne Dateien.
Ich habe dieses AI Website Template gerade gekauft und den Ordner zum ersten Mal geöffnet. Lies die CLAUDE.md und die START-HIER.md und erklär mir in einfachen Worten, was hier drin liegt, welche Befehle ich brauche und was ich als Erstes tun sollte. Ich bin kein Entwickler.
Deine KI schreibt echte Dateien auf deiner Festplatte. Das ist der Sinn der Sache, und genau deshalb legst du gleich eine Sicherungskopie an, bevor der Umbau beginnt.
Die erste Vorschau starten #
Jetzt läuft alles zusammen. Diese fünf Schritte gelten für ein Template mit dem Ordner src, also für den Regelfall.
Ein Terminal im Projektordner öffnen
In Claude Code oder deinem Editor ist das eingebaute Terminal bereits im richtigen Ordner. Sonst öffnest du ein Terminal und wechselst mit cd und dem Pfad in dein Projekt.
npm install ausführen
Dieser Befehl holt die Bausteine, aus denen die Website gebaut wird, und legt sie im Ordner node_modules ab. Beim ersten Mal dauert das ein bis drei Minuten und passiert danach nie wieder. Ein paar Warnungen unterwegs sind normal, wichtig ist die Meldung am Ende.
npm run dev ausführen
Der Vorschau-Server startet und bleibt laufen. Das Terminal ist danach belegt und nimmt keine weiteren Befehle an, das gehört so. Für andere Befehle öffnest du ein zweites Fenster.
Die Adresse im Browser öffnen
Ruf http://localhost:4321 auf. Vor dir steht die komplette Website mit allen Unterseiten, Bildern und Texten. Klick dich einmal durch das ganze Menü, damit du siehst, was du gekauft hast.
Ändern und zusehen
Solange der Server läuft, aktualisiert sich die Seite bei jeder Änderung von selbst. Beenden kannst du ihn jederzeit mit Strg und C im Terminal, auf dem Mac mit Ctrl und C. Beim nächsten Mal genügt npm run dev, die Installation entfällt.
localhost bedeutet: dein eigener Rechner. Die Vorschau ist für niemanden sonst erreichbar, auch nicht für Kolleginnen im selben Netz. Du kannst also alles ausprobieren. Wie die Website eine öffentliche Adresse bekommt, steht im Kapitel Live gehen.
Beim statischen Template entfällt npm install. Dort öffnest du das Terminal im Projektordner, startest npx serve . und rufst die Adresse auf, die dir das Terminal nennt.
Eine Sicherung des Originals #
Den Auslieferungszustand hast du genau einmal. Sobald der Umbau beginnt, verändert sich das Projekt Schritt für Schritt, und irgendwann willst du nachsehen, wie eine Stelle vorher aussah. Eine Kopie kostet eine Minute und nimmt jedem späteren Versuch die Schwere.
Kopier den ganzen Projektordner und leg die Kopie daneben, zum Beispiel mit dem Zusatz -original und dem heutigen Datum. Den Ordner node_modules brauchst du in der Kopie nicht, er ist mit Abstand der größte Teil und lässt sich jederzeit mit npm install neu erzeugen.
Leg bitte eine Sicherungskopie des Auslieferungszustands an, bevor wir etwas ändern. Kopier den kompletten Projektordner in einen Nachbarordner mit dem Zusatz -original und dem heutigen Datum, ohne node_modules und ohne dist. Sag mir danach, wo die Kopie liegt und wie groß sie ist.
Dann ist ein erster Commit im frischen Zustand die bequemere Sicherung. Du siehst danach zu jeder Änderung genau, was sich geändert hat, und kommst mit einem Befehl zurück. Nötig ist Git für dieses Template nicht, es steht dir nur offen.
Der erste Satz an deine KI #
Du musst nichts vorbereiten, keine Liste ausfüllen und keine Texte mitbringen. Ein Satz genügt, alles Weitere fragt deine KI von sich aus ab.
Ich habe das Template gerade gekauft. Wo fange ich an?
Dieser Satz stößt den Skill start an. Er ist genau für den Moment gebaut, in dem jemand ohne Vorkenntnisse vor einem fremden Ordner sitzt, und er führt dich durch ein Gespräch in vier Runden, mit einer Frage pro Nachricht. Nach jeder Runde baut deine KI etwas ein und zeigt es dir in der Vorschau.
Runde 1 · Wer du bist
Name deines Unternehmens, die Person dahinter, deine Stadt und in einem Satz, was du anbietest. Danach ändern sich Logo, Kopfzeile, Seitentitel und Fußzeile. Das ist der Moment, in dem die Vorlage zum ersten Mal nach dir aussieht.
Runde 2 · Deine harten Daten
Anschrift, Telefon, E-Mail, Erreichbarkeit und deine Domain. Diese Angaben landen auf der Kontaktseite, in der Fußzeile und in den maschinenlesbaren Daten, die Google ausliest. Was du gerade nicht hast, kommt auf eine Liste offener Punkte statt in den Text.
Runde 3 · Dein Angebot
Deine Leistungen mit Ablauf, Formaten und Preislogik, und für wen sie gedacht sind. Danach stimmen die Leistungsseiten, die Preisangaben und die passenden Antworten in den häufigen Fragen.
Runde 4 · Menschen und Belege
Hast du ein Foto von dir? Gibt es echte Kundenstimmen mit schriftlicher Freigabe, echte Zahlen, echte Projekte? Alles, was echt und freigegeben ist, kommt hinein. Alles andere fliegt raus, statt als hübscher Platzhalter stehen zu bleiben.
Nach der vierten Runde übernimmt der Skill template-aufbau den systematischen Rest: Bilder, Suchbegriffe, die Rechtsseiten und der Nachweis, dass kein Platzhalter mehr im Projekt steht. Was jeder einzelne Skill kann und wie du ihn gezielt anstößt, steht im Kapitel Die sieben Skills.
Die Person, die Firma, die Telefonnummern, die Zahlen, die Kundenstimmen und die Fallbeispiele sind Platzhalter. Das ist Absicht, damit du eine vollständige Website siehst statt leerer Kästen. Nichts davon darf so live gehen, und deine KI weiß das. Auch die Fotos mit Gesichtern werden vor dem Start durch eigene ersetzt.
Wenn etwas klemmt #
Am Anfang gibt es eine Handvoll Stolpersteine, und sie haben alle eine kurze Lösung.
| Das siehst du | Das hilft |
|---|---|
| npm wird nicht gefunden | Node.js fehlt, oder dein Terminal war schon offen, als du installiert hast. Schließ das Fenster, öffne ein neues und schreib node -v. Kommt keine Versionsnummer zurück, installier Node.js noch einmal. |
| Der Port ist belegt | In einem anderen Fenster läuft noch eine Vorschau. Beende sie dort mit Strg und C. Sonst weicht der Server auf die nächste freie Nummer aus, etwa 4322, und du rufst einfach die Adresse auf, die im Terminal steht. |
| Der Build bricht ab | Fast immer der Ablageort. Zieh den Projektordner aus der Cloud direkt auf die Festplatte, lösch dort den Ordner node_modules und starte npm install erneut. |
| Die Seite bleibt weiß | Sieh ins Terminal, dort steht die eigentliche Meldung mit Datei und Zeile. Läuft der Server ohne Fehler, prüf die Adresse samt Nummer und lade die Seite mit gedrückter Umschalttaste neu. |
| Der Ordner .claude fehlt | Er ist nur ausgeblendet, weil sein Name mit einem Punkt beginnt. Blende versteckte Dateien ein, dann ist er wieder da. |
| Unterseiten führen ins Leere | Beim statischen Template hast du die index.html doppelgeklickt, statt den Vorschau-Server zu starten. Die Adressen der Unterseiten brauchen den kleinen Server aus dem Abschnitt oben. |
Steht deine Meldung nicht in der Tabelle, gib sie deiner KI. Sie kennt den Aufbau deines Projekts und findet die Ursache meist schneller als eine Suche im Netz. Wichtig ist, dass du die Meldung vollständig einfügst und dazuschreibst, was du zuletzt getan hast.
Ich hänge fest. Ich schreib dir gleich, welchen Befehl ich ausgeführt habe und was im Terminal steht. Erklär mir in einfachen Worten, woran es liegt, nenn mir genau einen nächsten Schritt und ändere noch nichts, bevor ich zustimme.
Wie es weitergeht #
Wenn du hier überall ja sagen kannst, ist die Einrichtung durch.
- Der Projektordner liegt entpackt auf der Festplatte, nicht in einem Cloud-Ordner
node -vgibt eine Versionsnummer zurück, sofern dein Template einen Ordnersrchat- Die Vorschau läuft und zeigt die Website im Browser
- Du hast dich einmal durch alle Unterseiten geklickt
- Eine Kopie des Auslieferungszustands liegt daneben
- Deine KI hat Zugriff auf den ganzen Ordner und kennt die
CLAUDE.md - Dir ist klar, dass alle Namen, Zahlen und Stimmen im Template Platzhalter sind
Kapitel 02 zeigt dir, welcher Ordner wofür da ist und an welcher Stelle deine Texte liegen: Aufbau deines Templates. Wenn du lieber sofort umbaust, spring zu Die sieben Skills und lass den Skill start die Führung übernehmen.