OneDollarStock · Dein Website-Projekt

DESIGN.md, RECREATE.md oder HTML? Arbeite mit KI an deinem gewählten Website-Design, statt dessen Aussehen von Grund auf zu erklären.

Website ändern, Referenz nachbauen und Stil setzen brauchen verschiedene Vorgaben. Prüfe die Rolle jeder Datei vor der nächsten Anfrage.

Dateien für meine Aufgabe wählen Prompt und Website ansehen

Formwell

Veyra

Offset

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 / Drei Rollen

Was trägt jede Datei bei?

DESIGN.md kann Stilregeln beschreiben; RECREATE.md erklärt den Nachbau eines Designs; HTML ist die tatsächliche Website zum Öffnen und Bearbeiten. Die geprüften OneDollarStock-Projekte enthalten HTML und RECREATE.md, keinen zusätzlichen DESIGN.md. Zur Anpassung beginne mit Website-Dateien und deinem Brief.

Stilkontext

Schrift, Farbe, Abstände und Komponentenregeln; keine ganze Seite.

Rekonstruktionsanleitung

Struktur, Inhalte und Verhalten einer bestimmten Referenz.

Bestehendes HTML

Ein Frontend zum Ausführen und Ändern; Dienste separat prüfen.

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.

02 / Dateizugriff

Befolgt dein Tool eine Datei allein wegen ihres Namens?

Nein. Stelle die Datei dem KI-Tool bereit und nenne sie in deiner Anweisung. Lass den Agent sie lesen und ihre Rolle erklären. Der Dateiname allein sorgt nicht dafür, dass jede KI-Oberfläche sie lädt oder befolgt.

01
Echte Vorgaben bereitstellen
Nutze unterstützten Datei- oder Workspace-Weg und nenne Dateien.
02
Prüfung anfordern
Rolle, aktuellen Code und offene Anforderungen vor Änderung prüfen lassen.

AI ChatBeispielablauf

Bearbeitete Seite prüfen

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.

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.

03 / Änderung ansehen

Welche Anforderungen beantwortet der Quellcode?

Vergleiche Brief und tatsächliche Seite: Texte, Farben, Struktur und Buttonverhalten. Das Beispiel ordnet sechs Anforderungen ihrer Clearstead-Umsetzung zu. Lass den Agent denselben Vergleich für deine beauftragten Änderungen durchführen.

Anforderung	Eigene Stilnotiz	RECREATE.md	index.html
Visuelle Hierarchie	Vorgeschlagene Rollen, keine exakte Seite	Für fiktive Referenz beschrieben	Aktuell umgesetzte Quelle
Farben	Vorgeschlagene Rollen, keine exakte Seite	Für fiktive Referenz beschrieben	Aktuell umgesetzte Quelle
Abschnittsfolge	Nicht enthalten	Für fiktive Referenz beschrieben	Aktuell umgesetzte Quelle
Eigene Fakten	Nicht enthalten	Separate eigene/Dienst-Angabe	Liefern/einrichten; nur lokale Demo
Echte Anfragezustellung	Nicht enthalten	Separate eigene/Dienst-Angabe	Liefern/einrichten; nur lokale Demo
Spätere Bearbeitung/Veröffentlichung	Nicht enthalten	Separate eigene/Dienst-Angabe	Liefern/einrichten; nur lokale Demo

14-clearstead · Originalreferenz

Englische Originalquelle. Vergleich prüft Inhalte, nicht KI-Qualität oder ein mitgeliefertes DESIGN.md.

Ganze Vorschau öffnen ↗

Ein Brief, drei verschiedene Dateiaufgaben

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

Derselbe fiktive Brief und sechs Anforderungen

Beispielhafte Stilnotiz—kein mitgeliefertes DESIGN.md

Tatsächlicher RECREATE-Umfang

Tatsächlicher HTML-Umfang

Dateiregister und Konfliktlösung

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 / Nach Aufgabe wählen

Welche Vorgaben passen zu deiner Aufgabe?

Zum Ändern einer Website gib HTML und Änderungswünsche an. Zum Nachbauen gib RECREATE.md und nötige Ressourcen an. Für neue Styles gib aktuellen Code und Stilregeln. Der Agent kann erklären, welche Materialien dein Auftrag benötigt.

Stil ändern

Projekt + geprüfte Stilregeln + begrenzte Änderungen.

Referenz nachbauen

Anleitung + Referenz; tatsächliches Ergebnis vergleichen.

Vorbereitete Seite anpassen

HTML + Anleitung + Fakten + klare Behalten/Ändern-Vorgaben.

AI ChatBeispielablauf

Vorhandene Website anpassen

Ändere Firmenname, Überschrift und Leistungsbeschreibungen mit meinen Texten. Behalte das Layout und ersetze nur die angegebenen Bilder.

KI · Beispielantwort

Ich bearbeite das bestehende HTML, behalte die übrigen Sektionen und zeige die geänderten Dateien.

Verlinke den Hauptbutton auf meine Buchungsseite mit der angegebenen URL.

KI · Beispielantwort

Ich aktualisiere den Buttonlink und prüfe ihn zusammen mit der geänderten Überschrift im Browser.

Nächste Schritte

Eigene Inhalte liefern
Gib genaue Texte, Bilddateinamen und Linkziele an.
Template bearbeiten
Lass bestehende Dateien bearbeiten und gewünschte Teile erhalten.
Vorschau prüfen
Lies die neuen Texte und teste echte Links auf Handy und Desktop.

Ziel: Dein Unternehmen im ausgewählten Design.

Beispielablauf. Keine Live-Verbindung zu einer KI.

05 / Widersprüche lösen

Was, wenn die Referenz exakte Texte verlangt?

Sage der KI ausdrücklich, dass deine Firmentexte Vorrang vor Beispieltexten haben. Liste auszutauschende Inhalte und zu erhaltendes Design auf. So wird ein Nachbau der fiktiven Firma nicht mit deiner personalisierten Website verwechselt.

Vorrang festlegenNenne Inhalte, die die fiktive Referenz ersetzen.Ergebnis prüfenGeänderte Dateien prüfen; Fertigmeldung ist kein Test.

Lokal auf diesem Gerät markiert; nichts wird übermittelt.

AI ChatBeispielablauf

Cloudflare Pages · vom Ordner ins Web

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.

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.

06 / Dateien und Umfang

Was braucht Menschen oder Dienste?

Du lieferst Unternehmensfakten, veröffentlichbare Materialien und Konten für Kontakt oder Hosting. Die KI kann Dateien bearbeiten und unterstützte Dienste anbinden; du gibst Zugriff frei und prüfst die Seite sowie eingehende Anfragen.

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.

Echte Formulare und App-Dienste planen

07 / Design wählen

Brauchst du ein Frontend zum Anpassen?

Prüfe echte Seite und Anleitung. Für reine App-Stilarbeit nutze Kontext statt unnötiger Vorlage.

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.

Veyra

Sprachprodukt-Marketing mit Schritten und Beispielen; ohne Sprachverarbeitung.

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

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.

Orbit

Expertise, Arbeiten, Vorgehen und Leistungen für Studio oder Beratung.

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/bridge.webp
assets/connect.webp
assets/folio.webp
assets/lens.webp
assets/loop.webp
assets/relay.webp

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.

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 ↗