OneDollarStock · Dein Website-Projekt

Sieht deine KI-Website austauschbar aus? Wähle eine sorgfältig gestaltete Vorlage und erstelle eine Website, die du deinen Kunden zeigen möchtest.

Benenne das Layoutproblem und fordere eine konkrete Änderung an. Prüfe, wann der Entwurf bleibt und wann ein vorbereitetes Design besser zur Aufgabe passt.

Layoutproblem bestimmen Klare Änderung vorbereiten

Formwell

Offset

Forma Studio

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

Seitenhierarchie anpassen

Die Hauptaussage geht unter. Hebe die Hero-Überschrift stärker hervor als Labels, nutze meine kürzere Einleitung und prüfe mobile Umbrüche.

KI · Beispielantwort

Ich passe Überschriftgrößen und Textspalte an, erhalte Texte und Links und vergleiche dieselben Seitenbreiten.

Zeige vorher und nachher. Behalte die Änderung, wenn die Aussage auf meinem Handy klarer ist.

Nächste Schritte

Sichtbares Problem benennen
Zeige Überschrift, Textspalte oder Abstand mit Änderungsbedarf.
Konkrete Änderung beauftragen
Nenne gewünschte Hierarchie und zu erhaltende Elemente.
Ansichten vergleichen
Vergleiche vorher und nachher bei gleichen Bildschirmgrößen.

Ziel: Deine Hauptaussage ist leichter zu finden und zu lesen.

Beispielablauf. Keine Live-Verbindung zu einer KI.

01 / Problem benennen

Was stört konkret am Entwurf?

Suche ein konkret sichtbares Problem: Hauptüberschrift kleiner als Nebenüberschrift, Text in zu schmaler Spalte oder gedrängte Sektionen. Der Vergleich zeigt solche Fehler. Sage dem Agent, welchen er zuerst beheben soll.

Konkurrierende Betonung

Sind Haupttitel und nächste Aktion von Nebenelementen unterscheidbar?

Uneinheitlicher Rhythmus

Gruppieren Abstände Inhalte oder wirkt jeder Abschnitt losgelöst?

Inhalt passt nicht

Prüfe lange Titel und schmale Bildschirme auf abgeschnittenen oder engen Text.

Beobachtetes Problem	Betroffene Quelle	Sichtbare Folge	Erste Korrektur / offen
1. Konkurrierende Überschriften	.hero h1:24px; h2:52px / mobile 46px	Der Abschnittstitel ist bei 1440px und 390px größer als die Seitenüberschrift.	Nur diese Hierarchie wird korrigiert.
2. Uneinheitlicher Abschnittsabstand	section padding:12px; .space padding-block:88px	Die große Lücke trennt benachbarte Erklärungen. Der Quellunterschied ist messbar; seine Eignung ist eine Gestaltungsentscheidung.	Für die begrenzte Änderung erhalten.
3. Dichte schmale Beschreibung	.density p max-width:140px; font-size:14px	Der unveränderte Absatz bricht trotz breiter Seite in viele kurze Zeilen um.	Nach der Überschriftenänderung noch vorhanden.

Absichtlich fehlerhafter fiktiver Workshop

Neu gestaltete Lernseite, keine typische KI-Ausgabe. Drei Probleme mit Quellstellen stehen unten.

Ganze Vorschau öffnen ↗

AI ChatBeispielablauf

Seitenhierarchie anpassen

Die Hauptaussage geht unter. Hebe die Hero-Überschrift stärker hervor als Labels, nutze meine kürzere Einleitung und prüfe mobile Umbrüche.

KI · Beispielantwort

Ich passe Überschriftgrößen und Textspalte an, erhalte Texte und Links und vergleiche dieselben Seitenbreiten.

Zeige vorher und nachher. Behalte die Änderung, wenn die Aussage auf meinem Handy klarer ist.

Nächste Schritte

Sichtbares Problem benennen
Zeige Überschrift, Textspalte oder Abstand mit Änderungsbedarf.
Konkrete Änderung beauftragen
Nenne gewünschte Hierarchie und zu erhaltende Elemente.
Ansichten vergleichen
Vergleiche vorher und nachher bei gleichen Bildschirmgrößen.

Ziel: Deine Hauptaussage ist leichter zu finden und zu lesen.

Beispielablauf. Keine Live-Verbindung zu einer KI.

02 / Reihenfolge wählen

Welches Problem kommt zuerst?

Behebe Lesebarrieren und unbrauchbare Bedienelemente vor Dekoration. Prüfe Hierarchie, Schrift, Ausrichtung, Dichte, Kontrast und Medien; Vorlieben beweisen keine Conversion oder Barrierefreiheit.

Botschaft und Handlungshierarchie

Vergleiche h1, Abschnittstitel und den nächsten Schritt; das fehlerhafte Beispiel macht h2 größer als h1.

Lesbarkeit der Schrift

Lies den ganzen Text im tatsächlichen Viewport; eine winzige Vorschau reicht nicht zur Prüfung.

Abstände und Ausrichtung

Das Beispiel wechselt von 12px auf 88px Abschnittsabstand; prüfe, ob die Lücke dem Inhalt dient.

Inhaltsdichte

Die Erklärung bleibt in einer 140px-Spalte. Prüfe Umbrüche und ob diese Lesebreite zum Text passt.

Farbrollen und Kontrast

Unterscheide Text, Hintergrund und Handlung. Miss Kontrast separat; diese visuelle Hilfe bescheinigt keine Konformität.

Relevanz der Medien

Die Lernseite nutzt keine Medien. Prüfe bei eigenen Bildern erlaubte Nutzung, Ausschnitt und Bezug zum echten Angebot.

AI ChatBeispielablauf

Seitenhierarchie anpassen

Die Hauptaussage geht unter. Hebe die Hero-Überschrift stärker hervor als Labels, nutze meine kürzere Einleitung und prüfe mobile Umbrüche.

KI · Beispielantwort

Ich passe Überschriftgrößen und Textspalte an, erhalte Texte und Links und vergleiche dieselben Seitenbreiten.

Zeige vorher und nachher. Behalte die Änderung, wenn die Aussage auf meinem Handy klarer ist.

Nächste Schritte

Sichtbares Problem benennen
Zeige Überschrift, Textspalte oder Abstand mit Änderungsbedarf.
Konkrete Änderung beauftragen
Nenne gewünschte Hierarchie und zu erhaltende Elemente.
Ansichten vergleichen
Vergleiche vorher und nachher bei gleichen Bildschirmgrößen.

Ziel: Deine Hauptaussage ist leichter zu finden und zu lesen.

Beispielablauf. Keine Live-Verbindung zu einer KI.

03 / Eine Änderung anfragen

Was schreibst du statt „soll besser aussehen“?

Nenne das Element, beschreibe den Fehler und die gewünschte Änderung. Zum Beispiel: Hero-Überschrift stärker als Nebenüberschrift hervorheben, Texte und Links behalten und bei derselben Handybreite prüfen. So kannst du die Änderung beurteilen.

01
Beispielauftrag
Nimm den Nebentitel zurück, damit die Hauptaktion erkennbar bleibt. Behalte Texte und Links; vergleiche danach dieselbe Mobilbreite.

Eine begrenzte Änderung beschreiben

Felder ausfüllen, Aufgabe kopieren und die tatsächlich geänderte Seite vergleichen. Nichts wird an ein KI-Tool gesendet.

04 / Änderung ansehen

Ist die Änderung da und was änderte sich noch?

Die tatsächliche Bearbeitung ändert zwei Überschriftenregeln. Inhalt, Links, Farben und Abschnittsabstände bleiben gleich. Vergleiche beide Seiten; Abstand und schmale Spalte sind weiter sichtbar.

Quelldateien und technische Details ansehen

Tatsächlich geänderte Regeln

lp46-de-repair.diff

Die anderen zwei Probleme bleiben unverändert; dies ist kein fertiges Redesign.

.hero h1{font-size:clamp(42px,5vw,64px);line-height:1.06}
.content h2{font-size:28px;line-height:1.2}

Vorher · gestaltete Fehler

Direkte CSS-Bearbeitung durch das Autorenteam, dokumentiert am 2. Oktober 2026. Kein externer KI-Lauf, Verkaufsergebnis oder Launch-Versprechen.

Ganze Vorschau öffnen ↗

Nachher · nur Überschriftenhierarchie

Direkte CSS-Bearbeitung durch das Autorenteam, dokumentiert am 2. Oktober 2026. Kein externer KI-Lauf, Verkaufsergebnis oder Launch-Versprechen.

Ganze Vorschau öffnen ↗

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.

05 / Website erneut prüfen

Was bleibt trotz schönerem Design offen?

Prüfe Navigation, Fokus, Kontaktziel, Fakten, Überlauf und Ressourcen erneut. Gestaltung belegt keinen Formularanschluss, Veröffentlichung, Rankings oder Conversion-Zuwachs.

Inhalte und NavigationFakten, Links, Bilder, Fokus und Mobilüberlauf prüfen.Betriebliche AktionZiel oder Eingang statt lokaler Erfolgsmeldung prüfen.

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

Funktionale Ziele planen

AI ChatBeispielablauf

Design in eigenen Worten ändern

Nutze meine Markenfarben und mein Logo. Verbessere die mobile Lesbarkeit der Hauptüberschrift und verwende meine Projektbilder. Behalte Sektionen und Links.

KI · Beispielantwort

Ich ändere Styles und Bilder im vorhandenen HTML und prüfe Zeilenumbrüche sowie Bildausschnitte auf Handy- und Desktopbreite.

Das Logo wirkt zu klein. Vergrößere es, ohne das Menü einzuengen.

KI · Beispielantwort

Ich passe die Größe an und prüfe die Menüabstände erneut. Die Vorschau zeigt, ob es deinen Vorstellungen entspricht.

Nächste Schritte

Änderung benennen
Beschreibe gewünschte Farbe, Element, Bild oder Layout.
Eigene Assets liefern
Gib Logo, Farben und Bilder an; die KI bearbeitet Template-Dateien.
Ergebnis prüfen
Prüfe die echte Seite und bitte um konkrete Anpassungen.

Ziel: Ein Design für deine Marke, ohne CSS selbst zu bearbeiten.

Beispielablauf. Keine Live-Verbindung zu einer KI.

06 / Reparieren oder neu starten

Genügt eine Änderung oder passt die Komposition nicht?

Bei einer fehlerhaften Überschrift oder Abstandsregel beauftrage diese Änderung an der vorhandenen Seite. Passt das ganze Layout nicht zu deinen Inhalten, beginne mit einem geeigneten Template und ersetze dessen Beispiele, statt jede Sektion einzeln zu reparieren.

07 / Design wählen

Wenn die Struktur nicht passt, prüfe ein echtes Design.

Wähle nach deinen Inhalten. Diese Layouts sind Referenzen, keine Garantie für bessere Geschäftsergebnisse.

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.

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.

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.

Velora

Dunkle Entwickler-Workspace-Präsentation; Anbindungen und Konten sind nicht verbunden.

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.

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 ↗