Ein Website-Projekt mit klarem Dateikontext

Website-Vorlagen für Gemini CLI. Mach aus einem fertigen Design deine Unternehmenswebsite, indem du Gemini Anweisungen gibst.

Gib Gemini CLI eine vorhandene Website und einen begrenzten Änderungsauftrag. Prüfe lesbare Dateien, Kontoeinrichtung und die tatsächlich benötigte Seitenstruktur.

Mein Gemini-CLI-Startdesign wählen Dateieingabe prüfen

Veyra

Velora

Clearstead

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

Gemini CLI · 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.

01 / Benannte Dateien

Welche Dateien liefert das Projekt?

Gib Gemini CLI das entpackte Projekt. Dieses geprüfte Veyra-Paket enthält index.html und RECREATE.md. Lass Gemini externe Bilder und Schriften ermitteln, bevor du bearbeitest oder veröffentlichst.

Website-Dateien + Designanweisungen

@index.html

Gemini CLI dokumentiert explizite Dateiverweise für Kontext. Verweise auf die gelieferte Seite.

@RECREATE.md

Benenne den Originalleitfaden getrennt vom freigegebenen Unternehmensbriefing.

Quelldateien und technische Details ansehen

Die tatsächlichen Projektdateien

12-veyra · 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

Was die Originalanleitung festlegt

12-veyra/RECREATE.md · L5

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

Build an exact English-language, responsive, single-page fictional voice-to-draft product demonstration as one `index.html`, with inline CSS, inline JavaScript and inline SVG. Use native HTML and browser APIs, no framework, build step, external fonts, requests, media files or libraries. Runtime is offline: the page must render and its local controls must work with the network disconnected. Target current Chromium, Safari and Firefox with native `dialog`, CSS Grid, custom properties, `matchMedia` and CSS masking. Support a local HTTP server and opening the file directly; clipboard permissions can differ and must take the specified manual-copy fallback. There is no transcription, generated AI output, account, purchase, download, real product, server submission or persistence. Keep every visible disclosure and prepared sample exactly as specified. Do not add photography, a loader, pricing, testimonials or external links.

Gemini CLI file context ↗ Gemini CLI authentication ↗

AI ChatBeispielablauf

Gemini CLI · 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.

02 / Zwei Verwendungen

Was soll Gemini mit jeder Datei tun?

Bearbeite index.html für gezielte Änderungen der gelieferten Seite. Nutze RECREATE.md als Referenz oder bewusstes Nachbauziel. Liefere Unternehmensinhalte separat.

Direkte Bearbeitung

Prüfe geänderte Quellen und Browser nach jeder gezielten Anfrage.

Nachbau

Vergleiche die neue Umsetzung mit Originaldesign und Verhalten.

03 / Konto und Zugriff

Was muss ich für Gemini CLI organisieren?

Installiere Gemini CLI und folge der Google-Anmeldung; für die meisten Privatnutzer wird das persönliche Google-Konto empfohlen. API-Key und Vertex AI haben andere Voraussetzungen. Das Template liefert Website-Dateien, KI-Zugang und Abrechnung gehören zu deinem Konto.

Ist das normaler Gemini-Chat?

Diese Seite beschreibt Gemini CLI mit lokalen Projektdateien. Andere Gemini-Oberflächen brauchen einen eigenen geprüften Dateiworkflow.

Ist unbegrenzte KI-Nutzung enthalten?

Nein. Die Vorlage enthält weder Google-KI-Zugang noch unbegrenztes Nutzungskontingent.

Gemini-Dateianfrage vorbereiten

Dein eigener Arbeitsplan

Gemini CLI · Authentication ↗

04 / Gezielte Bearbeitung

Was sollte die erste Änderung verlangen?

Lass Gemini das bestehende HTML mit deinen Texten bearbeiten. Zum Beispiel: Produktname ändern, diese Überschrift nutzen und Hauptbutton zum echten Demo verlinken. Nenne index.html und RECREATE.md als Projektgrundlage.

Beispiel für KI-BearbeitungFormwell

Passe Formwell für das fiktive Markenstudio Alder an. Ändere Name, Hero-Überschrift und Einleitung. Behalte Layout und Beispiel-Projektbilder.

KI · Beispielantwort

Die vorbereitete Vorschau ersetzt Firmenname, Hero-Überschrift und Einleitung. Vergleiche Inhalte und Original; übrige Projektbilder bleiben Beispielinhalte.

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

12-veyra/index.html · L17

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>Thoughts into<br>a first draft.</h1>

Erste vorbereitete Änderung
<h1>Notes into<br>a reviewed draft.</h1>

Vorbereitete Folgeänderung
<h1>Your notes.<br>Your next draft.</h1>

Originalprojekt · Veyra

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

Gemini CLI · 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 / Ergebnis prüfen

Wie prüfe ich mehr als die Terminalantwort?

Lies gespeicherte Unterschiede und öffne die geänderte Seite. Prüfe Fakten, Ressourcen, mobile Überschriften, Tastaturbedienung und CTA-Ziel. Sichere eine freigegebene Version vor weiteren Änderungen.

Lesbare Dateien prüfenFehlt eine Datei im Kontext, prüfe Projektordner und Pfad vor dem Fortsetzen.Website und ProduktsoftwareVeyra präsentiert ein Produkt. Echtes Sprachverarbeiten oder Konten benötigen einen getrennten Dienst.

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

06 / Struktur wählen

Welches Layout passt zu meiner Produktgeschichte?

Vergleiche Produktpräsentation, Beispiele, Workflows und FAQ-Struktur. Diese Designs sind Marketing-Frontends; die Software ihrer fiktiven Geschichten ist nicht enthalten.

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.

Velora

Präsentiere einen Entwickler-Tool-Workflow. Code-Review-Ansichten zeigen das Konzept, keinen Live-Review-Dienst.

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.

Clearstead

Erkläre ein Cashflow-Arbeitsbereich-Konzept. Dashboard- und Formular-Demos sind keine Finanzanwendung.

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/sunflower-meadow-vertical.png
assets/sunflower-meadow-wide.png

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

Relayline

Präsentiere ein Kommunikationsprodukt-Konzept. Live-Nachrichten und Konten brauchen einen separaten Dienst.

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/relayline-focus.png
assets/relayline-portrait.png

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

Gemini CLI · 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 / Nächste Schritte

Was bleibt nach der Bearbeitung?

Nach der Bearbeitung verbindest du Kontakt- oder Buchungsdienste und lässt den KI-Agent den Ordner auf passendem Hosting veröffentlichen. Gib Konto und Upload frei, prüfe die echte URL und verbinde deine Domain. Hosting und KI-Zugang sind separat.

Gemini-CLI-Leitfaden folgen Geprüfte HTML-Dateien veröffentlichen Echte dynamische Funktionen planen

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 ↗

Wähle ein Template. Mach es mit Gemini CLI zu deiner Website.

Lade Dateien herunter, öffne das Projekt im KI-Tool und beschreibe deine Änderungen. Du beginnst mit einem vorhandenen Design und kannst die gespeicherte Website weiter bearbeiten.

Meine Website-Vorlage wählen