FERTIGES DESIGN. BEARBEITBARES HTML. ANLEITUNG FÜR KI.

Website-Vorlagen für dein KI-Tool. Wähle das Design. Entwickle deine Website in deinem Tool weiter.

Lade dein gewähltes Projekt mit bearbeitbarem HTML und RECREATE.md herunter. Die KI erhält eine bestehende Website und eine Anleitung zu ihrem Design. Du beauftragst konkrete Änderungen, prüfst die Vorschau und arbeitest mit den gespeicherten Dateien weiter.

Vorlage für dein KI-Tool wählen PRO-Zugang wählen

Claude Code · Codex · Cursor · Gemini CLI

Clearstead → Promptdesk

AI ChatKurzfassung eines Beispielauftrags

Arbeite mit den angehängten index.html und RECREATE.md aus Clearstead. Ändere den Namen in Promptdesk. Überschrift: „Prüfe deine Website-Änderungen an einem Ort.“ Button: „Beispieländerungen ansehen“, mit Link zu #features. Ersetze die Finanzgrafik durch eine statische HTML-Illustration mit drei Website-Bereichen und Beispielstatus. Das Dashboard zeigt ein fiktives Konzept ohne Konten oder echtes Bewertungssystem. Behalte das zweispaltige Layout, die Farben und unteren Bereiche bei. Speichere die Datei und zeige eine Vorschau.

index.html · RECREATE.md

Die Vorschau zeigt den Einstieg von Promptdesk und eine statische Illustration zur Website-Prüfung. Vergleiche sie mit Clearstead. Behalte die gespeicherte Datei für deine nächste Bearbeitung.

Eine vorbereitete Gesprächszusammenfassung. Der Button kopiert den vollständigen Bearbeitungsauftrag zur Verwendung mit den Projektdateien. Keine Live-Verbindung zu einer KI.

Vollständiger Auftrag zum Kopieren

Arbeite mit den angehängten Dateien index.html und RECREATE.md aus Clearstead (14-clearstead). Ändere nur den Namen in der oberen Leiste und den Seitenanfang in das fiktive Promptdesk. Schreibe über die Überschrift: „Fiktives Konzept / Projektvorschau“. Überschrift: „Prüfe deine Website-Änderungen an einem Ort.“. Beschreibung: „Promptdesk ist ein fiktives Konzept zur Prüfung von Website-Projekten. Entdecke Beispiel-Layout, Inhalte und die nächste Version.“. Button: „Beispieländerungen ansehen“, mit Link zu #features. Darunter: „Fiktives Produktkonzept. Die Illustration enthält Beispieldaten; es gibt keine Konten oder echte Bewertungsfunktion.“. Ersetze die Finanz-Dashboard-Illustration durch eine statische HTML-Illustration ohne Konten, Bewertungen oder Backend. Füge den Namen Promptdesk und die Kennzeichnung „Illustration / Beispieldaten“, den Titel „Website prüfen“, den Hinweis „Beispielprojekt“ sowie die seitlichen Beschriftungen „Übersicht“, „Dateien“, „Versionen“ hinzu. Zeige drei Bereiche: „Startseite“ — „Zur Prüfung“, „Hero“ — „Neues Layout“, „Preise“ — „Neuer Text“. Füge in der Mitte eine Beispielvorschau der Website mit „Deine nächste Website.“ und dem Dateinamen index.html ein. Zeige unten im Dashboard index.html und RECREATE.md. Behalte das zweispaltige Layout, die Farben und alle unteren Bereiche der Quellseite bei. Speichere die bearbeitete index.html und zeige eine Vorschau.

Das originale Clearstead und ein vorbereiteter Einstieg für das fiktive Promptdesk. Geändert wurden der Name in der oberen Leiste, die Hero-Texte und die Dashboard-Illustration. Untere Bereiche und Farben stammen aus Clearstead. Das Dashboard ist eine statische Illustration mit Beispieldaten, keine funktionierende Anwendung.

Projektdateien

Öffne den gesamten entpackten Ordner in deinem KI-Tool. Stelle HTML, RECREATE.md und mitgelieferte Materialien bereit.

index.htmlRECREATE.mdassets/

01 / DESIGN UND DATEIEN ZUM WEITERENTWICKELN

Gib der KI das Projekt, das du weiterentwickeln willst.

Wähle eine Website, die du bereits ansehen kannst. HTML und Anleitung geben der KI ein konkretes Projekt zur Bearbeitung und dir eine Referenz zum Prüfen der Änderungen.

HTML zeigt das Projekt. RECREATE.md beschreibt es für die KI.

Unten steht ein tatsächlicher Auszug aus der mit Clearstead gelieferten Anleitung. Die Datei beschreibt Aufbau, Design und Verhalten des Quellprojekts. Stelle sie dem Agenten zusammen mit HTML und Materialien bereit, um an deiner gewählten Website zu arbeiten.

index.htmlDie bestehende Website, die die KI bearbeiten soll.

RECREATE.mdDetaillierte Anleitung zum Nachbauen des Projektdesigns.

assets/Die mitgelieferten Projektmaterialien.

Den Paketinhalt findest du auf der Produktseite deiner gewählten Vorlage. Behalte vor der Bearbeitung eine Kopie der Quelldateien.

RECREATE.mdAuszug aus der Quell-RECREATE.md / EN

Produce one `index.html`, containing all page markup, an inline stylesheet and one inline vanilla-JavaScript IIFE placed after the dialog. Use English. No framework, package manager, build step, bundler, external JavaScript, backend or persisted state.

Die Originalanleitung im Paket ist auf Englisch. Dies ist ein Auszug, nicht die vollständige Datei.

02 / DIE NÄCHSTE ÄNDERUNG IM GESPEICHERTEN PROJEKT

Änderung beauftragen. Ergebnis vergleichen. Weiterentwickeln.

Arbeite mit der aktuellen Datei weiter. Lege den Umfang der nächsten Änderung fest und sage, welche Elemente bleiben sollen. Jede Vorschau zeigt, ob die KI deinen Auftrag umgesetzt hat.

Promptdesk

AI ChatBeispielauftrag

Arbeite mit der gespeicherten index.html des Promptdesk-Projekts. Ändere nur das Layout am Seitenanfang: Zentriere Überschrift und Beschreibung über dem Dashboard, mache das Dashboard breiter und platziere es unter dem Text. Ordne die Elemente auf dem Smartphone untereinander an. Behalte alle Texte, die statische Illustration, Beispieldaten und Farben bei. Der Button „Beispieländerungen ansehen“ soll weiterhin zu #features führen. Behalte die unteren Seitenbereiche bei. Speichere index.html und zeige eine neue Vorschau.

Überschrift und Beschreibung stehen jetzt über einem breiteren Dashboard. Inhalte, Farben und Button-Link bleiben gleich. Vergleiche die Layouts und prüfe die Vorschau auf dem Smartphone.

Zwei vorbereitete Versionen des fiktiven Promptdesk. Die zweite ändert nur das Hero-Layout: zentrierter Text über einem breiteren Dashboard. Inhalte, Farben, Illustration und Link #features bleiben gleich.

03 / WÄHLE DIE BASIS FÜR DEINE WEBSITE

Wähle zuerst, was du sehen möchtest.

Vergleiche drei unterschiedliche Designs. Starte mit einem passenden Layout und lass die KI dessen Dateien bearbeiten.

Clearstead / Layout mit Dashboard

Eine helle Produktseite mit großer Interface-Illustration. Im Beispiel ändern wir den Einstieg und die Illustration, danach die Anordnung von Überschrift und Dashboard.

Diese Vorlage wählen

Offset / Portfolio mit Arbeiten

Große Typografie, Bilder und Projektbereiche. Wähle dieses Layout, wenn du eine Website mit deinen eigenen Arbeiten entwickeln möchtest.

Diese Vorlage wählen

Aveniq / dunkle Produktseite

Ein dunkles Layout mit Dashboard-Illustrationen und orangefarbenen Akzenten. Starte mit diesem Design, wenn es zu deiner Idee passt. Die gezeigten Funktionen sind ein fiktives Konzept.

Diese Vorlage wählen

04 / DATEIEN BEHALTEN. IM EIGENEN TOOL WEITERARBEITEN.

Neue KI-Sitzung. Dasselbe Projekt in Arbeit.

Behalte den aktuellen Website-Ordner. Stelle diese Dateien in der nächsten Sitzung oder einem anderen Agenten bereit und beschreibe die nächste Änderung. Projekt und Anleitung bleiben deine Referenz.

Wähle das Design.

Öffne die vollständige Vorschau. Prüfe Layout, Inhalte und Verhalten der Seite. Wähle ein Projekt, das zu deiner geplanten Website passt.

Stelle das ganze Projekt bereit.

Entpacke die ZIP. Gib deinem KI-Tool HTML, RECREATE.md und mitgelieferte Materialien. Die Anleitung beschreibt das Design; HTML zeigt seine bestehende Version.

Beauftrage eine konkrete Änderung.

Beschreibe, was sich ändern und was bleiben soll. Lass die Datei speichern, öffne die Vorschau und vergleiche sie mit dem gewählten Design.

Design und Anleitung im Paket

Du arbeitest mit dem gespeicherten HTML und den Materialien des gewählten Projekts.
Du kannst in einem KI-Tool weiterarbeiten, das die bereitgestellten Dateien lesen und bearbeiten kann.
Claude Code, Codex, Cursor und Gemini CLI sind Beispiele für Tools zur Arbeit mit Projektdateien.

Was du noch vorbereiten musst

Funktionen und Wege zur Bereitstellung von Dateien hängen vom Tool und Tarif ab. KI wählst und bezahlst du separat.
Prüfe nach jeder Bearbeitung Vorschau, Links und Verhalten auf dem Smartphone.
Eine öffentliche Adresse, Nachrichten, Buchungen und Zahlungen benötigen separates Hosting oder die Einrichtung passender Dienste.

Teste die Arbeit mit Dateien am kostenlosen Formwell.

Lade das Projekt herunter, öffne es in deinem KI-Tool und beauftrage eine Änderung. Prüfe Vorschau und gespeicherte Datei, bevor du deine gewählte Vorlage kaufst.

Formwell kostenlos herunterladen

DIE TEMPLATE-BIBLIOTHEK

Wähle ein Design für die Arbeit mit deiner KI.

Sieh dir ein fertiges Layout an. Öffne die Dateien in deinem KI-Tool und entwickle dein gewähltes Design mit weiteren Änderungen.

Den gesamten Katalog ansehen

82 Website-Templates

Savi Template ansehen

Rondist – Website Template for AI Agents

Rondist Template ansehen

Passer Template ansehen

Outer Light – Website Template for AI Agents

Outer Light Template ansehen

Osma Template ansehen

Nightglass – Website Template for AI Agents

Nightglass Template ansehen

Lark Template ansehen

Drumlin – Website Template for AI Agents

Drumlin Template ansehen

Aveniq Template ansehen

Novera Template ansehen

Aurelia Atelier – Website Template for AI Agents

Aurelia Atelier Template ansehen

Nivora Template ansehen

WÄHLE DEINEN ZUGANG

Nimm eine Vorlage. Oder die ganze Bibliothek mit Website-Vorlagen, Fotos, Mockups, Presets und mehr — in einem PRO-Plan.

Wähle ein Design zum Weiterentwickeln oder erhalte mit PRO weitere Layouts und kreative Materialien.

Ein einzelnes Template

Dein gewähltes Design und die Dateien für die Arbeit mit deiner KI.

€32,32 EUR/ Template

Dein gewähltes Website-Design
Quelldateien und KI-Anweisungen
Einmal zahlen

Design für meine KI wählen

PRO Yearly

Die gesamte PRO-Bibliothek für weitere Projekte während deines aktiven Abonnements.

€167,18 EUR/ Jahr

Die gesamte Website-Template-Bibliothek
Fotos, Mockups, Presets, LUTs und Texturen
Ein Jahr Zugang zur PRO-Bibliothek
Automatische Verlängerung jedes Jahr. Jederzeit kündbar.

Spezielles Lifetime-Angebot

PRO Lifetime

Zugang zur PRO-Bibliothek für weitere Projekte mit einer Zahlung.

Vorheriger Preis~~€667,67 EUR~~

€221,81 EUR/ einmalig

Die gesamte Website-Template-Bibliothek
Fotos, Mockups, Presets, LUTs und Texturen
Lifetime-Zugang zur PRO-Bibliothek
Einmal zahlen. Keine jährliche Verlängerung.

Preise für Commercial Use. Preise und Steuern werden im Checkout bestätigt. KI-Tool, Domain und Hosting sind separat.

05 / VOR DER WAHL EINER VORLAGE

Dateien, Aufträge und die weitere Arbeit.

Kaufe ich eine Website, HTML oder nur einen Prompt?

Du kaufst die Dateien deiner gewählten Vorlage mit einem bestehenden Website-Design. Die gezeigten Projekte enthalten bearbeitbares HTML und RECREATE.md mit einer detaillierten Anleitung zum Nachbauen. Den Umfang der Materialien findest du auf der Produktseite. Das Herunterladen veröffentlicht keine Website und verbindet keine Dienste.

Kann ich in Claude Code, Codex, Cursor oder Gemini CLI arbeiten?

Du kannst das Projekt einem Agenten bereitstellen, der Dateien liest, bearbeitet und speichert. Arbeite in Claude Code, Codex, Cursor oder Gemini CLI nach der Anleitung des Tools mit dem entpackten Ordner. Prüfe die verfügbaren Funktionen und deinen Tarif. OneDollarStock liefert das Projekt; dein KI-Tool wählst und bezahlst du separat.

Reicht es, einen kurzen Auftrag einzufügen?

Stelle der KI index.html, RECREATE.md und mitgelieferte Materialien separat bereit. RECREATE.md enthält die detaillierte Anleitung zum Projektdesign. Der Button kopiert den vollständigen Bearbeitungsauftrag; das Gespräch neben der Vorschau zeigt eine Kurzfassung. Beide beschreiben Änderungen an der bestehenden Website.

Wie prüfe ich das Ergebnis weiterer Änderungen?

Arbeite mit der aktuellen Datei und lege den Umfang fest: Was soll sich ändern, was soll bleiben? Lass die Bearbeitung speichern, öffne die Vorschau und vergleiche sie mit der vorherigen Version. Prüfe auch Links und die Ansicht auf dem Smartphone. Ein Formular oder Button in der Vorlage kann einen Beispielzustand zeigen; echte Nachrichten, Zahlungen oder Buchungen müssen separat eingerichtet werden.

Wie arbeite ich nach einem Wechsel des KI-Tools weiter?

Behalte den aktuellen Projektordner mit HTML, Anleitung und Materialien. Stelle ihn dem nächsten Tool bereit, das mit Dateien arbeitet, und beschreibe die nächste Änderung. Der Projektwechsel überträgt den Verlauf des vorherigen Gesprächs nicht. Bitte den neuen Agenten vor der weiteren Arbeit, die Dateien zu lesen, und prüfe seine erste Bearbeitung.

Wähle das Design. Öffne das Projekt in deinem KI-Tool.

HTML und Anleitung liegen im Paket deiner gewählten Vorlage. Starte mit einem Design, das du bearbeiten möchtest, und behalte die weiteren Versionen.

Vorlage für dein KI-Tool wählen PRO-Zugang wählen

06 / WÄHLE EINEN RATGEBER FÜR DEIN TOOL

Projekt, Dateien und der nächste Auftrag.

Erfahre, wie du in Claude Code, Codex, Cursor oder Gemini CLI an einem fertigen Projekt arbeitest und was du der KI vor der Bearbeitung bereitstellst.