Hättest du gedacht, dass du mit Claude Cowork eine komplette Webseite erstellen kannst, ohne eine einzige Zeile Code zu schreiben? Genau das zeigt dieses Tutorial. Ein kleiner Verein bekam eine vollständige One-Pager-Webseite, und du siehst, wie aus einem einzigen Prompt eine Landingpage für eine Rabattaktion entsteht. Dabei lernst du nicht nur die Schritte, sondern auch, worauf du achten solltest, damit deine Ergebnisse schneller besser werden.
Das Video wird erst beim Abspielen von YouTube geladen – dabei werden Daten (u. a. deine IP-Adresse) an YouTube bzw. Google übertragen. Mehr dazu in der Datenschutzerklärung
Wichtigste Erkenntnisse
- Starte für jedes neue Projekt immer eine neue Aufgabe. Wenn du in einer bestehenden Aufgabe weiterarbeitest, vermischt sich der Kontext und das Ergebnis wird unsauber.
- Lege schon zu Beginn einen eigenen Projektordner an. Ohne diesen legt Cowork Dateien oft in einem temporären Ordner ab, und die Vorschau funktioniert dann nicht zuverlässig.
- Bündele mehrere Änderungswünsche in einem Prompt. Das spart Tokens und Zeit.
- Achte auf dein Tokenkontingent. Ein starkes Modell verbraucht mehr, und für einfachere Aufgaben reicht oft ein kleineres Modell aus.
- Die erstellte Seite ist eine einzelne HTML-Datei. Sie lässt sich ohne Datenbank oder Serverlogik direkt auf deinen Webspace hochladen.
- Funktionen wie Impressum-Links oder ein Hamburger-Menü musst du gegebenenfalls ausdrücklich im Prompt anfordern.
Schritt-für-Schritt-Anleitung
1. Das Ergebnis vor Augen: Was Cowork leisten kann
Bevor du loslegst, lohnt sich ein Blick auf ein Beispiel. Im Video wird eine Webseite für einen Verein gezeigt, die vollständig von Cowork erstellt wurde. Die Ausgangsbasis war nur ein kurzer Prompt mit dem Wunsch nach einer modernen One-Pager-Seite in den Farben des Logos. Danach wurde die Seite Schritt für Schritt verfeinert, und zwar insgesamt etwa zwei Stunden Arbeit im Dialog mit der KI. Die Animationen, der Zähler und die Einblendungen entstanden alle über natürliche Sprache.
2. Eine neue Aufgabe starten
Für jedes neue Projekt solltest du in Cowork eine neue Aufgabe anlegen. Klicke dafür auf den Bereich zum Erstellen eines neuen Tasks, statt in einer vorhandenen Aufgabe weiterzuschreiben. Der Grund ist einfach: Eine alte Aufgabe trägt den Kontext früherer Projekte mit sich, und die KI kann dadurch Vorgaben verwechseln oder vermischen. Ein sauberer Neustart sorgt für klarere Ergebnisse.
3. Den ersten Prompt formulieren
Jetzt kommt der eigentliche Prompt. Beschreibe möglichst konkret, was du möchtest. Im Beispiel ging es um eine moderne, konversionsstarke Landingpage als einzelne HTML-Datei. Darin enthalten waren ein Hero-Bereich mit einer knackigen Headline, die Aussage „50 % Rabatt auf alle Produkte und Mitgliedschaften“ sowie ein Untertitel mit den Inhalten, auf die Kunden Zugriff erhalten. Zusätzlich war die Gültigkeit des Angebots bis zum Ende des Monats angegeben.
Je genauer du Texte, Farben und Bereiche beschreibst, desto näher kommt das Ergebnis deiner Vorstellung. Du musst nicht alles perfekt formulieren, denn du kannst später nachsteuern. Schicke den Prompt anschließend ab.
4. Modell auswählen und das Tokenlimit im Blick behalten
Bevor du den Prompt absendest, kannst du das Modell auswählen. Diese Entscheidung lässt sich nach dem Absenden nicht mehr ändern. Ein Token ist dabei vereinfacht gesagt ein Textbaustein, den die KI verarbeitet. Je aufwendiger der Dialog und je leistungsstärker das Modell, desto mehr Tokens werden verbraucht. Irgendwann greift ein Limit, und du musst meist drei bis vier Stunden warten, bis es zurückgesetzt wird.
Du findest deinen aktuellen Verbrauch in den Einstellungen unter der Rubrik Nutzung. Dort siehst du auch, welches Modell wie viel verbraucht hat. Für einfachere Aufgaben reichen oft ältere oder kleinere Modelle, sodass du dein Kontingent schonst.
5. Das Ergebnis öffnen und prüfen
Wenn Cowork meldet, dass die Datei fertig ist, kannst du sie direkt ansehen. Manchmal funktioniert die Vorschau in der Oberfläche nicht sofort. In diesem Fall öffnest du den Ordner, in dem die HTML-Datei liegt, und doppelklickst auf sie. Die Seite öffnet sich dann im Browser. Prüfe in Ruhe, ob Texte, Button und Struktur deinen Vorstellungen entsprechen.
6. Fehler gezielt nachbessern
Nicht alles funktioniert beim ersten Versuch. Im Beispiel war das Impressum noch nicht verlinkt, sodass ein Klick ins Leere führte. Solche Lücken korrigierst du mit einem gezielten Folgeprompt. Beschreibe das Problem und das gewünschte Verhalten, etwa dass beim Klick auf „Impressum“ ein Bereich aufgeht, der die Angaben anzeigt. Du kannst die Daten auch direkt aus der bestehenden Webseite übernehmen lassen, sodass du sie nicht erneut eintippen musst.
7. Einen Projektordner anlegen
Damit alle Dateien an einem festen Ort landen, solltest du zu Beginn einen Projektordner festlegen. Wähle dafür im Dialog die Option zum Hinzufügen eines Ordners und lege auf deiner Festplatte beispielsweise einen Hauptordner mit einem Unterordner für das Projekt an. Dadurch bleibt alles übersichtlich, und Cowork arbeitet direkt in diesem Verzeichnis. Hast du den Ordner erst nach dem Start festgelegt, arbeitet die KI oft zunächst im temporären Verzeichnis weiter. Deshalb gilt: Den Ordner gleich am Anfang festlegen und bei Bedarf die Berechtigung erteilen.
8. Mehrere Änderungen in einem Prompt bündeln
Du musst nicht jede Kleinigkeit einzeln anfordern. Oft ist es sogar sinnvoller, mehrere Wünsche in einem Prompt zu kombinieren. Das spart Tokens, weil weniger Hin und Her entsteht. Im Video wurden etwa das Impressum, die Verlinkung und weitere Angaben in einem Zug angefordert. Du kannst auch Daten aus der bestehenden Seite übernehmen lassen, anstatt sie jedes Mal neu zu beschreiben.
9. Breite, Farben und Hintergrund feinjustieren
Nun geht es ans Design. Wenn dir die Seite zu schmal wirkt oder die Farben nicht stimmen, beschreibe genau, was du ändern möchtest. Im Beispiel wurde die Seite breiter gewünscht und die Hauptfarbe auf Grün gesetzt, wobei die Farben der Marke die Basis bildeten. Auch einen leicht animierten Verlaufshintergrund kannst du direkt anfordern. Der große Vorteil: Du kannst deine Wünsche auf Deutsch formulieren, ohne CSS-Werte zu kennen.
10. Responsive Darstellung prüfen
Verkleinere das Browserfenster, um zu sehen, wie sich die Seite an Smartphones anpasst. Im Beispiel passte sich das Layout automatisch an, weil die Responsive-Darstellung bereits von Anfang an mitgedacht war. Achte allerdings darauf, dass nicht alles automatisch entsteht. Das Navigationsmenü war auf dem Handy komplett verschwunden, weil kein Hamburger-Menü angefordert wurde. Solche Punkte solltest du beim Prüfen gezielt im Prompt ergänzen.
11. Animationen und kleine Spielereien ergänzen
Animationen machen eine Landingpage lebendiger. Im Video wurden ein Luftballon dezent animiert, Zähler eingeblendet und Boxen sanft eingefadet. Zusätzlich kam ein Konfetti-Effekt hinzu, der beim Kopieren der Bankverbindung ausgelöst wird. Ein Prompt reichte dafür aus. Auch eine Reaktion beim Verlassen der Seite, bei der der Luftballon traurig verschwindet, ließ sich so beschreiben. Beachte dabei, dass solche Effekte nur dann sinnvoll sind, wenn sie den Zweck der Seite unterstützen und nicht vom Inhalt ablenken.
12. Eine neue Version mit einem anderen Modell testen
Manchmal lohnt es sich, den gleichen Prompt noch einmal mit einem anderen Modell auszuführen. Oft ist das schneller und liefert trotzdem gute Ergebnisse. Da KI-Ausgaben variieren, kommt bei einem Neustart meist ein anders aussehendes Ergebnis heraus. Wenn du möchtest, dass es ähnlicher ausfällt, beschreibe jeden Bereich detaillierter, etwa mit Farben und dem gewünschten Text. Im Beispiel gefiel die zweite Version mit mehr Breite besser, und die Vorschau war direkt in Cowork verfügbar.
13. Die Seite veröffentlichen
Die fertige Landingpage ist eine einzige HTML-Datei. Diese lädst du einfach auf deinen Server oder Webspace hoch und verlinkest sie anschließend. Eine Datenbank oder eine serverseitige Programmierung brauchst du nicht. Das macht Rabattaktionen und kurzfristige Kampagnen sehr unkompliziert, weil du sie in kurzer Zeit erstellen und wieder anpassen kannst.
Zusammenfassung – Landingpage mit Claude Cowork erstellen ohne Programmierung
Mit Claude Cowork kannst du in kurzer Zeit eine moderne Landingpage oder eine komplette Webseite erstellen. Du beschreibst deine Wünsche in natürlicher Sprache, prüfst das Ergebnis im Browser und verfeinerst es mit gezielten Folgeprompts. Achte dabei auf eine neue Aufgabe für jedes Projekt, einen festen Projektordner, eine bündelte Formulierung deiner Änderungen und den bewussten Umgang mit Tokens und Modellen. Die Ergebnisse sind nicht immer perfekt, aber sie bieten eine starke Grundlage, die du ohne Programmierkenntnisse Schritt für Schritt verbessern kannst.
FAQ
Brauche ich Programmierkenntnisse, um mit Cowork eine Landingpage zu erstellen?Nein, du beschreibst deine Wünsche in natürlicher Sprache, und Cowork erstellt den Code dahinter.
Warum sollte ich für jedes neue Projekt eine neue Aufgabe starten?Eine bestehende Aufgabe trägt den Kontext früherer Projekte mit sich, was zu vermischten oder unpassenden Ergebnissen führen kann.
Warum ist ein Projektordner wichtig?Ohne festen Ordner legt Cowork Dateien oft in einem temporären Verzeichnis ab, wodurch die Vorschau nicht zuverlässig funktioniert.
Was passiert, wenn mein Tokenlimit erreicht ist?Dann musst du meist drei bis vier Stunden warten, bis das Kontingent zurückgesetzt wird. Deinen Verbrauch siehst du in den Einstellungen unter Nutzung.
Kann ich das Modell nach dem Absenden des Prompts noch wechseln?Nein, die Modellauswahl ist vor dem Absenden festzulegen. Für einen Wechsel musst du eine neue Aufgabe starten.
Wie kann ich Fehler wie einen nicht funktionierenden Impressum-Link beheben?Beschreibe das Problem in einem Folgeprompt und formuliere das gewünschte Verhalten, zum Beispiel dass sich bei einem Klick ein Bereich mit dem Impressum öffnet.
Ist die erstellte Seite für Smartphones geeignet?Das hängt von deinem Prompt ab. Im Beispiel passte sich die Seite automatisch an, dennoch solltest du Elemente wie ein Hamburger-Menü gezielt anfordern.
Wie veröffentliche ich die fertige Landingpage?Die Seite besteht aus einer einzigen HTML-Datei, die du auf deinen Server oder Webspace hochlädst und anschließend verlinkst.
Ist der Code aus Cowork immer sauber?Nicht zwingend. Bei einer reinen HTML-Datei ohne Datenbank oder serverseitige Logik ist das jedoch meist unkritisch.
