Ein vorhandenes Design für dein Unternehmen

Passe eine Vorlage an dein Unternehmen an. Mach aus einem fertigen Design eine Website mit deiner Marke, deinem Angebot und deinen Fotos.

Behalte eine nützliche Designstruktur und ersetze Beispielinhalte. Gib einem KI-Agenten mit Dateizugriff freigegebene Markenangaben, ändere jeweils einen Teil und prüfe die Seite aus Besuchersicht.

Mein Markenbriefing vorbereiten Eine Designänderung ansehen

Primefolio

Forma Studio

Orbit

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

01 / Behalten oder ersetzen

Was ist Design und was Beispielinhalt?

Layout, Hierarchie und Interaktionen geben eine Startstruktur. Namen, Arbeiten, Preise und Zitate gehören zur Beispielgeschichte und brauchen freigegebene Fakten.

Hilfreiches behalten

Behalte Sektionsmuster, die dein Angebot verständlich erklären.

Unbelegte Nachweise entfernen

Nutze fiktive Kundenbehauptungen nicht als eigene.

Quelldateien und technische Details ansehen

Die tatsächlichen Projektdateien

02-primefolio · Aktuell geprüftes ZIP

Aktueller Produktdownload geprüft am 2. Oktober 2026. Dateien und externe Ressourcen gehören zu diesem Projekt; andere Templates unterscheiden sich.

index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png

Was die Originalanleitung festlegt

02-primefolio/RECREATE.md · L5

Die Anleitung beschreibt die ursprüngliche fiktive Seite. Trenne ihre Aufgabe von den Änderungen für dein eigenes Unternehmen.

Build one complete `index.html` for **Forma North — Independent digital design**. Use semantic HTML, one inline stylesheet and one inline classic JavaScript block at the end of the body. No framework, build step, package manager, bundler, JavaScript library or application backend is required. Implement the page and every state described below, including all six project stories, all three editorial notes, thirteen capabilities, the full-width studio menu and the local downloadable project brief.

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.

02 / Deine Markenangaben

Was gehört in mein Anpassungsbriefing?

Gib Firmenname, Angebot, Kontakt-URL, Logo und Bilder an. Ergänze gewünschte Farben und Sektionen zum Behalten oder Entfernen. Damit kann der Agent die Beispielfirma ersetzen und das Design deiner Marke anpassen.

Inhalte konkret machenOrdne jedes freigegebene Bild und jeden Text einer Sektion zu.Prioritäten benennenSage, was Besucher zuerst verstehen und danach tun sollen.

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

Beibehalten / ändern / entfernen festhalten

Dein eigener Arbeitsplan

AI ChatBeispielablauf

Sektionen im Template umordnen

Verschiebe Leistungen vor das Portfolio, entferne Beispielpreise und behalte Kontakt am Ende.

KI · Beispielantwort

Ich ordne vorhandene HTML-Sektionen um und aktualisiere Menüanker. Danach prüfe ich Links und mobile Abstände.

Zeige zuerst die neue Reihenfolge. Behalte Projektbilder und Beschreibungen unverändert.

Nächste Schritte

Sektionen benennen
Sage dem Agent, was verschoben, entfernt oder ergänzt wird.
Seite aktualisieren
Bearbeite vorhandene Struktur und Navigationsanker.
Reihenfolge prüfen
Lies die ganze Seite auf Desktop und Handy.

Ziel: Dein Unternehmen im ausgewählten Design.

Beispielablauf. Keine Live-Verbindung zu einer KI.

03 / Inhaltshierarchie

Soll ich Reihenfolge und Farben ändern?

Ja. Lass Sektionen im bestehenden HTML verschieben, entfernen oder ergänzen. Zum Beispiel: Leistungen vor das Portfolio setzen, unnötige Preise entfernen und Kontaktbutton mit deiner echten Buchungsseite verbinden.

Inhalte umordnen

Lass Leistungen, Projekte oder Referenzen in passender Reihenfolge anordnen.

Button verlinken

Gib die tatsächliche Kontakt-, Buchungs- oder Zahlungs-URL an.

04 / Designänderungen

Wie ändere ich das Aussehen ohne Lesbarkeit zu verlieren?

Ändere Farben, Schrift und Bilder gezielt und prüfe echte Inhalte. Kontrolliere Kontrast, lange Überschriften, Bildausschnitte und verfügbare Schriften.

Beispiel für KI-BearbeitungFormwell

Nutze ausgehend von der vorbereiteten Alder-Version einen hellen Fliederton und dunkles Violett. Behalte Layout und Inhalte.

KI · Beispielantwort

Die vorbereitete Vorschau ändert Hintergrund- und Textfarben bei gleichem Layout. Vergleiche Farben und Inhalte und prüfe die Lesbarkeit mit eigenen Texten.

index.html · RECREATE.md

Formwell · vorbereitete HTML-Vorschau

Ganze Vorschau öffnen ↗

Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.

Quelldateien und technische Details ansehen

Eine kleine Änderung zum Prüfen

02-primefolio/index.html · L53

Diese Auszüge stammen aus dem geprüften englischen Original. Die folgenden Beispiele sind vorbereitete Quelltextänderungen, keine Live-KI-Sitzung. Unternehmen und Arbeiten bleiben fiktiv.

Vorher
<h1 id="hero-title" class="hero-heading"><span>Clear thinking.</span><span>Fresh <span class="muted" style="display:inline">digital form.</span></span></h1>

Erste vorbereitete Änderung
<h1 id="hero-title" class="hero-heading"><span>Clear ideas.</span><span>Considered <span class="muted" style="display:inline">digital design.</span></span></h1>

Vorbereitete Folgeänderung
<h1 id="hero-title" class="hero-heading"><span>Clear ideas.</span><span>Design <span class="muted" style="display:inline">with purpose.</span></span></h1>

Originalprojekt · Primefolio

Diese Auszüge stammen aus dem geprüften englischen Original. Die folgenden Beispiele sind vorbereitete Quelltextänderungen, keine Live-KI-Sitzung. Unternehmen und Arbeiten bleiben fiktiv.

Ganze Vorschau öffnen ↗

Vorbereitete Quelltextänderung

Diese vorbereitete Version ändert ausgewählte Texte oder Bilder im selben Projekt. Struktur und Beispielinhalte bleiben erhalten. Vergleiche die Dateien vor einer ähnlichen Änderung für dein Unternehmen.

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 / Im Kontext prüfen

Was prüfe ich nach der Designanpassung?

Vergleiche gespeicherte Änderungen mit dem Briefing und prüfe die ganze Seite. Ein schönes Bild reicht nicht für Links, Interaktionen und mobile Lesereihenfolge.

01
Echte Inhalte prüfen
Prüfe Namen, Aussagen, Bildrechte und Aktionsziel.
02
Geändertes Design prüfen
Teste Desktop und Mobil, Tastaturbedienung, Ausschnitte und Ressourcenladen.
03
Geprüfte Version behalten
Sichere Quellen und korrigiere beobachtete Probleme vor Veröffentlichung.

06 / Struktur wählen

Welches Startdesign erleichtert die Planung?

Wähle ein Layout mit benötigten Sektionen. Studioportfolio, Beratung, Kurspräsentation und Produktgeschichte brauchen unterschiedliche Inhalte.

Primefolio

Ein redaktionelles Digitaldesign-Portfolio; Quelle und Anleitung bilden dieses Markenbeispiel im selben Projekt.

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/current-product.png
assets/hero-form.png
assets/serein-brand.png

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

Forma Studio

Zeige Studioarbeiten, Leistungen und Ansatz mit freigegebenen Inhalten. Anfrage- und Newsletter-Demos brauchen echte Ziele.

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.

Orbit

Erkläre Beratungsleistungen und Vorgehen. Die Präsentation liefert keine Beratungsautomatisierung.

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.

Veyra

Präsentiere ein Sprachprodukt mit Beispielen und Workflows. Eine Voice-to-Text-Anwendung ist nicht enthalten.

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.

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.

07 / Nach der Anpassung

Was bleibt nach der Anpassung separat?

Verbinde benötigte Kontakt- oder Buchungsdienste und lass den KI-Agent den fertigen Ordner veröffentlichen. Dafür braucht er dein autorisiertes Hostingkonto und die Upload-Freigabe. Prüfe die echte Adresse vor dem Verbinden oder Wechseln deiner Domain.

KI-Website-Briefing vorbereiten Freigegebene Version veröffentlichen Lizenz und Kundenübergabe prüfen

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 ↗