Bauen Sie Ihre Unternehmenswebsite mit IndexDock Starter
Für absolute Einsteiger ohne Programmier- oder KI-Erfahrung: Erstellen und veröffentlichen Sie eine echte Website für Ihr kleines Unternehmen mit einem KI-Coding-Agenten – und bekommen Sie nebenbei ein echtes Gefühl dafür, wie Entwickler heute mit diesen Werkzeugen arbeiten.
- Kostenlos
- Kein Konto bei uns nötig
- 19 Module
- 59 Lektionen
Erster öffentlicher Durchlauf dieses Kurses – die Screenshots zu den einzelnen Schritten werden noch ergänzt.
Dieser Kurs ist kostenlos, GitHub und Cloudflare ebenfalls. Bezahlen müssen Sie nur ein Claude-Abo, weil der KI-Agent, der Ihre Website baut, darauf läuft – das ist ein Abo bei Anthropic, nicht bei uns.
Häkchen werden nur in diesem Browser gespeichert – nichts wird irgendwohin gesendet.
Willkommen
Module 01 · 5 lessons
Am Ende dieses Kurses haben Sie eine echte Website für Ihr Unternehmen, live im Internet, und sie gehört Ihnen. Sie trägt Ihren Firmennamen, Ihre Leistungen und Ihre Kontaktdaten, und sie ist auf professionellem technischem Niveau gebaut – obwohl Sie selbst keine einzige Zeile Code schreiben werden.
Sie brauchen keinerlei Vorerfahrung am Computer, außer einen Webbrowser bedienen zu können. Sie müssen nicht wissen, was GitHub ist, was Cloudflare ist oder was ein KI-Coding-Agent ist. Dieser Kurs erklärt jede einzelne dieser Sachen in klarem Deutsch, Schritt für Schritt, genau dann, wenn Sie es wissen müssen.
Alles in diesem Kurs passiert in Ihrem Webbrowser. Sie klicken auf Schaltflächen, tippen Antworten auf Fragen, laden Dateien hoch, wenn Sie darum gebeten werden, und geben frei, womit Sie zufrieden sind. Technischer wird es nicht.
Dieser Kurs hat einen zweiten, weniger offensichtlichen Nutzen, den man von Anfang an kennen sollte. Die Art, wie Sie hier arbeiten werden – beschreiben, was Sie wollen, ansehen, was der Agent liefert, und Änderungen verlangen, bis es stimmt – ist tatsächlich genau die Art, wie sehr viele professionelle Entwickler heute Software bauen. KI-Coding-Agenten wie der, den Sie hier benutzen, sind keine vereinfachte Anfängerversion des Echten; sie sind ein realer und immer verbreiteterer Teil davon, wie Software tatsächlich entsteht – bei Hobbyisten wie bei erfahrenen Entwicklern.
Das konkrete Ergebnis dieses Kurses ist also Ihre fertige Website – aber was Sie unterwegs üben, ist eine echte, übertragbare Fähigkeit: wirkungsvoll mit einem KI-Coding-Agenten zusammenzuarbeiten. Das ist für sich genommen wertvoll, weit über dieses eine Projekt hinaus.
Am Bau Ihrer Website sind zwei Beteiligte im Spiel: Sie und ein KI-Coding-Agent (ein automatisierter Assistent, der in Ihrem Auftrag Programmcode lesen und schreiben kann). Es hilft, genau zu verstehen, wofür jede Seite zuständig ist – damit Sie nie das Gefühl haben, Sie müssten etwas wissen, das Ihnen nie jemand beigebracht hat.
Der Agent erledigt die gesamte technische Arbeit. Er schreibt den Code der Website, prüft, ob der Code funktioniert, behebt Probleme, die er findet, und veröffentlicht Aktualisierungen. Er verlangt nie von Ihnen, Code zu schreiben, ein Werkzeug namens Git zu benutzen, irgendetwas namens Branch zu verwalten oder sonst etwas Technisches zu tun.
Sie sind für etwas anderes zuständig, das aber genauso wichtig ist: für die Wahrheit über Ihr Unternehmen. Sie sagen dem Agenten, was Ihr Unternehmen tut, wer Ihre Kunden sind, was Sie von anderen unterscheidet und was Besucher tun sollen, wenn sie auf Ihrer Website landen. Sie liefern Logo und Fotos, die verwendet werden sollen. Und an einer Handvoll wichtiger Punkte geben Sie die Richtung frei, bevor der Agent weitermacht. Der Agent darf Tatsachen über Ihr Unternehmen weder raten noch erfinden – deshalb sind es Ihre ehrlichen, ausführlichen Antworten, die die fertige Website gut machen.
Stellen Sie es sich vor wie einen erfahrenen Website-Bauer, den Sie engagieren und der Sie noch nie getroffen hat: Er kann alles bauen – aber nur, wenn Sie ihm klar sagen, was Sie brauchen.
Aus dieser Aufteilung folgen zwei Dinge. Was der Agent schreibt, ist ein Entwurf, den Sie freigeben, kein fertiges professionelles Ergebnis: Lesen Sie ihn, bevor Sie veröffentlichen, denn der Agent kann sich irren. Und die entstehende Website gehört Ihnen – ihre Inhalte, ihre Aussagen und die Frage, ob sie den Regeln an Ihrem Standort entspricht, liegen bei Ihnen, nicht bei IndexDock.
Sie bringen die Wahrheit über Ihr Unternehmen und vier Freigaben. Der Agent schreibt, baut, repariert und veröffentlicht.
Was Sie beitragen
Was der Agent tut
Dieser Kurs und das kostenlose Starterpaket, das er verwendet, sind für eine ganz bestimmte und sehr verbreitete Art von Website gemacht: eine Informations- oder Lead-Website für Freiberufler, lokale Dienstleister oder Einzelunternehmer. Lead-Website heißt schlicht: eine Website, deren Hauptaufgabe es ist, interessierte Besucher dazu zu bringen, Sie zu kontaktieren – und nicht, direkt auf der Seite Produkte zu verkaufen.
Eine so gebaute Website hat typischerweise zwischen einer und fünf Hauptseiten, alle in einer Sprache. Sie kann Ihr Unternehmen erklären, Ihre Leistungen auflisten, Beispiele früherer Arbeiten zeigen, Vertrauen bei Besuchern aufbauen und den Leuten einfache Wege zur Kontaktaufnahme geben – etwa eine Telefonnummer, eine E-Mail-Adresse oder einen Messenger-Link.
Dieser Kurs passt nicht, wenn Sie einen Onlineshop mit Warenkorb und Kasse bauen wollen, eine Website, auf der Nutzer Konten anlegen und sich anmelden, ein von Grund auf gebautes Buchungssystem oder irgendetwas, das private Kundendaten in einer Datenbank speichern muss. Falls Ihre Idee so etwas enthält: keine Sorge. Ihr KI-Agent wird Ihnen eine einfachere Fassung Ihrer Idee erklären, die als diese Art von Website trotzdem gut funktioniert – oder darauf hinweisen, dass ein anderes Werkzeug nötig ist. Dass Sie das jetzt wissen, heißt nur: Sie werden später nicht überrascht.
Bevor Sie weitermachen, eine Beruhigung, die Sie im Hinterkopf behalten sollten: Dieser Kurs läuft vollständig in Ihrem eigenen Tempo. Es läuft keine Uhr, und es gibt keine Frist. Wenn Sie an irgendeinem Punkt überfordert, verwirrt oder schlicht müde sind, ist es völlig in Ordnung, aufzuhören, den Tab zu schließen und später zurückzukommen – ob in einer Stunde, morgen oder nächste Woche. Nichts von Ihrem Fortschritt, Ihrer Website oder Ihren Konten geht verloren, während Sie weg sind. Gehen Sie das in dem Tempo an, das sich für Sie gut anfühlt.
Die Werkzeuge, erklärt, als hätten Sie nie davon gehört
Module 02 · 4 lessons
GitHub ist eine Website, die Dateien speichert und eine vollständige Geschichte jeder jemals daran vorgenommenen Änderung führt. Für diesen Kurs wird GitHub alle Dateien speichern, aus denen Ihre Website besteht: ihre Texte, ihre Bilder, ihr Layout – alles.
Der Ort, an dem die Dateien Ihrer Website auf GitHub liegen, heißt Repository. Sie können sich ein Repository als einen einzelnen Projektordner vorstellen, der online liegt und in den sowohl Sie als auch Ihr KI-Agent hineinsehen und darin arbeiten können. Sie werden früh in diesem Kurs Ihr eigenes Repository anlegen, und es wird Ihnen gehören.
GitHub-Konten sind kostenlos, und eines anzulegen gehört zu den allerersten Schritten in diesem Kurs.
Die Dateien einer Website zu schreiben ist nur die halbe Arbeit. Diese Dateien müssen auch irgendwo liegen, wo jeder im Internet sie aufrufen und im eigenen Browser laden kann. Das nennt man Hosting, und der Vorgang, eine neue oder aktualisierte Fassung Ihrer Website für Besucher verfügbar zu machen, heißt Deployen.
Cloudflare ist der Dienst, den dieser Kurs zum Hosten Ihrer Website benutzt. Sobald Cloudflare mit Ihrem GitHub-Repository verbunden ist, nimmt es automatisch die neueste Fassung der Dateien Ihrer Website und macht sie unter einer Webadresse verfügbar, die jeder öffnen kann. Jedes Mal, wenn Ihr KI-Agent ein Stück Arbeit fertigstellt und speichert, bemerkt Cloudflare das und aktualisiert Ihre Live-Website automatisch – ohne dass Sie irgendetwas anklicken müssten.
Auch Cloudflare-Konten sind für das, was dieser Kurs braucht, kostenlos.
Ein KI-Coding-Agent ist ein Computerprogramm, das sich mit Ihnen in normaler Sprache unterhalten und außerdem selbstständig Programmcode lesen, schreiben und testen kann. Sie beschreiben in Ihren eigenen Worten, was Sie wollen, und es erledigt die technische Arbeit, daraus eine echte, funktionierende Website zu machen.
Dieser Kurs verwendet Claude Code, entwickelt von einem Unternehmen namens Anthropic. Sie bedienen es im Browser, auf einer Website namens Claude Code on the web, und es ist in der Lage, diesen gesamten Kurs von Anfang bis Ende zu bewältigen.
Mit Ihrem Agenten arbeiten Sie fast ausschließlich über ein einziges fortlaufendes Gespräch, ähnlich wie in einer Chat-App. Sie tippen eine Nachricht, in der Sie beschreiben, was Sie wollen, oder eine Frage beantworten, die er Ihnen gestellt hat – und er antwortet und macht sich an die Arbeit.
Ein Prompt ist schlicht die Nachricht, die Sie einem KI-Agenten schreiben. Mehr steckt nicht dahinter: Es sind einfach schriftliche Anweisungen in Ihrer eigenen Alltagssprache, die der KI sagen, was sie tun soll – oder eine Frage beantworten, die sie Ihnen gestellt hat.
Sie brauchen weder besondere Fähigkeiten noch geheime Formulierungen, um einen guten Prompt zu schreiben. Die besten Prompts sind schlicht klar und konkret – so, wie Sie einem neuen Mitarbeiter etwas sorgfältig erklären würden, der gerne helfen will, aber Ihre Gedanken nicht lesen kann. Wenn Sie etwas Bestimmtes wollen, sagen Sie es geradeheraus. Wenn etwas falsch aussieht, beschreiben Sie genau, was falsch aussieht. Später in diesem Kurs, in der Lektion über das Anfordern von Änderungen, sehen Sie diesen Gedanken ausführlich in der Praxis.
Im Lauf dieses Kurses werden Sie mehrere Prompts abschicken: den, der das ganze Projekt startet, und weitere immer dann, wenn Sie eine Frage stellen oder eine Änderung wünschen.
Warum Sie ein kostenpflichtiges Abo brauchen – kein Gratisangebot reicht
Module 03 · 3 lessons
Claude Code on the web setzt für dieses Projekt ein kostenpflichtiges Claude-Abo voraus. Es gibt derzeit keine kostenlose Fassung, die genug Nutzungsumfang bietet, um in diesem Kurs eine vollständige Website zu bauen. Wenn Sie sich in der Erwartung anmelden, ein Gratisangebot werde reichen, geht Ihnen auf halbem Weg der Nutzungsumfang aus. Besser, Sie wissen das von Anfang an und gehen gleich zu einem bezahlten Tarif.
Die gute Nachricht: Sie brauchen nicht den teuersten verfügbaren Tarif. Der kostenpflichtige Claude-Einsteigertarif gibt Ihnen genug Nutzungsumfang, um in diesem Kurs eine vollständige Website für ein kleines Unternehmen zu bauen. Sie dürfen gerne einen teureren Tarif wählen, wenn Sie mehr Luft nach oben oder Zugang zu leistungsfähigeren Modellen wollen – nötig ist es für den erfolgreichen Abschluss dieses Kurses nicht.
Gemessen an dem, was Sie dafür bekommen, ist eine kleine Monatsgebühr für ein oder zwei Monate im Tausch gegen eine fertige, professionelle Unternehmenswebsite ein guter Handel.
Es lohnt sich zu wissen: Das Geld, das Sie hier ausgeben, kauft Ihnen ein Allzweck-KI-Abo, keine einmalige Eintrittskarte, die verfällt, sobald Ihre Website fertig ist. Dasselbe Claude-Abo arbeitet danach weiter für Sie, für alle möglichen alltäglichen Dinge, die mit Websites nichts zu tun haben: Fotos auswerten oder beschreiben, Informationen nachschlagen und erklären lassen, Bilder erzeugen und unzählige andere Alltagsaufgaben, für die Menschen diese Werkzeuge nutzen.
Das heißt auch: Dasselbe Abo steht bereit, wann immer Sie eine weitere Website bauen wollen. Wenn Sie ein zweites Unternehmen gründen oder es einfach noch einmal mit einem anderen Design oder anderen Unternehmensangaben versuchen wollen, können Sie aus der Vorlage IndexDock Starter ein neues Repository anlegen und diesen Kurs noch einmal durchlaufen – mit dem Abo, das Sie schon haben. Nichts an Ihrem bezahlten Tarif bindet Sie an eine einzige Website.
Warum diese Website für die KI-Suche bereit sein wird
Module 04 · 3 lessons
Vielleicht haben Sie den Ausdruck „KI-Sichtbarkeit“ schon gehört oder sich gefragt, ob eine Website nicht nur von Suchmaschinen wie Google gefunden werden kann, sondern auch von KI-Assistenten, denen Menschen Fragen stellen. Dieses Starterpaket ist mit genau diesem Anliegen gebaut, und es lohnt sich, in klaren Worten zu verstehen, was dieses Versprechen bedeutet – und was nicht.
Was Ihnen die Website aus diesem Kurs gibt, ist technische Bereitschaft. Das heißt: Ihre Website ist so gebaut, dass Computerprogramme – darunter Suchmaschinen und KI-Assistenten – Ihre Seiten korrekt lesen, verstehen können, was Ihr Unternehmen tut, und es zutreffend beschreiben, wenn jemand danach fragt. Nichts an Ihrer Website wird diese Programme heimlich blockieren oder verwirren.
Was dieser Kurs nicht verspricht, sind garantierte Platzierungen, garantierter Traffic oder eine Garantie, dass ein KI-Assistent Ihr Unternehmen namentlich erwähnt. Niemand kann solche Ergebnisse ehrlichen Gewissens versprechen, denn sie hängen von vielem ab, was außerhalb einer einzelnen Website liegt: Wettbewerb, Ort, Zeitpunkt. Seien Sie vorsichtig bei jedem, der etwas anderes verspricht. Was Sie bekommen, ist eine Website ohne technische Hürden, die dem Gefundenwerden und dem korrekten Verstandenwerden im Weg stünden.
Ein paar kurze Definitionen sind hier nützlich – allein deshalb, weil sie erklären, warum das wichtig ist, nicht weil Sie diese Wörter selbst benutzen müssten.
Crawlbar heißt, dass ein Computerprogramm die Seiten Ihrer Website erfolgreich öffnen und lesen kann, genau so, wie Sie sie im Browser aufrufen. Manche Websites sind so gebaut, dass sie ihre Inhalte versehentlich vor diesen Programmen verstecken; die Websites, die dieser Kurs baut, gehören nicht dazu.
Strukturierte Informationen heißt, dass die wichtigen Angaben zu Ihrem Unternehmen – Name, Leistungen, Standort – im zugrunde liegenden Code der Website klar ausgezeichnet sind und nicht nur als Bild oder verstreuter Fließtext sichtbar sind. Diese Auszeichnung hilft Computerprogrammen zu verstehen, was ein Stück Text tatsächlich bedeutet, statt nur Buchstaben auf einer Seite zu sehen.
Barrierefrei bedeutet in diesem Zusammenhang, dass Ihre Website für möglichst viele Besucher und Geräte gut funktioniert – auch für Menschen, die Screenreader oder andere Hilfstechnik verwenden, und für Menschen mit unterschiedlichen Browsern.
Zusammen sind diese drei Dinge das, was „bereit für die KI-Suche“ in diesem Kurs bedeutet: eine Website, bei der nichts dem Gelesen-, Verstanden- und Richtig-Wiedergegebenwerden im Weg steht – weder für Menschen noch für Computerprogramme.
Ihre Konten anlegen
Module 05 · 3 lessons
Öffnen Sie Ihren Webbrowser und gehen Sie zu [github.com](https://github.com). Suchen Sie die Schaltfläche zum Registrieren bzw. zum Anlegen eines Kontos. Sie werden gebeten, einen Benutzernamen zu wählen, eine E-Mail-Adresse anzugeben und ein Passwort festzulegen. Folgen Sie den Anweisungen von GitHub auf dem Bildschirm; dazu gehört üblicherweise, Ihre E-Mail-Adresse über einen Link zu bestätigen, den GitHub Ihnen schickt. Sobald Ihre E-Mail bestätigt ist, ist Ihr Konto einsatzbereit.
Bewahren Sie Benutzernamen, E-Mail und Passwort an einem sicheren Ort auf. Sie werden sich im Lauf dieses Kurses noch mehrmals bei GitHub anmelden müssen.
Öffnen Sie Ihren Webbrowser und gehen Sie zu [cloudflare.com](https://cloudflare.com). Suchen Sie die Schaltfläche zum Registrieren. Sie werden nach einer E-Mail-Adresse und einem Passwort gefragt. Folgen Sie den Anweisungen von Cloudflare auf dem Bildschirm; auch hier gehört das Bestätigen Ihrer E-Mail-Adresse dazu. Sobald das erledigt ist, ist Ihr Cloudflare-Konto bereit.
Für das, was dieser Kurs braucht, müssen Sie beim Anlegen eines Cloudflare-Kontos nichts kaufen und keine Zahlungsdaten angeben.
Jetzt ist der Punkt, an dem Sie Ihr Konto bei Anthropic anlegen, dem Unternehmen hinter Claude Code.
Gehen Sie zu [claude.ai](https://claude.ai) und legen Sie ein Konto an; folgen Sie den Anweisungen auf dem Bildschirm, um Ihre E-Mail-Adresse zu bestätigen. Wechseln Sie danach auf einen kostenpflichtigen Claude-Tarif, denn Claude Code on the web setzt einen voraus, wie weiter oben in diesem Kurs erklärt.
Nehmen Sie diesen Schritt ernst, auch wenn Sie noch nie ein KI-Chatwerkzeug benutzt haben; die Registrierung selbst ist kurz und geführt, und dieser Kurs sagt Ihnen genau, was Sie mit dem Konto tun sollen, sobald es existiert.
Das Repository für Ihre Website anlegen
Module 06 · 2 lessons
Eine Vorlage ist ein fertiges Startprojekt, das Sie mit einem Klick in Ihr eigenes neues Repository kopieren können, statt etwas aus dem Nichts zu bauen. IndexDock Starter ist eine solche Vorlage: Sie enthält bereits eine kleine, funktionierende Startwebsite und alles, was Ihr KI-Agent braucht, um darauf Ihre echte Website zu bauen. Eine Vorlage zu verwenden heißt: Sie beginnen mit etwas, das bereits funktioniert, statt mit einem leeren Ordner.
Öffnen Sie Ihren Browser und gehen Sie zu [github.com/IndexDock/website-from-scratch](https://github.com/IndexDock/website-from-scratch). Stellen Sie zuerst sicher, dass Sie in Ihrem eigenen GitHub-Konto angemeldet sind.
Suchen Sie auf dieser Seite die Schaltfläche mit der Aufschrift „Use this template“ und klicken Sie darauf; wählen Sie dann „Create a new repository“ aus der angebotenen Option. GitHub bittet Sie, Ihrem neuen Repository einen Namen zu geben; wählen Sie etwas, das mit Ihrem Unternehmen zu tun hat, zum Beispiel dessen Namen. Wenn GitHub fragt, ob das Repository Public oder Private sein soll, wählen Sie Private. Ihre Website geht trotzdem für alle sichtbar online; diese Einstellung steuert nur, wer Ihre Dateien auf GitHub lesen darf. Klicken Sie dann auf die Schaltfläche, um das Repository anzulegen.
Sobald es angelegt ist, lassen Sie es genau so, wie es ist. Abgesehen davon, dass Sie später Ihr Logo und Ihre Fotos hochladen, wenn der Agent Sie darum bittet, öffnen oder bearbeiten Sie selbst keine Datei. Ihr neues Repository ist jetzt Ihre eigene Kopie des Starterpakets, sie gehört Ihnen und ist bereit für die nächsten Schritte in diesem Kurs.
Ihre Startwebsite online stellen (Cloudflare)
Module 07 · 6 lessons
Ein Worker ist in Cloudflares Sprache der Teil von Cloudflares System, der die Seiten Ihrer Website tatsächlich an Besucher ausliefert. Wenn jemand die Adresse Ihrer Website in den Browser tippt, ist es Cloudflares Worker, der mit den Inhalten Ihrer Website antwortet. Sie müssen nicht verstehen, wie er innen funktioniert; Sie müssen nur einen anlegen und ihn mit Ihrem GitHub-Repository verbinden – und die nächste Lektion führt Sie Klick für Klick hindurch.
Stellen Sie sicher, dass Sie in Ihrem Cloudflare-Konto angemeldet sind, und folgen Sie dann genau diesen Schritten, in dieser Reihenfolge. Bei zweien davon sollen Sie einen kurzen Befehl in ein Feld tippen. Sie kopieren dabei zwei Zeilen in ein Formular, Sie schreiben keinen Code: Der Kurs gibt Ihnen den genauen Text, und Sie müssen nie verstehen, was er tut.
- Klicken Sie in der linken Seitenleiste auf Build.
- Klicken Sie unter Build auf Compute (Workers & Pages).
- Klicken Sie auf die blaue Schaltfläche „Create application“.
- Klicken Sie auf „Continue with GitHub“.
- Wählen Sie das GitHub-Repository aus, das Sie aus der Vorlage IndexDock Starter angelegt haben.
- Wenn nach einem build command gefragt wird, geben Sie npm run build ein.
- Wenn nach einem deploy command gefragt wird, geben Sie npx wrangler deploy ein.
- Falls Sie eine Einstellung namens „Builds for non-production branches“ sehen, lassen Sie sie ausgeschaltet. Diese Einstellung wird für diesen Kurs nicht gebraucht, und sie einzuschalten verbraucht Cloudflares kostenloses Build-Kontingent schneller als nötig.
- Klicken Sie auf die Schaltfläche Deploy.
Falls Cloudflare Sie während dieses Vorgangs bittet, die workers.dev-Subdomain Ihres Kontos einzurichten, tun Sie das jetzt. Das ist ein einmaliger Einrichtungsschritt, der nur beim ersten Mal auftaucht – wenn Sie ihn sehen, erledigen Sie ihn, bevor Sie weitermachen.
Cloudflare baut und veröffentlicht nun Ihre Startwebsite. Das dauert üblicherweise ein bis zwei Minuten.
Nachdem Ihr Worker angelegt ist, muss bei Cloudflare noch eine Einstellung eingeschaltet werden, bevor Ihre Website unter ihrer Webadresse erreichbar ist. Folgen Sie genau diesen Schritten.
- Klicken Sie in der linken Seitenleiste auf Build.
- Klicken Sie unter Build auf Compute (Workers & Pages).
- Klicken Sie auf den gerade angelegten Worker, um ihn zu öffnen.
- Klicken Sie auf den Reiter Domains.
- Suchen Sie den Eintrag „production“ und schalten Sie ihn ein.
Sobald das eingeschaltet ist, wird Ihre Startwebsite unter ihrer workers.dev-Webadresse erreichbar.
Klicken Sie im Cloudflare-Dashboard auf der Seite Ihres Workers oben rechts auf die Schaltfläche „Visit“, um die workers.dev-Webadresse Ihrer Website in einem neuen Browser-Tab zu öffnen. Sie sollten die Startseite von IndexDock Starter sehen – die Bestätigung, dass Ihre Website online ist. Das ist noch nicht Ihre fertige Unternehmenswebsite; es ist eine vorläufige Startseite, die bestätigt, dass alles richtig verbunden ist. Ihre echte Unternehmenswebsite wird später in diesem Kurs unter genau derselben Webadresse erscheinen, während der Agent sie baut.
Falls beim Öffnen der Adresse statt Ihrer Website eine Fehlermeldung erscheint, keine Sorge. Das heißt meist nur, dass Cloudflare die Veröffentlichung im Hintergrund noch abschließt. Warten Sie etwa eine Minute und laden Sie die Seite neu – dann sollte die eigentliche Startwebsite erscheinen.
Genießen Sie diesen Moment kurz: Die Adresse Ihrer Website funktioniert jetzt überall im Internet. Öffnen Sie sie am Computer, öffnen Sie sie auf einem Tablet, öffnen Sie sie auf Ihrem Handy – überall funktioniert sie gleich. Sie können den Link sogar jetzt schon an Freunde oder Familie schicken und sie zu den Ersten machen, die ihn sehen. Es ist ein kleiner Meilenstein, aber ein echter – und es kommt noch viel mehr.
Auf GitHub ist ein Stern eine einfache Art, Wertschätzung für ein Projekt zu zeigen – ähnlich wie ein „Gefällt mir“ auf anderen Websites. Wenn Sie ein Repository mit einem Stern versehen, wird es für andere Menschen auf GitHub sichtbarer, und die Leute, die das kostenlose Starterpaket gebaut haben, das Sie gerade benutzen, erfahren, dass es jemandem wirklich hilft.
Sie haben gerade erfolgreich Ihre eigene Kopie des Starterpakets veröffentlicht – ein passender Moment also, um einen Stern zu vergeben, wenn Sie mögen.
Öffnen Sie dazu Ihren Browser und gehen Sie zu [github.com/IndexDock/website-from-scratch](https://github.com/IndexDock/website-from-scratch), der ursprünglichen Vorlagenseite, nicht zu Ihrer eigenen Kopie. Oben auf der Seite sehen Sie eine Schaltfläche mit der Aufschrift „Star“. Klicken Sie darauf.
Einen Stern zu vergeben ist völlig freiwillig und für den weiteren Kurs nie erforderlich. Weder Ihre Website noch Ihr Fortschritt hängen davon ab.
Sie haben gesehen, dass es funktioniert – lesen Sie jetzt den Rest des Kurses
Module 08 · 1 lesson
Sie haben gerade etwas Echtes geschafft: Sie haben ein GitHub-Konto, ein Cloudflare-Konto, Ihr eigenes Repository und eine Live-Webadresse angelegt – und Sie haben gesehen, wie eine echte Seite in Ihrem Browser geladen wurde. Das ist der Beweis, dass dieser ganze Vorgang wirklich funktioniert.
Bevor Sie jetzt Ihren KI-Agenten öffnen und mit der eigentlichen Arbeit an Ihrer Unternehmenswebsite beginnen, lesen Sie den Rest dieses Kurses einmal ganz durch, von hier bis zum Ende. Er ist nicht lang, und nichts davon verlangt schon irgendein Handeln von Ihnen. Sein Zweck ist, Sie vorzubereiten: Er erklärt, was Ihr KI-Agent Sie fragen wird, wie jede Phase des Ablaufs aussieht, und eine Handvoll wichtiger Einzelheiten – etwa, wie Sie Ihr Logo richtig hochladen und wie Sie wirkungsvoll um Änderungen bitten –, die man beim ersten Mal viel leichter richtig macht, als sie hinterher zu reparieren.
Sobald Sie bis zum Ende dieses Kurses gelesen haben, kehren Sie zum Modul „Den Agenten starten und der Weg, der vor Ihnen liegt“ zurück, um die eigentliche Arbeit zu beginnen.
Ihren KI-Agenten mit GitHub verbinden
Module 09 · 2 lessons
Claude Code braucht die Erlaubnis, Ihr GitHub-Repository zu sehen und darin zu arbeiten, bevor es irgendetwas bauen kann. Das geschieht über einen Autorisierungsschritt, bei dem Sie GitHub mitteilen, dass Claude Code auf Ihre Repositories zugreifen darf. Dieser Schritt passiert einmalig, in Ihrem Browser, und dauert nur eine Minute.
Öffnen Sie Ihren Browser, gehen Sie zu [claude.ai/code](https://claude.ai/code) und melden Sie sich an. Falls Sie GitHub noch nicht verbunden haben, fordert Claude Code Sie dazu auf; folgen Sie dieser Aufforderung, um die Claude-GitHub-App zu installieren und ihr Zugriff auf Ihre Repositories zu gewähren. Falls Sie je vor der Wahl stehen, Zugriff auf alle Repositories oder nur auf einige zu gewähren, ist alle Repositories die einfachste Option und vermeidet jede Möglichkeit späterer Verwirrung.
Ihren Agenten einrichten, bevor Sie loslegen
Module 10 · 5 lessons
In Claude Code on the web wählen Sie selbst, welches zugrunde liegende KI-Modell die Arbeit erledigt – über ein kleines Menü bzw. eine Auswahlliste in der Nähe des Nachrichtenfelds in Ihrem Gespräch. Suchen Sie es, bevor Sie Ihre allererste Nachricht abschicken, denn von Anfang an richtig eingestellt ist es am einfachsten.
Dieses Menü führt mehrere Modelle untereinander auf, geordnet vom leistungsfähigsten oben bis zu den bescheideneren weiter unten. Ein leistungsfähigeres Modell liefert in der Regel durchdachtere Arbeit von höherer Qualität, verbraucht für dieselbe Arbeitsmenge aber auch mehr von Ihrem Nutzungskontingent. Ein Modell weiter unten in der Liste ist weniger leistungsfähig, geht dafür schonender mit Ihrem Kontingent um – Sie kommen also weiter, bevor Sie an die Grenzen stoßen, die ein paar Lektionen später erklärt werden. Die Modellwahl ist damit ihr eigener kleiner Kompromiss zwischen Qualität und Reichweite Ihres Kontingents, zusätzlich zum Kompromiss beim Reasoning-Aufwand aus der nächsten Lektion.
Neben der Modellwahl sehen Sie auch eine Option für den Reasoning-Aufwand, mitunter beschriftet mit low, medium oder high. Sie steuert, wie viel Zeit und Nachdenken die KI in jeden Arbeitsschritt steckt. Ein höherer Reasoning-Aufwand liefert in der Regel ein feineres, sorgfältiger durchdachtes Ergebnis, braucht aber länger.
Das ist wichtig wegen einer Nutzungsgrenze, die in der nächsten Lektion erklärt wird: Ein niedrigerer Reasoning-Aufwand – etwa low, in manchen Fällen medium – schafft eine vollständige Website eher innerhalb einer einzigen fünfstündigen Arbeitssitzung. Ein höherer Aufwand braucht sehr wahrscheinlich länger als fünf Stunden am Stück, Ihre Sitzung pausiert also mittendrin. Das ist kein Fehlschlag; es heißt schlicht, dass Sie in einer späteren Sitzung weitermachen, wie die nächste Lektion erklärt – und das Endergebnis ist in der Regel eine Website von besserer Qualität.
Eine einzig richtige Wahl gibt es hier nicht. Wenn Sie lieber früher eine fertige Website hätten, auch wenn sie etwas schlichter ausfällt, wählen Sie einen niedrigeren Reasoning-Aufwand. Wenn es Ihnen nichts ausmacht, mehr als einmal zurückzukommen, und Sie dafür ein feineres Ergebnis wollen, wählen Sie einen höheren. Das ist ganz Ihre Entscheidung, und beide Wege führen erfolgreich ans Ziel.
Claude Code hat eine Nutzungsgrenze, die sich alle fünf Stunden zurücksetzt. Wenn Sie sie erreichen, während Ihr Agent arbeitet, hört er einfach auf und sagt Ihnen, dass er warten muss. Sind seit Beginn Ihrer Sitzung fünf Stunden vergangen, wird die Grenze erneuert, und Sie können mit einer kurzen Nachricht wie „Continue working“ weitermachen. Ihr Agent setzt genau dort fort, wo er aufgehört hat, denn sein Fortschritt ist gespeichert – mehr dazu in einem späteren Modul.
Es gibt außerdem eine separate wöchentliche Nutzungsgrenze. Für ein Projekt in der Größe der Website, die Sie in diesem Kurs bauen, reicht dieses Wochenkontingent bequem aus, um in einer einzigen Woche fertig zu werden – selbst mit den oben beschriebenen Fünf-Stunden-Pausen.
Was auch geschieht, merken Sie sich dies: Ihr Fortschritt ist immer gespeichert. Nach einer kurzen Pause zurückzukommen, über Nacht auszusetzen oder sogar erst nach Wochen oder Monaten weiterzumachen kostet Sie nichts. Ihr Agent macht genau dort weiter, wo Sie ihn verlassen haben.
Claude Code bietet Ihnen die Wahl, wie oft es bei Ihnen nachfragt, bevor es Änderungen vornimmt – das heißt dort Accept Edits bzw. Auto mode. In den vorsichtigeren Modi hält der Agent vor jeder einzelnen Änderung an und bittet Sie um Erlaubnis, was bedeutet, dass Sie am Bildschirm bleiben und einen kleinen Schritt nach dem anderen freigeben müssen. Im Auto mode arbeitet der Agent viele Schritte selbstständig durch, ohne jedes Mal Ihre Zustimmung zu brauchen.
Für diesen Kurs ist Auto mode im Allgemeinen zu empfehlen. Die Website, die Sie bauen, ist eine leichtgewichtige Anwendung, die keinen Zugriff auf sensible Teile Ihres Computers anfordert; das Risiko, den Agenten ohne ständige Freigabe weiterarbeiten zu lassen, ist also gering – und Sie können in der Zwischenzeit etwas anderes tun, statt dazusitzen und immer wieder auf Zustimmen zu klicken.
Eine wichtige Klarstellung: Auto mode heißt nicht völlig unbeaufsichtigt. Sie müssen weiterhin von Zeit zu Zeit zurückkommen und nach dem Fortschritt Ihres Agenten sehen, besonders immer dann, wenn er Ihnen eine Benachrichtigung schickt – denn an echten Entscheidungspunkten hält er weiterhin an, etwa beim Freigeben eines Designs oder beim Durchsehen der fertigen Website. Diese Entscheidungen kann nur Sie treffen.
Während Sie in Claude Code tippen, bemerken Sie gelegentlich einen ausgegrauten Vorschlag, der bereits im Nachrichtenfeld steht und Ihnen eine passende Nachricht zeigt, die Sie als Nächstes senden könnten. Wenn Sie das sehen, können Sie die Tab-Taste auf Ihrer Tastatur drücken, um diese vorgeschlagene Nachricht sofort ins Feld zu übernehmen, statt sie selbst zu tippen. Eine kleine Annehmlichkeit, die man kennen sollte – sie begegnet Ihnen bei der Arbeit mit dem Agenten immer wieder.
Den Agenten starten und der Weg, der vor Ihnen liegt
Module 11 · 2 lessons
Öffnen Sie Claude Code on the web und öffnen Sie darin das Repository, das Sie zuvor aus der Vorlage IndexDock Starter angelegt haben. Wenn Modell und Modus gewählt sind, wie im vorigen Modul beschrieben, tippen oder fügen Sie genau diese Nachricht ein, um zu beginnen:
Start or continue my IndexDock Starter website. Read the repository state first, tell me where we are, and guide me through the next approved step.
Schicken Sie diese Nachricht ab – den Rest übernimmt Ihr Agent, beginnend mit einer kurzen Runde Fragen.
Ihre Website entsteht in einer Reihe von Phasen, und es hilft zu wissen, welche das sind, bevor Sie mittendrin stecken. Hier ist der Weg in klaren Worten.
- Eine kurze Einrichtungsphase, in der der Agent prüft, ob alles richtig verbunden ist.
- Eine kurze Scope-Phase, in der der Agent ein paar schnelle Fragen stellt, um zu bestätigen, dass Ihre Idee zu dem passt, was dieser Starter bauen kann – und bei Bedarf eine einfachere Fassung vorschlägt, die passt.
- Eine Phase, in der Ihr Unternehmen verstanden wird: Der Agent fragt Sie, was Sie tun, wer Ihre Kunden sind und was die Website erreichen soll.
- Eine Design-Phase, in der Ihnen einige verschiedene gestalterische Richtungen für Ihre Website gezeigt werden und Sie die auswählen, die Ihnen am besten gefällt.
- Eine Bau-Phase, in der der Agent auf Grundlage all dessen, was Sie freigegeben haben, den gesamten eigentlichen Website-Code schreibt.
- Eine Prüfphase, in der der Agent die gebaute Website automatisch testet und behebt, was er findet.
- Eine Veröffentlichungsphase, in der Ihre fertige, freigegebene Website zur echten, indexierbaren Fassung wird, die die Öffentlichkeit sieht.
Jede dieser Phasen bekommt später in diesem Kurs ihr eigenes Modul, in der Reihenfolge, in der sie stattfinden – Sie erhalten also zu jeder eine ausführlichere Erklärung, kurz bevor Sie sie erreichen.
Zehn Schritte der Reihe nach, vom ersten Konto bis zur veröffentlichten Website. Vier davon sind Freigaben: bis Sie Ja sagen, beginnt der nächste nicht.
Die vier Freigaben sind die einzigen Stellen, an denen es an Ihnen liegt und nicht am Agenten
Phase: Ihr Unternehmen verstehen
Module 12 · 3 lessons
Sobald die Einrichtungsphase beendet ist, stellt Ihr Agent Ihnen zunächst ein paar schnelle Scope-Fragen, nur um zu bestätigen, dass Ihre Idee zu dem passt, was dieser Starter bauen kann. Falls Ihre Idee etwas außerhalb dieses Rahmens enthält, schlägt der Agent eine einfachere Fassung vor, die trotzdem gut funktioniert, statt Sie abzuweisen.
Nach dieser schnellen Prüfung beginnt Ihr Agent mit den eigentlichen Fragen zu Ihrem Unternehmen: was Sie tun, wer Ihre idealen Kunden sind, welche Probleme Sie für sie lösen, welche Leistungen Sie anbieten, was Sie von Wettbewerbern unterscheidet, was Besucher auf Ihrer Website tun sollen und ob Sie bereits Fotos, Logos oder andere Materialien haben.
Der Agent fragt das alles, weil er Tatsachen über Ihr Unternehmen weder raten noch erfinden darf. Jede Aussage auf Ihrer fertigen Website muss aus etwas stammen, das Sie ihm tatsächlich gesagt haben. Das ist eine bewusste Schutzvorkehrung: Ihre Website wird nie eine erfundene Statistik, eine gefälschte Kundenbewertung oder ein Versprechen zeigen, das Sie nie gegeben haben.
Widerstehen Sie beim Beantworten dieser Fragen dem Drang, sich kurz oder vage zu halten. Je mehr echte, konkrete Einzelheiten Sie dem Agenten über Ihr Unternehmen geben, desto besser kann er Ihre Website strukturieren: welche Seiten anzulegen sind, was auf jeder stehen soll und welche Details hervorgehoben gehören. Vage Antworten führen zu einer beliebigen Website; ausführliche Antworten führen zu einer, die tatsächlich nach Ihrem Unternehmen klingt.
Zu viele Einzelheiten gibt es hier nicht. Wenn Ihnen etwas als kleine oder selbstverständliche Tatsache über Ihr Unternehmen erscheint, erwähnen Sie es trotzdem. Sie sind die einzige Quelle der Wahrheit, die der Agent hat.
Sobald Ihre Unternehmensfragen beantwortet sind, stellt der Agent ein Paket zusammen: eine Zusammenfassung Ihres Unternehmens, die Liste der Seiten, die Ihre Website haben wird, und was auf jeder Seite stehen soll. Lesen Sie das sorgfältig durch. Nichts geht weiter zur Design-Phase, bevor Sie Ja sagen. Wenn etwas falsch, unvollständig oder nicht ganz stimmig aussieht, ist genau jetzt der Moment, das zu sagen – ausführlicher beschrieben im Modul über das Anfordern von Änderungen später in diesem Kurs.
Ihr Logo und Ihre Fotos hochladen
Module 13 · 3 lessons
Das ist eine der wichtigsten technischen Einzelheiten im ganzen Kurs, lesen Sie sie also aufmerksam. Wenn Sie ein Logo oder Foto direkt in Ihr Gespräch mit dem Agenten anhängen, kann der Agent das Bild zwar ansehen und beschreiben, was er sieht – aber er kann die eigentliche Datei dieses Bildes nicht in Ihre Website speichern. Ein Bild an den Chat anzuhängen ist nicht dasselbe, wie es zu liefern. Wenn Sie sich allein darauf verlassen, Bilder im Chat anzuhängen, wird Ihre fertige Website sie tatsächlich nicht enthalten – auch wenn der Agent sie technisch sehen konnte.
Der einzige Weg, Ihre echten Logo- und Fotodateien in Ihre Website zu bekommen, ist das Hochladen, das in der nächsten Lektion beschrieben wird.
Warum eine Datei, die im Chat deutlich zu sehen ist, nie auf Ihrer Website auftaucht.
An den Chat hängen
Die Datei fehlt im Repository — also fehlt sie auch auf der Website.
DER CHAT ZEIGT NUR
Ins Repository laden
ÜBER DIE GRENZE → LEBT AUF DER SITE
DAS REPOSITORY BEWAHRT
Wenn Ihr Agent Ihr Logo oder Ihre Fotos braucht, gibt er Ihnen einen direkten Weblink, der GitHubs Upload-Seite für genau Ihr Repository öffnet. Klicken Sie auf diesen Link. Er bringt Sie direkt auf eine Seite, die bereit ist, Dateien aufzunehmen – Sie müssen nichts weiter suchen oder auswählen.
Ziehen Sie auf dieser Seite Ihre Logo- oder Fotodateien in den Upload-Bereich, oder nutzen Sie die Schaltfläche, um sie auf Ihrem Computer auszuwählen. Sobald Ihre Dateien hinzugefügt sind, klicken Sie auf die Schaltfläche, die GitHub bereits ausgewählt hat, um das Hochladen zu bestätigen. Sie müssen keinen Ordner wählen, keinen Dateipfad eintippen und keinen Branch aussuchen; nichts davon ist nötig. Sobald Sie die Dateien auf diesem Weg hochgeladen haben, sagen Sie Ihrem Agenten Bescheid – er findet sie und setzt jede genau dorthin, wo sie auf Ihrer Website hingehört.
Keine Sorge, wenn Sie noch kein Logo haben. In dem Fall schlägt der Agent einen schlichten, ehrlichen Platzhalter vor – etwa Ihren Firmennamen in einer gewählten Schrift oder seinen Anfangsbuchstaben bzw. seine Initialen als einfaches Zeichen – und zeigt ihn Ihnen zur Freigabe, bevor er ihn irgendwo verwendet. Sie können ihn jederzeit durch ein echtes Logo ersetzen, an jedem Punkt dieses Kurses oder danach.
Phase: Design
Module 14 · 3 lessons
Sobald Ihre Unternehmensangaben freigegeben sind, erstellt der Agent eine kleine Zahl unterschiedlicher gestalterischer Richtungen für Ihre Startseite, üblicherweise drei, oder zwei, wenn Ihre Beispiele stark in eine Richtung weisen – damit Sie echte Möglichkeiten vergleichen können, statt sich eine anhand einer Beschreibung vorzustellen. Jede verwendet Ihre echten, freigegebenen Unternehmensinhalte, nur unterschiedlich dargestellt: andere Schriften, Farben, Layouts und eine andere Gesamtwirkung. Sie sehen sich diese an und wählen die Richtung, die am besten zu Ihrem Unternehmen passt – oder bitten um Änderungen.
Sammeln Sie vor dieser Phase Screenshots von Websites, deren Gestaltung Ihnen wirklich gefällt – für jede Art von Unternehmen, nicht unbedingt eines wie Ihres. Ihr Agent wird in einer einzigen Anfrage acht bis fünfzehn davon erbitten, und mehr sind willkommen. Sie gehen über denselben GitHub-Upload-Link wie Ihr Logo und Ihre Fotos, deshalb spart es Zeit, sie vorher aufzunehmen. Echte Beispiele parat zu haben macht einen enormen Unterschied dafür, wie gut Ihr fertiges Design dem entspricht, was Sie sich tatsächlich vorgestellt haben.
Noch hilfreicher ist es, wenn Sie konkret sagen können, was Ihnen an jedem Beispiel gefällt: die Schrift, die Farben, ob Schaltflächen eckige oder runde Ecken haben, wie viel Leerraum verwendet wird, wie groß die Bilder sind – oder etwas ganz anderes? Dasselbe gilt für alles, was Sie generell nicht mögen, auf irgendeiner Website, die Sie gesehen haben. Sie müssen weder Designer sein noch die richtigen Fachbegriffe benutzen, um das zu erklären. Jede ehrliche Beschreibung in Ihren eigenen Worten, auch eine unvollkommene, gibt Ihrem Agenten etwas Echtes an die Hand – und ist weit nützlicher als gar keine genannte Vorliebe.
Wenn Ihre Design-Richtungen bereit sind, zeigt der Agent sie Ihnen in einer echten, funktionierenden Vorschau, damit Sie sie richtig beurteilen können statt ein flaches Bild anzusehen. Schauen Sie sich jede genau an. Sie haben mehrere Möglichkeiten: die freigeben, die Ihnen gefällt; um eine überarbeitete Fassung einer bitten, die Ihnen fast gefällt; alle ablehnen und um eine ganz andere Richtung bitten; oder mischen – etwa dem Agenten sagen, dass Sie ein Konzept als Grundlage wollen, aber mit einem bestimmten Element aus einem anderen, zum Beispiel dessen Farbschema oder Layout. Nichts am Design ist endgültig, bevor Sie es freigeben – lassen Sie sich hier also Zeit.
Phase: Bauen und Prüfen
Module 15 · 2 lessons
Sobald Sie eine Design-Richtung freigeben, geht der Agent dazu über, die echte Website zu bauen. Klar gesagt: Er schreibt den zugrunde liegenden Code der Website, Abschnitt für Abschnitt, auf Grundlage Ihrer freigegebenen Unternehmensinhalte und Ihres gewählten Designs. Unterwegs führt er außerdem eigene einfache Prüfungen an dem durch, was er gerade geschrieben hat, und behebt offensichtlich Kaputtes, bevor er weitermacht.
Über diesen ersten Durchgang hinaus läuft im Hintergrund automatisch eine zweite, gründlichere Prüfrunde, nachdem der Agent seine Arbeit gespeichert hat. Sie deckt unter anderem ab, ob die Website auf Handys genauso gut aussieht wie auf Computern, und ob sie Standards der Barrierefreiheit erfüllt, damit auch Menschen mit Hilfstechnik sie nutzen können. Der Agent liest die Ergebnisse dieser Prüfungen und behebt, was sie zutage fördern; Sie müssen diesen Schritt weder selbst starten noch beobachten.
Sie müssen von den technischen Einzelheiten dahinter nichts verstehen. Nützlich zu wissen ist nur: „Bauen“ ist keine einzelne, augenblickliche Handlung; es geschieht in Schichten, mit Prüfungen sowohl während des Schreibens als auch noch einmal automatisch danach.
Alles entscheiden die Prüfungen. Bestanden — die Änderung steht an Ihrer Adresse. Gescheitert — Ihre Live-Website hat sich nicht bewegt.
Adresse aktualisiert
EIN, ZWEI MINUTEN
Live-Site unberührt
Während der gesamten Bau-Phase aktualisiert sich Ihre Live-Website – unter derselben Webadresse, die Sie zuvor in diesem Kurs bestätigt haben – automatisch, sobald der Agent Arbeitsschritte abschließt. Immer wenn Ihr Agent Ihnen sagt, dass es ein guter Moment zum Hinschauen ist, öffnen Sie diese Adresse erneut in Ihrem Browser und sehen sich an, was sich geändert hat. Sie müssen nie etwas tun, damit eine Aktualisierung erscheint; sie geschieht von selbst, sobald der Agent seine Arbeit gespeichert hat.
Echtes Prompt Engineering – um Änderungen bitten
Module 16 · 4 lessons
Eines sei hier klar gesagt: Sie dürfen – und sollen – an jedem Punkt dieses Ablaufs um Änderungen bitten, ob Sie gerade Ihre Unternehmenszusammenfassung, Ihr Design oder Ihre fertige Website durchsehen. Sie müssen nicht das Gefühl haben, schwierig oder undankbar zu sein, wenn Sie um etwas anderes bitten. In jeder einzelnen Phase klar zu sagen, was Sie geändert haben wollen, ist keine Nebenwirkung des guten Umgangs mit diesen Werkzeugen; es ist die eigentliche Fähigkeit, um die es bei der Arbeit mit einem KI-Agenten geht. Die besten Ergebnisse erzielen die Leute, die genau hinsehen und genau das verlangen, was sie wollen – so oft, wie es eben nötig ist.
Ein einfaches Muster macht das Bitten um Änderungen wirkungsvoll. Erstens: Sehen Sie sich an, was der Agent Ihnen gerade gezeigt hat – eine Zusammenfassung, ein Design oder die Live-Website. Zweitens: Sehen Sie genau hin, statt nur kurz zu überfliegen; lesen Sie den tatsächlichen Text, achten Sie auf Abstände und Farben, klicken Sie sich durch, wenn es die Live-Seite ist. Drittens: Benennen Sie konkret, was falsch ist, fehlt oder besser sein könnte. Viertens: Bitten Sie in klarer Alltagssprache um genau diese Änderung. Wiederholen Sie diesen Kreislauf so oft Sie wollen, in jeder Phase, bis Sie mit dem Ergebnis wirklich zufrieden sind.
Vier Handlungen im Kreis. Jede Runde bringt die Website näher an das, was Sie wirklich wollten.
Wenn etwas auf Ihrer Website so falsch aussieht, dass es leichter zu zeigen als zu beschreiben ist, machen Sie einen Screenshot davon und hängen Sie ihn an Ihre Nachricht an den Agenten – zusammen mit einer Beschreibung in klarer Alltagssprache, was anders sein soll; etwa mit dem Hinweis, welchen Teil des Bildes Sie meinen und was Sie stattdessen sehen möchten. Ein Screenshot samt kurzer Erklärung ist oft schneller und klarer, als ein sichtbares Problem allein mit Worten zu beschreiben.
- Unter Windows drücken Sie gleichzeitig die Windows-Taste, Umschalt und S, um das Snipping-Werkzeug zu öffnen, und ziehen dann über den Bereich, den Sie aufnehmen wollen.
- Auf einem Mac drücken Sie gleichzeitig Umschalt, Command und 4 und ziehen dann über den Bereich, den Sie aufnehmen wollen.
Da viele Besucher Ihre Website auf dem Handy ansehen werden, lohnt es sich, sie auch dort selbst zu prüfen – nicht nur auf dem Computer, an dem Sie gearbeitet haben. Schicken Sie sich die Live-Webadresse Ihrer Website auf einem Weg zu, der sich auf dem Handy leicht öffnen lässt, etwa als Nachricht an sich selbst in einer Messenger-App oder als E-Mail an Ihre eigene Adresse. Öffnen Sie diesen Link dann im Browser Ihres Handys und gehen Sie Ihre Website so durch, wie es ein echter Besucher täte: Prüfen Sie, ob der Text lesbar ist, ob Schaltflächen leicht zu treffen sind und ob nichts gequetscht oder abgeschnitten aussieht. Wenn Ihnen ein Problem auffällt, nutzen Sie dieselbe Vorgehensweise für Änderungswünsche, die weiter oben in diesem Modul beschrieben ist.
Wenn das, was Ihnen auffällt, ein sichtbares Problem ist, das sich festhalten lässt, machen Sie gleich dort auf dem Handy einen Screenshot, so wie Sie es normalerweise tun. Öffnen Sie dann [claude.ai/code](https://claude.ai/code) im Browser Ihres Handys, wählen Sie den Chat aus, in dem die Arbeit an Ihrer Website läuft, und hängen Sie den Screenshot dort an Ihre Nachricht an – zusammen mit einer Beschreibung in klarer Alltagssprache, was anders sein soll.
Eine echte Domain verbinden
Module 17 · 2 lessons
Im Moment endet die Adresse Ihrer Website auf workers.dev – eine kostenlose Adresse, die Cloudflare jedem Projekt gibt. Eine Domain ist eine Webadresse, die Sie selbst wählen und eigens für Ihr Unternehmen registrieren, etwa ihrfirmenname.de. Sie wirkt professioneller und ist für Kunden leichter zu merken.
Sobald Ihre Website fertig ist und Ihnen gefällt, führt Ihr Agent Sie durch das Verbinden einer echten Domain, falls Sie eine möchten. Er zeigt Ihnen den genauen verfügbaren Domainnamen und den genauen Preis, bevor irgendetwas geschieht, und wartet auf Ihre klare Freigabe, bevor überhaupt etwas registriert oder gekauft wird. Nichts wird je automatisch gekauft oder ohne dass Sie der genauen Domain und dem genauen Preis, die Ihnen gezeigt wurden, ausdrücklich zugestimmt haben.
Wenn Sie sich entscheiden, im Moment keine eigene Domain zu wollen, ist das völlig in Ordnung. Ihre Website funktioniert unter ihrer workers.dev-Adresse weiterhin einwandfrei, und Sie können jederzeit später eine echte Domain hinzufügen.
Später wiederkommen – Änderungen nach dem Start
Module 18 · 2 lessons
Sobald Ihre Website veröffentlicht ist, ist sie nicht in Stein gemeißelt. Sie können jederzeit zurückkommen – ob nächste Woche oder nächstes Jahr –, dieselbe Aufgabe mit Ihrem Agenten öffnen, beschreiben, was Sie geändert haben möchten, und der Agent kümmert sich darum, genau so, wie er die Seite ursprünglich gebaut hat. Es gibt keine separate Einrichtung zu wiederholen und nichts zusätzlich einzustellen; Sie beschreiben einfach die Änderung.
Nicht jede Änderung durchläuft genau dieselben Schritte, aber Sie müssen nie herausfinden, welche Art Ihre ist; das erledigt der Agent automatisch. Wenn Sie einen echten Wechsel der Design-Richtung wünschen, zeigt der Agent Ihnen neue Möglichkeiten und wartet auf Ihre Freigabe, so wie beim ersten Mal. Wenn Sie eine andere Art sichtbarer Änderung wünschen – neue Formulierungen, eine neue Seite oder ein neues Foto –, nimmt der Agent die Änderung vor, lässt im Hintergrund still seine üblichen Prüfungen erneut laufen und zeigt Ihnen das Ergebnis zur Bestätigung, bevor es live geht. Ist die Änderung klein und rein im Hintergrund, sodass kein Besucher sie je bemerken würde, kann sie einfach live gehen, ohne dass es eine neue Freigabe von Ihnen braucht. So oder so ändert sich Ihre Live-Website immer nur zu etwas, das Sie gesehen haben und mit dem Sie zufrieden sind.
Zum Abschluss
Module 19 · 4 lessons
Sobald der Agent Ihre Website für vollständig hält, bittet er Sie, die ganze fertige Seite noch einmal durchzusehen, bevor sie zur öffentlichen, echten Fassung Ihrer Website wird. Gehen Sie sie sorgfältig durch, so wie im Modul über das Anfordern von Änderungen beschrieben, und bitten Sie um alle letzten Anpassungen, die Sie wünschen, bevor Sie freigeben. Das ist Ihre letzte Gelegenheit, vor der Veröffentlichung Änderungen zu verlangen.
Sie haben Ihr Repository gleich zu Beginn als privat angelegt, hier ist also höchstwahrscheinlich nichts zu ändern. Das ist eine letzte Kontrolle. Ihre Live-Website ist öffentlich und bleibt es; privat bleiben Ihre Dateien auf GitHub.
Öffnen Sie Ihr Repository auf GitHub und schauen Sie oben auf der Seite neben seinen Namen. Dort sollte ein kleines Schild mit der Aufschrift Private stehen. Steht dort stattdessen Public, haben Sie beim Anlegen die andere Option gewählt – stellen Sie es jetzt um:
- Klicken Sie auf Settings.
- Bleiben Sie auf dem Reiter General.
- Scrollen Sie ganz nach unten, bis zum Abschnitt Danger Zone.
- Klicken Sie auf Change visibility.
- Wählen Sie Make private und bestätigen Sie.
So oder so bleibt Ihre Live-Website unberührt. Ein Repository privat zu machen ändert, wer Ihre Dateien lesen darf – nie, wer Ihre Seite besuchen kann.
Diese Vorlage und dieser Kurs werden so bereitgestellt, wie sie sind, ohne Garantie für das Ergebnis. Es lohnt sich, klar zu sagen, wo diese Grenze verläuft, damit nichts Wichtiges unausgesprochen bleibt.
- Ein KI-Agent schreibt die Website, und er kann sich irren. Lesen Sie, was er erzeugt, bevor Sie veröffentlichen. Behandeln Sie es als Entwurf, den Sie freigeben, nicht als fertige professionelle Arbeit.
- Es werden keine Platzierungen, kein Traffic und keine geschäftlichen Ergebnisse versprochen. Die Website ist so gebaut, dass Suchmaschinen und KI-Assistenten sie richtig lesen können. Ob sie die Website weit oben anzeigen, sie zitieren oder Ihnen Kunden schicken, hat niemand in der Hand.
- Die hier genutzten Dienste gehören anderen Unternehmen. GitHub, Cloudflare und Anthropic legen ihre eigenen Bedingungen, Preise und Verfügbarkeit fest und können sie jederzeit ändern.
- Nichts in diesem Kurs ist Rechts-, Steuer- oder Fachberatung. Eine Unternehmenswebsite braucht je nach Ihrem Standort und dem Ihrer Kunden oft eine eigene Datenschutzerklärung, ein Impressum oder einen Cookie-Hinweis. Das richtig hinzubekommen, liegt bei Ihnen.
Nichts davon ist ein Grund zu zögern. Es ist dieselbe Aufteilung, die dieser Kurs von Anfang an beschreibt: Die technische Arbeit wird Ihnen abgenommen, die Wahrheit über Ihr Unternehmen bleibt bei Ihnen.
Am Ende dieses Kurses gibt es keine Prüfung und keine Aufgabe abzugeben. Sie sind fertig, wenn Ihre Website live ist und Ihr Repository auf privat gestellt wurde, wie in der vorigen Lektion beschrieben. Das war's: Ihnen gehört jetzt eine echte, funktionierende Unternehmenswebsite, die Sie gebaut haben, ohne selbst eine einzige Zeile Code zu schreiben.
Wenn Sie später weitergehen wollen – etwa mit tiefergehender Strategie, Wettbewerbsrecherche oder laufender Betreuung Ihrer Website –, bietet IndexDock dafür auch professionelle Leistungen an. Das ist aber völlig freiwillig, und dieser kostenlose Kurs und die Website, die Sie damit gebaut haben, stehen für sich.
Bereit für Ihre eigene Website?
Der Kurs begleitet Sie Schritt für Schritt. Die Vorlage ist das Projekt, das Sie dabei bauen – kopieren Sie sie in Ihr eigenes Repository, den Rest übernimmt der Agent.