OneDollarStock · Dein Website-Projekt

Website-Prompts mit bearbeitbarem HTML. Erstelle eine Website mit deinem KI-Tool und starte mit einem Design, das du schon ansehen kannst.

Prüfe Anleitung, bearbeitbares HTML und das beschriebene Design. Wähle ein Projekt und sage deiner KI, was du ändern möchtest.

Prompt neben dem Design lesen Forma-Studio-Preis und Dateien ansehen

Forma Studio

Formwell

VYNE

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

HTML + Designanleitung

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.

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.

01 / Echte Anleitung

Was enthält ein ausführlicher Website-Prompt?

Er beschreibt die zu erstellende Website: Sektionen, visuelle Regeln, Inhalte und Interaktionen. RECREATE.md von Forma Studio enthält diese Angaben. Kombiniere ihn mit HTML und deinen Firmenanweisungen, um das Beispiel nachzubauen oder das vorhandene Projekt anzupassen.

Englischer Originalauszug · Abschnitt 1

No framework, build step, module loader or external JavaScript dependency is needed.

Quelldateien und technische Details ansehen

Original-Ausgabevorgabe von Forma Studio

11-forma-studio / RECREATE.md / §1 / line 5

Englischer Originalauszug aus dem eigenen Paket, geprüft am 2. Oktober 2026. Vollständiger Guide und Dateien gehören zum Produkt; dieser öffentliche Auszug ist nicht der gesamte Prompt.

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.

Forma Studio · fiktive Originalreferenz

Englisches Original-Frontend aus 11-forma-studio. Externe Medien und lokale Demo-Bedienelemente bleiben unverändert.

Ganze Vorschau öffnen ↗

02 / Design wählen

Kannst du das beschriebene Design prüfen?

Ja. Öffne vor der Auswahl die Template-Vorschau und prüfe danach HTML und Anleitung. Forma Studio, Formwell, VYNE und Offset haben unterschiedliche Layouts; wähle das gewünschte Design für deine Website.

Forma Studio

Redaktionelles Portfolio für Marken- und Digitaldesign mit Arbeiten und Vorgehen.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/index.webp
assets/terra.webp
assets/vesper.webp

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Formwell

Arbeiten, Leistungen und Prozess eines Kreativstudios in redaktionellem Layout.

Preis und Dateien ansehen ↗

Dateien prüfen

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.

VYNE

Markantes Studioportfolio mit Projekten, Leistungen und Prinzipien.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/vyne-clay-glass-still-life.png
assets/vyne-cobalt-editorial.png
assets/vyne-ivory-portrait.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Offset

Großzügige Projektpräsentation mit Leistungen und Vorgehen.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/contour.svg
assets/fern.png
assets/form-poster.svg
assets/geometric-print.svg
assets/glass.png
assets/packaging.png
assets/ribbon.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.

Schriftliche Regel	Genaue Quellstelle	Geprüfte Entsprechung	Was das nicht belegt
Warmes Papier, dunkle Schrift und ziegeloranger Akzent (§2).	RECREATE.md:11; index.html:3 · :root (--paper, --ink, --accent)	Der Quelltext setzt #f2f0e9, #171c1b und #c53c22. Die Originalvorschau zeigt diese Rollen; das ist Quellprüfung, keine KI-Rekonstruktion.	Farbrollen, keine Qualitätsnote.
Spätere Regeln setzen 1440px Inhaltsbreite und 896px Projektspalte (§4).	RECREATE.md:35, section 4; index.html:9–11 · :root, .wrap, .project-list	Der spätere Quelltext setzt --content-max:1440px und .project-list max-width:896px. Die Container bleiben verschieden.	Berechnete Breiten am genannten Viewport vergleichen; mobile Regeln gelten weiter.
Netzwerk erforderlich; externe Bilder und Schriften (§1, §3).	RECREATE.md:5, 17–25; index.html:2, project img[src] markup	HTML nutzt Google Fonts und externe Bild-URLs, obwohl drei WebP-Dateien beiliegen.	Kein automatischer Offline-Ersatz.
Anfrage und E-Mail-Vorschau sind lokale Demos (§1).	RECREATE.md:7; index.html:42, enquiry form handler near end of script	Der native Dialog erstellt eine lokale Vorschau; der geprüfte Handler sendet nichts an einen Dienst.	Vorschau ist weder Zustellung noch Backend.

AI ChatBeispielablauf

Designregeln im Code finden

Finde Hintergrund- und Akzentfarben im HTML. Ersetze sie durch meine Markenfarben und behalte das Layout.

KI · Beispielantwort

Ich finde CSS-Variablen oder Style-Regeln, ändere die Werte und prüfe die Lesbarkeit von Texten und Buttons.

Zeige geänderte Dateien und Browser-Vorschau, statt nur Code in den Chat zu kopieren.

Nächste Schritte

Regel finden
Lass den Agent das passende CSS im HTML finden.
Wunsch anwenden
Gib genaue Farben, Größe oder Abstände an.
Seite ansehen
Prüfe das sichtbare Ergebnis vor Freigabe der Dateien.

Ziel: Du bestimmst die Designänderung, die KI bearbeitet den Code.

Beispielablauf. Keine Live-Verbindung zu einer KI.

03 / Regeln nachvollziehen

Wo stehen die Regeln im Code?

Visuelle Regeln stecken im CSS des HTML, Interaktionen im JavaScript. Beispielsweise erscheinen Papierhintergrund und Ziegelakzent von Forma Studio als Farbvariablen. Lass den Agent diese Regeln finden und ändern; du musst sie nicht selbst suchen.

Palette · Abschnitt 2 und :root

Warmes Papier und Ziegelrot entsprechen --paper:#f2f0e9 und --accent:#c53c22.

Struktur · Abschnitt 2

Die Anleitung trennt breite Container, Projektspalte und Leistungsraster. Der Code behält verschiedene Ausrichtungen.

Verhalten · Abschnitt 1

Anfrage und E-Mail-Vorschau sind lokale Demos, kein Versand.

AI ChatBeispielablauf

HTML + Designanleitung

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.

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.

04 / Nachbauen oder ändern

Soll die KI nachbauen oder anpassen?

Entscheide, womit du starten möchtest. Zum Nachbauen gib RECREATE.md und nötige Assets an. Für deine eigene Website gib vorhandenes HTML, Texte und Bilder und beauftrage ausdrücklich die Bearbeitung dieses Projekts mit Austausch der fiktiven Firma.

Referenz erhalten oder anpassen

Eigenes Arbeitsblatt mit fiktivem Lernbeispiel. Durch freigegebene Angaben ersetzen; lokal kopieren/herunterladen erteilt keine Rechte, Freigabe oder Dienste.

Markenanpassung planen

AI ChatBeispielablauf

Website-Projektordner

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.

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.

05 / Dateien und Umfang

Bekommst du nur Prompt-Text?

Nein. Forma Studios Paket enthält index.html, RECREATE.md und drei WebPs. Externe Bilder und Schriften brauchen Netzwerk.

Website-Dateien + Designanweisungen

Quellcode und Anleitung

Die geprüften Beispiele enthalten index.html und RECREATE.md. Begleitdateien variieren; manche Bilder oder Schriften bleiben extern.

Deine separate Einrichtung

Nutze ein eigenes Bearbeitungstool mit Dateizugriff. KI-Zugang, Domain, Hosting und betriebliche Dienste sind separat.

06 / Änderung ansehen

Was kann ein eigener Änderungsauftrag ändern?

Du kannst Firmenname, Texte, Farben, Bilder oder Sektionen ändern lassen. Das vorbereitete Clearstead-Beispiel ändert Name, Akzent, Überschrift und Einleitung derselben Quelle. Übrige Beispielinhalte und lokales Formularverhalten bleiben bestehen.

Quelldateien und technische Details ansehen

Genaue Änderung und erhaltener Umfang

14-clearstead / index.html · actual diff: LP43-bounded-edit.diff

Methode: direkte Quellbearbeitung. Skripte, Quellreihenfolge und Medienverweise erhalten. Kein externer KI-Lauf, keine Veröffentlichung oder Zustellung behauptet.

Clearstead → WorkshopDesk
--teal:#215e64 → --teal:#6d4382
Hero → Give your next workshop a clear plan.
#features introduction → fictional workshop planning; other sections unfinished.

Vorher · Original Clearstead

Vorbereitete Quellbearbeitung, kein Live-KI-Chat und keine fertige Unternehmenswebsite.

Ganze Vorschau öffnen ↗

Nachher · begrenzte WorkshopDesk-Änderung

Vorbereitete Quellbearbeitung, kein Live-KI-Chat und keine fertige Unternehmenswebsite.

Ganze Vorschau öffnen ↗

AI ChatBeispielablauf

HTML + Designanleitung

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.

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.

07 / Vorgaben wählen

Genügen Kurzprompt, Screenshot oder Stilkontext?

Ein kurzer Prompt beschreibt eine Änderung, enthält aber keine Website-Dateien. Ein Screenshot zeigt das Aussehen, nicht den funktionierenden Code. Zum Bearbeiten eines Templates gib HTML und Anleitung an und beschreibe Änderungen in einer kurzen Nachricht.

Stil, Anleitung und Code vergleichen

Formwell / Website-Dateien + Designanweisungen

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.

Formwell-ZIP herunterladen RECREATE.md herunterladen ↗