Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
Sektionen zu einer Seite verbinden
Du
Verbinde diese Sektionen im bestehenden Projekt. Prüfe vorher CSS-Konflikte, doppelte IDs, Bildpfade und JavaScript.
KI · Beispielantwort
Ich prüfe Formate und Abhängigkeiten und schlage gemeinsame Styles und eindeutige IDs vor. Ähnliches Aussehen kann dennoch Codeänderungen erfordern.
Du
Nutze diese Reihenfolge und erhalte die Navigation. Zeige die kombinierte Seite auf Handy- und Desktopbreite.
Nächste Schritte
Kompatibilität prüfen
Vergleiche Formate, CSS, Skripte und Dateiverweise.
Sektionen integrieren
Vereinheitliche Styles und IDs in der gewählten Seite.
Ganze Seite testen
Prüfe Navigation, Buttons, Bilder und Mobilverhalten gemeinsam.
Ziel: Verbundene Sektionen funktionieren als eine zusammenhängende Website.
Beispielablauf. Keine Live-Verbindung zu einer KI.
01 / Zwei Ausgangspunkte
Passt du ein Projekt an oder kombinierst du Teile?
Ein komplettes Template liefert eine Website mit verbundenen Sektionen und gemeinsamen Styles. Eine Sektionsbibliothek bietet einzelne Teile, deren Styles, Links und Skripte zusammengeführt werden müssen. Für die erste Website passt ein ganzes Design, wenn es die benötigten Sektionen enthält.
02 / Aufgaben
Was bekommst du und was musst du abstimmen?
Beim kompletten Template ersetzt du Beispiele und passt das Design an. Bei einzelnen Sektionen bestimmst du zusätzlich Reihenfolge und Zusammenarbeit des Codes. Die Tabelle vergleicht diese Arbeit für die Auswahl passend zu deinem Projekt.
Deine Entscheidung
Was du prüfen solltest
OneDollarStock
Inhaltsreihenfolge
Ganzes Projekt: vorhandene Reihenfolge anpassen
Abschnitte: Seitenreihenfolge festlegen
Gemeinsame Stile
Bestehende Projektregeln prüfen
Schrift, Abstände und Farben abstimmen
Verhalten und Dienste
Interaktionen und fehlende Ziele prüfen
IDs, Skripte und Schnittstellen abstimmen
AI ChatBeispielablauf
Sektionen zu einer Seite verbinden
Du
Verbinde diese Sektionen im bestehenden Projekt. Prüfe vorher CSS-Konflikte, doppelte IDs, Bildpfade und JavaScript.
KI · Beispielantwort
Ich prüfe Formate und Abhängigkeiten und schlage gemeinsame Styles und eindeutige IDs vor. Ähnliches Aussehen kann dennoch Codeänderungen erfordern.
Du
Nutze diese Reihenfolge und erhalte die Navigation. Zeige die kombinierte Seite auf Handy- und Desktopbreite.
Nächste Schritte
Kompatibilität prüfen
Vergleiche Formate, CSS, Skripte und Dateiverweise.
Sektionen integrieren
Vereinheitliche Styles und IDs in der gewählten Seite.
Ganze Seite testen
Prüfe Navigation, Buttons, Bilder und Mobilverhalten gemeinsam.
Ziel: Verbundene Sektionen funktionieren als eine zusammenhängende Website.
Beispielablauf. Keine Live-Verbindung zu einer KI.
03 / Quellcode-Kompatibilität
Was kann beim Zusammenfügen kollidieren?
Zwei Sektionen können dieselbe CSS-Klasse unterschiedlich nutzen, IDs wiederholen oder andere Skripte und Dateipfade erwarten. Lass Konflikte vor dem Zusammenführen prüfen und teste danach Menü, Buttons und mobiles Layout.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
Schnittstelle
Quelle
Tatsächliche direkte Korrektur
Grenze
Zwei Module nutzen dieselbe ID
features id="learn"; contact id="learn"
Eindeutige IDs features/contact vergeben und jeden Link zum vorgesehenen Abschnitt gesetzt.
Quellkorrektur, kein Kontaktdienst.
Gemeinsame globale Button-Regel
.button purple; later .button green
Farben auf .lab-hero und .lab-features begrenzt statt auf zufällige Reihenfolge zu vertrauen.
Ein absichtlicher Lernkonflikt, keine Qualitätsrangliste.
Vorher · globale Regel und doppelte IDs
Neue englische Lernbausteine. Die absichtlichen Konflikte beschreiben keine Anbieterbibliothek; kein Betriebsdienst enthalten.Ganze Vorschau öffnen ↗
Nachher · begrenzte Regeln und klare Ziele
Neue englische Lernbausteine. Die absichtlichen Konflikte beschreiben keine Anbieterbibliothek; kein Betriebsdienst enthalten.Ganze Vorschau öffnen ↗
Mein Register der Abschnittsschnittstellen
Eigenes Arbeitsblatt mit fiktivem Lernbeispiel. Durch freigegebene Angaben ersetzen; lokal kopieren/herunterladen erteilt keine Rechte, Freigabe oder Dienste.
04 / Ressourcenformate
Liefern GetLayers, Refero Styles und BYQ dasselbe?
Nein. Die offiziellen Beschreibungen nennen verschiedene Materialien: GetLayers bietet je nach Kategorie Nachbau-Prompts und Code; Refero Styles beschreibt visuelle Regeln; BYQ bietet Templates, Sektionen, Wireframes und Styles. Vergleiche Produktformat und Tarif, nicht nur ähnliche Vorschaubilder.
GetLayers
Rekonstruktionsprompts plus kategoriespezifischer Code; Docs nennen Next.js-Vorlagen und Abschnitte für passende Pläne. Plan und Artikel prüfen.
Refero Styles
Stilaufzeichnungen zu Schrift, Palette, Abständen und Komponenten. Stilkontext ist keine komplette bearbeitbare Seite.
BYQ
Ganze Vorlagen, Abschnitte, Grundstrukturen und Stilressourcen. Quellformat separat von nativen Webflow-CMS- oder Shop-Funktionen prüfen.
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.
05 / Dateien und Umfang
Was enthält ein ganzes OneDollarStock-Projekt?
Du erhältst Website-HTML und RECREATE.md; zusätzliche Assets variieren je Produkt. Öffne die Seite als Startdesign und lass sie personalisieren. Es ist ein Website-Projekt, kein Kontensystem, CMS oder in Beispieltexten beschriebenes Finanzprogramm.
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
Kannst du eine Seite anpassen statt jeden Abschnitt zu verbinden?
Ja. Beginne mit dem ganzen Template und lass Texte, Bilder oder Styles anpassen. Das vorbereitete Formwell-Beispiel ändert Abstände innerhalb eines kompletten Projekts. Du kannst unnötige Sektionen entfernen lassen; echte Dienste werden separat eingerichtet.
›_ Beispiel für KI-BearbeitungFormwell
Du
Gib Formwells Abschnitten mehr Abstand und begrenze die Einstiegsüberschrift. Behalte Texte und Links.
KI · Beispielantwort
Das vorbereitete Layout-Beispiel zeigt Abstandsanpassungen. Prüfe das Ergebnis in den benötigten Bildschirmgrößen.
Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.
07 / Design wählen
Welches ganze Projekt passt zu deinen Inhalten?
Wähle ein Projekt mit passenden Sektionen für Angebot und Materialien. Orbit passt zu Expertise, Primefolio zu Arbeiten, Clearstead und Veyra zu Produktkonzepten. Wenn keines die Kombination bietet, plane mit dem Agent ein eigenes Layout oder einzelne Sektionen.
Clearstead
Planungsprodukt mit Schritten und Szenarien; Datenspeicherung ist nicht enthalten.
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.
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
