Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
01 / Design wählen
Welche Richtung passt zu deiner Botschaft?
Forma Studio bietet Projekten Raum. Clearstead nutzt Interface-Illustrationen, Velora dunkle Tool-Präsentation, Formwell helles Studiodesign. Wähle nach Inhalt, nicht Conversion-Versprechen.
Forma Studio
Redaktionelles Portfolio für Marken- und Digitaldesign mit Arbeiten und Vorgehen.
Produktquelle. Geprüft: --teal:#215e64 und Hero/Medienkomposition. Finanzinterface ist illustrativ.Ganze Vorschau öffnen ↗
Velora
Quelle für Entwicklerprodukt-Marketing. Geprüft: Hintergrund #070d1b, Akzent #75ebcf. Keine Konto-/Integrationslogik.Ganze Vorschau öffnen ↗
AI ChatBeispielablauf
Seitenhierarchie anpassen
Du
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.
Du
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 / Schrift und Hierarchie
Was soll groß wirken und was zurücktreten?
Hebe die Hauptaussage deutlich von Beschreibungen und Labels ab. In Forma Studio führen große Überschriften ein, kleinere Projektlabels benennen Arbeiten. Lass die KI diese Hierarchie auf deine Texte übertragen und lange Überschriften am Handy prüfen.
Kurzer Originaltitel
Tatsächliche reine Titeländerung; Layout und .word erhalten. Textlängenbeispiel, keine Sprach- oder Responsivitätsgarantie.Ganze Vorschau öffnen ↗
Langer deutscher Testtitel
Tatsächliche reine Titeländerung; Layout und .word erhalten. Textlängenbeispiel, keine Sprach- oder Responsivitätsgarantie.Ganze Vorschau öffnen ↗
03 / Änderung ansehen
Wie verändert Abstand den Lesefluss?
Das Formwell-Beispiel ändert Abstand und Titelbreite. Vergleiche Umbruch und Rhythmus. Weite betont weniger Elemente; dichtere Interfaces gruppieren mehr Details.
›_ 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.
AI ChatBeispielablauf
Eigene Markenmaterialien verwenden
Du
Ersetze Beispielfotos durch meine Dateien in materials. Nutze mein Logo und die mitgelieferten lizenzierten Schriften.
KI · Beispielantwort
Ich aktualisiere Dateiverweise und Bildbeschreibungen und prüfe Desktop und Handy. Ordne Bilder den Projekten zu, wenn Dateinamen unklar sind.
Du
Nutze diese drei Fotos für die Portfolio-Karten und entferne ungenutzte Beispiel-Kundenlogos.
Nächste Schritte
Erlaubte Materialien liefern
Gib eigene oder für die Website lizenzierte Assets an.
Bilder zuordnen
Sage dem Agent, welches Bild zu welcher Sektion gehört.
Ausschnitte und Laden prüfen
Prüfe die tatsächlichen Bilder auf Handy und Desktop.
Ziel: Die Website nutzt deine freigegebenen Bilder und Identität.
Beispielablauf. Keine Live-Verbindung zu einer KI.
04 / Farbe und Medien
Welche Entscheidungen brauchen erlaubte Medien?
Nutze eigene Bilder oder Materialien mit passender Veröffentlichungslizenz. Ein Referenz-Screenshot gibt keine Rechte an Fotos, Logo oder Schriften. Sage dem Agent, welche Dateien genutzt und welche ungeeigneten Beispiel-Assets ersetzt werden sollen.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
AI ChatBeispielablauf
Design in eigenen Worten ändern
Du
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.
Du
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.
05 / Richtung beschreiben
Wie wird eine Vorliebe zu klaren Vorgaben?
Beschreibe die sichtbare Änderung: wärmere Farben, größere Projektbilder oder kürzere Einleitung. Nenne das Template und liefere Inhalte. Zum Beispiel: Formwell-Layout behalten, meine Portfolio-Bilder nutzen und Leistungen mit diesen Texten kürzen.
01
Beispielbriefing
Behalte Formwells ruhigen Einstieg und Projektfokus. Nutze freigegebene Arbeiten, warme Palette und kurze Leistungen. Entferne fiktive Kunden.
Meine quellenbezogene Designrichtung
Eigenes Arbeitsblatt mit fiktivem Lernbeispiel. Durch freigegebene Angaben ersetzen; lokal kopieren/herunterladen erteilt keine Rechte, Freigabe oder Dienste.
AI ChatBeispielablauf
Website-Projektordner
Du
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.
06 / Dateien und Umfang
Kannst du mehr als den Screenshot prüfen?
Ja. Ein Template liefert editierbares HTML und Anleitung: Du kannst die Seite öffnen, Bedienelemente testen und Änderungen beauftragen. Ein Screenshot zeigt diese Abläufe nicht und liefert keine Bearbeitungsdateien. Online-Dienste müssen separat eingerichtet werden.
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.
07 / Nächsten Schritt wählen
Projekt prüfen oder andere Vorgaben wählen?
Wähle passende Struktur. Für Stilaufgaben vergleiche Materialrollen. Kläre nötige häufige CMS-Redaktion vor dem Dateikauf.
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
