Ein vorhandenes Design für dein Claude-Code-Projekt
Website-Vorlagen für Claude Code. Erstelle deine Unternehmenswebsite, indem du Claude sagst, was er ändern soll.
Starte mit bearbeitbarem HTML und einem Design-Leitfaden, statt eine ganze Website von Grund auf zu erklären. Nutze Claude Code mit Dateizugriff, liefere Unternehmensinhalte und prüfe Änderungen.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
Claude Code · Website-Projektordner
Du
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.
01 / Projektdateien
Was gebe ich Claude Code?
Gib Claude Code Zugriff auf den entpackten Projektordner. Es kann index.html bearbeiten, RECREATE.md zum Verständnis des Originals nutzen und Assets lesen. Beschreibe dann deine gewünschten Änderungen.
Website-Dateien + Designanweisungen
Die Seite
index.html enthält das gelieferte Frontend, Stile und Interaktionen.
Die Design-Referenz
RECREATE.md erklärt das Originaldesign. Nutze ein separates Briefing für Unternehmensänderungen.
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.
Ich habe index.html und RECREATE.md. Ich möchte diese Website personalisieren, nicht die fiktive Firma nachbauen. Welche Dateien nutzt du?
KI · Beispielantwort
Ich bearbeite index.html und nutze RECREATE.md als Designkontext. Deine Texte, Bilder und Änderungen haben Vorrang vor der Beispielfirma.
Du
Behalte das Layout, nutze mein Angebot und meine Kontaktdaten und entferne fiktive Referenzen.
Nächste Schritte
Bestehende Website
HTML ist die Datei zur Personalisierung.
Designkontext
RECREATE.md beschreibt ursprüngliches Layout und Verhalten.
Dein Brief
Gib Unternehmensfakten und gewünschte Änderungen an.
Ziel: Das ausgewählte Design wird mit seinen Quelldateien zu deiner Website.
Beispielablauf. Keine Live-Verbindung zu einer KI.
02 / Bearbeiten oder nachbauen
Muss ich die gelieferte Seite neu bauen?
Nein. Bitte um direkte Bearbeitung für gezielte Änderungen am gelieferten HTML. Nachbau aus dem Leitfaden ist eine eigene Wahl und braucht Originalvergleich.
Eine gezielte Änderung
Benenne zu ändernde Texte, Bilder oder Stile und das zu behaltende Layout.
Eine neue Umsetzung
Nutze den Leitfaden als Ziel und prüfe Design und Bedienelemente des Ergebnisses.
03 / Deine Anfrage
Kann ich das Design behalten und die Botschaft ändern?
Ja, dafür eignet sich direkte Bearbeitung. Liefere freigegebene Leistungen, Projektbeschreibungen, echte Bilder und Kontaktziel. Bitte Claude Code, das Layout zu behalten und Dateiänderungen zu erklären.
›_ 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.
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>
Originalprojekt · Forma Studio
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 · 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 / Änderungen prüfen
Was prüfe ich, wenn Claude fertig ist?
Öffne die bearbeitete Seite und vergleiche sie mit deinem Auftrag: Firmenname, Überschrift, Bilder und Kontakt müssen stimmen. Prüfe Handy und Desktop; beschreibe Claude konkrete Fehler zur Korrektur.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
Änderungsbrief für Claude Code schreiben
Dein eigener Arbeitsplan
05 / Claude-Zugang
Gilt das auch für normalen Claude-Chat?
Diese Seite beschreibt Claude Code mit Projektdateien. Andere Claude-Oberflächen brauchen eigene Eingabe-, Bearbeitungs- und Vorschauwege; der Name allein macht sie nicht austauschbar.
Ist Claude-Zugang enthalten?⌃
Nein. Prüfe Anthropics aktuelle Konto- und Nutzungsanforderungen für deine Claude-Code-Oberfläche.
Wurde jede Vorlage in Claude Code getestet?⌃
Das wird nicht behauptet. Wähle nach dem tatsächlichen Paket und teste eine kleine Änderung in deiner Umgebung.
06 / Design wählen
Welche Seitenstruktur passt zu meinem Unternehmen?
Forma Studio passt zu einer arbeitsorientierten Studio-Präsentation. Andere Strukturen passen eher zu Kursen oder Produkten. Das sind Designoptionen, keine pauschal Claude-getestete Sammlung.
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/creator-blue.png
assets/creator-coral.png
assets/creator-lilac.png
assets/creator-mint.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 / Nächste Schritte
Was folgt nach der Vorlagenwahl?
Lade das gewählte Template herunter, öffne den Ordner in Claude Code und beschreibe deine Änderungen. Nach Prüfung verbindest du Kontakt oder Buchungen und beauftragst die Veröffentlichung mit deiner Hosting-Freigabe. Behalte den Ordner für Updates.
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
