Wie erstellst du eine Website mit Claude Code? Mach aus einer fertigen Vorlage deine Unternehmenswebsite, ohne den Code selbst zu schreiben.
Starte mit einer vorhandenen Website. Prüfe Claude-Code-Zugang, öffne das vollständige Projekt und kontrolliere eine kleine Änderung vor der nächsten. Behalte einen freigegebenen Stand für die Wiederherstellung.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
01 / Startkonfiguration
Welchen Claude-Workflow nutze ich?
Nutze Claude Code mit Zugriff auf den Website-Ordner. Installiere und melde dich gemäß Anthropic an, öffne das entpackte Projekt und lass das vorhandene HTML bearbeiten. Das KI-Konto ist unabhängig vom Template-Kauf.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
Lies index.html, RECREATE.md und die Assets in diesem Ordner. Zeige mir vor der Bearbeitung, wo Überschrift, Bilder und Kontaktlinks liegen.
KI · Beispielantwort
Ich prüfe die Dateien und liste Sektionen, Bildpfade und Links auf. Außerdem kennzeichne ich Formulare, die eine Aktion nur demonstrieren.
Du
Verwende das vorhandene HTML. Meine Texte und Bilder liegen im Ordner materials.
KI · Beispielantwort
Ich ordne die Materialien den bestehenden Sektionen zu und frage nach fehlenden Inhalten.
Nächste Schritte
Ordner öffnen
Entpacke das Projekt und gib dem Agent Zugriff.
Seite prüfen
Lies HTML und Anleitung vor dem Austausch von Inhalten.
Eigene Materialien ergänzen
Gib eigene Texte, Bilder und das echte Kontaktziel an.
Ziel: Der Agent arbeitet an deinen tatsächlichen Website-Dateien.
Beispielablauf. Keine Live-Verbindung zu einer KI.
02 / Dateikontext geben
Wie stelle ich sicher, dass Claude die richtigen Dateien liest?
Bitte zuerst um Prüfung von index.html, RECREATE.md und Begleitressourcen. Frage nach Seitenstruktur, externen Abhängigkeiten und Bedienelementen, die nur einen Dienst demonstrieren.
Website-Dateien + Designanweisungen
Zuerst prüfen
Bitte um Verständnis, ohne Dateien zu ändern.
Eigenes Briefing trennen
Der Leitfaden erklärt das Original. Freigegebene Texte beschreiben das neue Unternehmen.
Quelldateien und technische Details ansehen
Die tatsächlichen Projektdateien
11-forma-studio · Aktuell geprüftes ZIP
Aktueller Produktdownload geprüft am 2. Oktober 2026. Dateien und externe Ressourcen gehören zu diesem Projekt; andere Templates unterscheiden sich.
Die Anleitung beschreibt die ursprüngliche fiktive Seite. Trenne ihre Aufgabe von den Änderungen für dein eigenes Unternehmen.
Build an English single-page fictional design studio in `index.html`, with inline CSS and plain inline JavaScript at the end of its body. No framework, build step, module loader or external JavaScript dependency is needed. Supply `assets/terra.webp`, `assets/index.webp` and `assets/vesper.webp` alongside it, using the supplied image files unchanged. These files are identical copies of the corresponding fixed remote images in §9. If the local copies are not included with these instructions, obtain their exact bytes from the corresponding §9 URLs and save them at these three local paths without conversion or regeneration. The rendered page uses the remote image URLs; the local copies are not an automatic offline fallback. Runtime is **network**: images and Google Fonts need internet access. Do not call the result offline self-contained.
03 / Erste Bearbeitung
Wie passe ich die Seite ohne vollständigen Neuaufbau an?
Beschreibe die auszutauschenden Inhalte, Bilder oder Styles und behalte ausdrücklich das vorhandene Layout. Claude kann diese Teile in index.html bearbeiten; eine komplette Neuerstellung aus RECREATE.md ist nur nötig, wenn du sie beauftragst.
›_ Beispiel für KI-BearbeitungFormwell
Du
Passe Formwell für das fiktive Markenstudio Alder an. Ändere Name, Hero-Überschrift und Einleitung. Behalte Layout und Beispiel-Projektbilder.
KI · Beispielantwort
Die vorbereitete Vorschau ersetzt Firmenname, Hero-Überschrift und Einleitung. Vergleiche Inhalte und Original; übrige Projektbilder bleiben Beispielinhalte.
Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.
AI ChatBeispielablauf
Claude Code · Bearbeitete Seite prüfen
Du
Vergleiche die bearbeitete Seite mit meinen Anweisungen. Prüfe Überschrift, Bildpfade, Navigation und Kontaktbutton auf Desktop- und Handybreite.
KI · Beispielantwort
Ich liste Abweichungen auf und prüfe die tatsächliche Browseransicht. Eine gespeicherte Datei allein bestätigt das sichtbare Ergebnis nicht.
Du
Auf meinem Handy ist die Überschrift abgeschnitten. Behebe das, ohne den Text zu ändern.
KI · Beispielantwort
Ich passe das responsive Layout an und prüfe dieselbe Handybreite erneut. Danach kannst du das Ergebnis freigeben.
Nächste Schritte
Änderungen vergleichen
Prüfe Texte, Bilder und den beauftragten Umfang.
Vorschau öffnen
Prüfe Desktop und Handy sowie Navigation und Kontakt.
Problem beschreiben
Beschreibe den Fehler und lass die korrigierte Ansicht erneut prüfen.
Ziel: Eine geprüfte Version zum Weiterbearbeiten oder Veröffentlichen.
Beispielablauf. Keine Live-Verbindung zu einer KI.
04 / Prüfen und korrigieren
Woran erkenne ich die richtige Änderung?
Gespeicherte Dateien und Browserergebnis im Vergleich zum Briefing. Prüfe den ersten Stand und bitte bei einem sichtbaren Problem um Korrektur vor der nächsten Freigabe.
01
Quelländerungen lesen
Prüfe Texte, Links und unerwartete Änderungen.
02
Beide Bildschirmgrößen prüfen
Achte auf abgeschnittene Überschriften, ungünstige Ausschnitte und defekte mobile Navigation.
03
Beobachtung korrigieren
Beschreibe den Fehler und das gewünschte korrigierte Ergebnis.
Quelldateien und technische Details ansehen
Eine kleine Änderung zum Prüfen
11-forma-studio/index.html · L28
Diese Auszüge stammen aus dem geprüften englischen Original. Die folgenden Beispiele sind vorbereitete Quelltextänderungen, keine Live-KI-Sitzung. Unternehmen und Arbeiten bleiben fiktiv.
Vorher
<h1>Forma</h1>
Erste vorbereitete Änderung
<h1>Cedar</h1>
Vorbereitete Folgeänderung
<h1>Cedar</h1>
Eine gespeicherte Version zum Wiederherstellen
11-forma-studio · LP18-restore.diff
Die gespeicherte erste Änderung wurde in einer lokalen Testdatei wiederhergestellt; ihre Prüfsumme stimmte überein. Das zeigt eine Dateiwiederherstellung, keinen Agent-Checkpoint oder Hosting-Rollback.
Diese Auszüge stammen aus dem geprüften englischen Original. Die folgenden Beispiele sind vorbereitete Quelltextänderungen, keine Live-KI-Sitzung. Unternehmen und Arbeiten bleiben fiktiv.Ganze Vorschau öffnen ↗
Vorbereitete Quelltextänderung
Diese vorbereitete Version ändert ausgewählte Texte oder Bilder im selben Projekt. Struktur und Beispielinhalte bleiben erhalten. Vergleiche die Dateien vor einer ähnlichen Änderung für dein Unternehmen.Ganze Vorschau öffnen ↗
AI ChatBeispielablauf
Claude Code · Fehlende Projektdatei finden
Du
Dieses Bild fehlt in der Vorschau. Prüfe Bild-URL und lokalen Dateipfad in index.html.
KI · Beispielantwort
Ich vergleiche den HTML-Verweis mit den Dateien und prüfe externe URLs. Fehlt die Datei, frage ich danach, statt ein unpassendes Bild einzusetzen.
Du
Das richtige Bild liegt in assets. Korrigiere den Verweis, behalte den Dateinamen und prüfe den Ausschnitt am Handy.
Nächste Schritte
Verweis prüfen
Lies den Bildpfad im tatsächlichen HTML.
Asset finden
Vergleiche lokale Dateien oder prüfe die externe URL.
Vorschau erneut öffnen
Prüfe korrigiertes Bild und Ausschnitt im Browser.
Ziel: Das gewünschte Bild lädt vom richtigen Pfad.
Beispielablauf. Keine Live-Verbindung zu einer KI.
05 / Fehlende Dateien
Was tun, wenn Claude eine Datei oder ein Bild nicht findet?
Prüfe echten Ordner, Pfade und Berechtigungen. Kontrolliere dann lokale Assets und externe Browseranfragen. Fehlender Kontext wird nicht durch erfundene Ersatzinhalte gelöst.
Kann ich eine abgelehnte Änderung zurücknehmen?⌃
Behalte das Original-ZIP und einen freigegebenen Ordner oder Git-Stand. Sage dem Agent, welche Version oder Änderung zurückkehren soll, und prüfe die wiederhergestellte Seite samt Links.
06 / Projekt wählen
Mit welcher Website möchte ich starten?
Vergleiche die tatsächlichen Inhaltsstrukturen. Die folgenden Designs bieten unterschiedliche Präsentationen; sie belegen keine identischen Ergebnisse in jeder Claude-Umgebung.
Forma Studio
Zeige Studioarbeiten, Leistungen und Ansatz mit freigegebenen Inhalten. Anfrage- und Newsletter-Demos brauchen echte Ziele.
Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.
index.html
RECREATE.md
assets/common-ground.png
assets/loop-radio.png
assets/mono-house.png
assets/serein.png
Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
Claude Code · Cloudflare Pages · vom Ordner ins Web
Du
Meine Website ist fertig. Veröffentliche diesen Projektordner mit Wrangler auf Cloudflare Pages. Sag mir zuerst, welchen Kontozugriff und welche Freigabe du brauchst.
KI · Beispielantwort
Ich prüfe Dateien und Bildpfade. Melde dich mit deinem Cloudflare-Konto an und gib das Erstellen oder Aktualisieren des Pages-Projekts vor dem Upload frei.
Du
Ich gebe die Veröffentlichung in einem neuen Pages-Projekt frei. Lass meine aktuelle Domain unverändert, bis ich die Vorschau geprüft habe.
KI · Beispielantwort
Nach dem freigegebenen Upload gebe ich die von Cloudflare bereitgestellte Adresse zurück und prüfe Bilder und Links. Nach deiner Freigabe können wir die Domain verbinden.
Nächste Schritte
Projekt an Agent geben
Nutze einen KI-Agent mit Datei- und Terminalzugriff; lasse index.html und Assets zusammen.
Upload freigeben
Melde dich beim Host an und bestätige das Projekt. Der Agent kann die unterstützte CLI oder API nutzen.
Echte Adresse prüfen
Öffne die zurückgegebene URL; verbinde die Domain erst nach Prüfung der Website.
Ziel: Deine Website an einer öffentlichen Adresse, danach unter deiner Domain.
Beispielablauf. Keine Live-Verbindung zu einer KI.
07 / Was bleibt
Was liegt außerhalb dieser Claude-Code-Aufgabe?
Nach der Bearbeitung verbindest du Kontakt- oder Buchungsdienste und lässt den KI-Agent den Ordner auf passendem Hosting veröffentlichen. Gib Konto und Upload frei, prüfe die echte URL und verbinde deine Domain. Hosting und KI-Zugang sind separat.
Teste ein echtes Template, bevor du dich entscheidest.
Lade das originale Formwell-Projekt herunter. Gib die Dateien und RECREATE.md an ein geeignetes KI-Tool, probiere eine kleine Änderung und prüfe das Ergebnis.
Das kostenlose Beispiel ist Formwell. Originaldesign und Anleitung sind auf Englisch. Die Produktpreise bleiben unverändert.
Wähle ein Template. Mach es mit Claude Code zu deiner Website.
Lade Dateien herunter, öffne das Projekt im KI-Tool und beschreibe deine Änderungen. Du beginnst mit einem vorhandenen Design und kannst die gespeicherte Website weiter bearbeiten.
OneDollarStock setzt ein Projekt zur Vorbereitung der Plattform auf den Eintritt in den deutschen Markt im Rahmen des Akzelerationspfads „Go Global“ des Programms „Unicorn Hub Startup Booster“ um (Projektnr. FENG.02.28-IP.02-0013/23). Das Projekt wird aus Mitteln des Programms European Funds for Smart Economy 2021–2027 im Rahmen der Priorität „Innovation-friendly environment“, Maßnahme FENG.2.28 Startup Booster Poland, kofinanziert.
Mehr über das Projekt erfahren →
Savi
Template ansehen
Rondist
Template ansehen
Passer
Template ansehen
Outer Light
Template ansehen
Osma
Template ansehen
Nightglass
Template ansehen
Lark
Template ansehen
Drumlin
Template ansehen
Aveniq
Template ansehen
Novera
Template ansehen
Aurelia Atelier
Template ansehen
Nivora
Template ansehen
Savi
Template ansehen
Rondist
Template ansehen
Passer
Template ansehen
Outer Light
Template ansehen
Osma
Template ansehen
Nightglass
Template ansehen
Lark
Template ansehen
Drumlin
Template ansehen
Aveniq
Template ansehen
Novera
Template ansehen
Aurelia Atelier
Template ansehen
Nivora
Template ansehen
