Wie erstellst du eine Website mit Gemini CLI? Mach aus deiner gewählten Vorlage deine Unternehmenswebsite, indem du Gemini mit der Bearbeitung beauftragst.
Nutze ein vorhandenes Website-Projekt. Prüfe Anmeldung und lokalen Dateikontext, fordere eine Änderung an und kontrolliere gespeicherte Dateien und Seite vor dem Fortfahren.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
01 / Anmeldung
Welche Kontoeinrichtung brauche ich?
Für die meisten Privatnutzer empfiehlt Google die Anmeldung bei Gemini CLI mit dem persönlichen Google-Konto. API-Key und Vertex AI sind Alternativen; Organisationskonten können andere Voraussetzungen haben. Prüfe Limits und Abrechnung getrennt vom Template.
Deine Google-Umgebung
Private und Organisationskonten können unterschiedliche Voraussetzungen haben.
Separate Nutzung
Die Vorlage enthält weder Google-KI-Zugang noch unbegrenzte Gratisnutzung.
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.
02 / Dateisichtbarkeit
Wie liefere ich den richtigen Kontext?
Öffne Gemini CLI im entpackten Website-Ordner. Verweise auf index.html und RECREATE.md und lass die lesbaren Dateien nennen. Ergänze Firmentexte und Bildpfade, damit das tatsächliche Projekt bearbeitet wird.
Website-Dateien + Designanweisungen
@index.html
Bitte vor Bearbeitung um Prüfung des echten gelieferten Frontends.
@RECREATE.md
Liefere Originalspezifikation und separates freigegebenes Unternehmensbriefing.
Quelldateien und technische Details ansehen
Die tatsächlichen Projektdateien
14-clearstead · 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.
Die Anleitung beschreibt die ursprüngliche fiktive Seite. Trenne ihre Aufgabe von den Änderungen für dein eigenes Unternehmen.
Produce one `index.html`, containing all page markup, an inline stylesheet and one inline vanilla-JavaScript IIFE placed after the dialog. Use English. No framework, package manager, build step, bundler, external JavaScript, backend or persisted state. The runtime is **network**: four external SVG images and the Google Fonts stylesheet/font files are required. Opening the HTML directly or serving it over a local HTTP server must support the same local interactions. Target current desktop and mobile Chromium with native `<dialog>`, `<details>`, CSS Grid, `min()`, `100svh` and `matchMedia().addEventListener()` support. Preserve every text, image URL, selector, dimension and behavior below. Keep the literal curly punctuation, en dashes and arrow glyphs.
03 / Erste Bearbeitung
Wie fordere ich eine begrenzte Änderung an?
Beschreibe Gemini das konkrete Ergebnis auf der bestehenden Seite: Firmenname, vorgegebene Überschrift, Leistungen und echte Buttonlinks. Nenne zu erhaltende Teile und lass das HTML speichern. Öffne danach die Vorschau für nötige Korrekturen.
›_ Beispiel für KI-BearbeitungFormwell
Du
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.
Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.
Explizite Gemini-Dateianfrage vorbereiten
Dein eigener Arbeitsplan
AI ChatBeispielablauf
Gemini CLI · Bearbeitete Seite prüfen
Du
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.
Du
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.
04 / Dateien und Browser
Woran erkenne ich die angeforderte Änderung?
Prüfe gespeicherte Unterschiede und echte Browserseite. Kontrolliere Texte, Links, Ressourcen und mobiles Layout. Behalte Original und geprüfte Versionen getrennt.
01
Geänderte Pfade prüfen
Suche unerwartete Änderungen und nicht angepasste Dateien.
02
Sichtbares Ergebnis prüfen
Teste Überschriften, Navigation, Tastaturfokus und Hauptaktionsziel.
Quelldateien und technische Details ansehen
Eine kleine Änderung zum Prüfen
14-clearstead/index.html · L46
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">Give your money a little more direction.</h1>
Erste vorbereitete Änderung
<h1 id="hero-title">Give each plan a clear next step.</h1>
Vorbereitete Folgeänderung
<h1 id="hero-title">Plan the month.<br>Choose the next step.</h1>
Originalprojekt · Clearstead 14
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 · Fehlende Projektdatei finden
Du
Dieses Bild fehlt in der Vorschau. Prüfe Bild-URL und lokalen Dateipfad in index.html.
KI · Beispielantwort
Ich vergleiche den HTML-Verweis mit den Dateien und prüfe externe URLs. Fehlt die Datei, frage ich danach, statt ein unpassendes Bild einzusetzen.
Du
Das richtige Bild liegt in assets. Korrigiere den Verweis, behalte den Dateinamen und prüfe den Ausschnitt am Handy.
Nächste Schritte
Verweis prüfen
Lies den Bildpfad im tatsächlichen HTML.
Asset finden
Vergleiche lokale Dateien oder prüfe die externe URL.
Vorschau erneut öffnen
Prüfe korrigiertes Bild und Ausschnitt im Browser.
Ziel: Das gewünschte Bild lädt vom richtigen Pfad.
Beispielablauf. Keine Live-Verbindung zu einer KI.
05 / Korrektur und Zugriff
Was tun bei falschem Ergebnis oder Dateikontext?
Wenn Gemini eine Datei nicht lesen kann, prüfe Projektordner, vorhandenen Pfad und erlaubten Zugriff. Bei Darstellungsfehlern gib die betroffene Sektion oder einen Screenshot an und lass den konkreten Fehler korrigieren. Behalte eine gesicherte Version zum Zurückkehren.
Sind ignorierte Dateien grundsätzlich unzugänglich?⌃
.geminiignore schließt passende Pfade bei unterstützenden Tools aus, auch beim Teilen mit @. Es ist keine allgemeine Zugriffssperre für jeden Dienst. Prüfe bei versehentlich ausgeschlossenen Website-Dateien das Muster und starte Gemini CLI nach Änderungen neu.
Wie stelle ich eine abgelehnte Änderung wieder her?⌃
Behalte das Original-ZIP und einen freigegebenen Ordner oder Git-Stand. Sage dem Agent, welche Version oder Änderung zurückkehren soll, und prüfe die wiederhergestellte Seite samt Links.
Clearstead präsentiert ein Cashflow-Konzept, keine Finanzsoftware. Vergleiche andere Strukturen und liefere nur echte Unternehmensangaben und Beispiele.
Clearstead
Frontend eines fiktiven Cashflow-Workspaces mit lokalem E-Mail-Formular; kein Finanzkonto oder Anfragedienst ist verbunden.
Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.
index.html
RECREATE.md
assets/paper-detail.webp
assets/print-project.webp
assets/studio-review.webp
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
Du
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.
Du
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 / Offene Aufgaben
Was bleibt neben dem Dateiworkflow separat?
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.
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.
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.
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
