Google AI Studio

Vergleiche dasselbe Briefing in Google AI Studio vs Lovable vs Bolt. Googles Output sieht gestaltet aus. Die anderen sehen gebaut aus. Der Grund: Googles Modelle haben mehr Designmuster aufgenommen.

Das macht es ideal für alles, wo das Aussehen zählt: Portfolios, Produktseiten, Kundenpräsentationen, Event-Seiten.

Der Trade-off ist real. Lovable gibt dir eine URL in Sekunden. Google AI Studio gibt dir einen Ordner mit Dateien, die du irgendwo hochladen musst. Dieser Kurs lehrt sowohl das Bauen als auch das Deployment.

Bau das

Öffne Google AI Studio. Beschreibe eine Landingpage, die du tatsächlich nutzen würdest. Vergleiche die visuelle Qualität mit dem, was du von anderen Tools bekommen hast. Der Unterschied ist sofort sichtbar.

Beschreibe deine Seite mit visueller Richtung. Nicht nur was sie sagen soll, sondern wie sie aussehen soll. "Dunkler Hintergrund, saubere Sans-Serif-Typografie, orangene Akzente, großzügiger Weißraum, Hero-Section über die ganze Breite."

Google AI Studio generiert den Code. Lade die Dateien herunter. Du siehst: eine index.html Datei (die Seitenstruktur und der Inhalt), eine style.css Datei (wie es aussieht), vielleicht eine script.js Datei (Interaktionen).

Du musst den Code nicht verstehen. Du musst verstehen, was die Dateien sind. Wie zu verstehen, dass eine Präsentation Folien und einen Notizenbereich hat, ohne zu verstehen wie das PowerPoint-Format funktioniert.

Öffne die HTML-Datei im Browser. Deine Seite ist da. Schön. Funktioniert. Auf deinem Computer.

Bau das

Baue eine Landingpage für etwas Echtes. Deine Freelance-Arbeit, ein Nebenprojekt, ein Event. Beschreibe den Inhalt UND den visuellen Stil. Lade das Ergebnis herunter. Öffne es im Browser.

Option 1: Netlify Drop. Am einfachsten. Geh zu app.netlify.com/drop. Ziehe deinen Ordner auf die Seite. Deine Seite ist in 30 Sekunden live mit einer URL. Kostenlos.

Option 2: GitHub Pages. Erstelle ein GitHub-Konto. Lade deine Dateien hoch. Aktiviere Pages in den Einstellungen. Kostenlos, und du hast Versionshistorie.

Option 3: Vercel. Die professionelle Wahl. Mit GitHub verbinden. Auto-Deployment wenn du Dateien aktualisierst. Der kostenlose Tarif reicht für die meisten Projekte. Wenn du später zu Assisted Coding wechselst, bist du bereits auf der richtigen Plattform.

Starte mit Netlify Drop. Dauert 30 Sekunden. Upgrade zu Vercel wenn du Auto-Deployment und eigene Domains willst.

Bau das

Nimm die Seite aus Lektion 2. Geh zu app.netlify.com/drop. Ziehe den Ordner rein. Deine Seite ist live. Teile die URL. Das war's.

Für große Änderungen: geh zurück zu Google AI Studio, passe deinen Prompt an, generiere neu. Schneller als manuelles Bearbeiten, wenn sich die Struktur ändern muss.

Für kleine Änderungen: öffne die HTML-Datei in einem beliebigen Texteditor. Nutze Strg+F (Cmd+F auf Mac) um den Text zu finden, den du ändern willst. Ändere ihn. Speichern. Neu auf Netlify hochladen.

Eine Headline ändern: finde sie im HTML, ändere den Text zwischen den Tags. Eine Farbe ändern: suche nach dem Hex-Code, ersetze ihn durch einen neuen. Ein Bild ändern: ersetze die Bilddatei oder ändere die URL.

Das sind 30-Sekunden-Edits. Keine Coding-Kenntnisse nötig. Einfach Suchen-und-Ersetzen in einer Textdatei.

Bau das

Öffne die HTML-Datei deiner Seite. Finde eine Headline. Ändere sie in etwas anderes. Speichern. Neu hochladen. Sieh deine Änderung live. Das ist Code bearbeiten.

Weiter Google AI Studio nutzen für: Einzelseiten, Portfolios, Event-Seiten, Produktseiten, Präsentationsseiten. Alles wo Designqualität zählt und Interaktion minimal ist.

Wechsle zu Lovable für: mehrseitige Websites, interaktive Tools, Formulare mit Logik, alles was auf Nutzereingaben reagieren muss.

Wechsle zu Base44 für: alles was Daten speichern, Nutzer verwalten oder Informationen über die Zeit verfolgen muss.

Die Brücke zu VS Code: Google AI Studio generiert sauberes HTML/CSS. Dieser Code kann in VS Code geöffnet und mit Claude Code erweitert werden. Deine schöne Seite wird zum Startpunkt eines größeren Projekts.

Bau das

Schau dir an, was du als nächstes bauen musst. Passt es in den Sweet Spot von Google AI Studio? Wenn ja, bau es hier. Wenn nicht, weißt du welches Tool du stattdessen probieren solltest.

Seite 1: deine persönliche Seite. Wer du bist, was du machst, wie man dich erreicht. Sauber, selbstbewusst, professionell.

Seite 2: eine Projektseite. Ein Stück Arbeit auf das du stolz bist. Visuell, beschreibend, mit einer klaren Erzählung.

Seite 3: etwas Kreatives. Eine Event-Seite, ein Konzept, ein Portfolio-Stück. Zeig Bandbreite.

Deploye alle drei auf Netlify. Du hast jetzt drei Live-URLs, die du teilen kannst. Die Fähigkeit liegt im Briefing: wie du Designrichtung beschreibst, Stile referenzierst, Typografie und Farbe spezifizierst.

Diese Seiten zeigen sowohl deinen Geschmack als auch deine Fähigkeit, AI zu leiten. Das ist eine wertvolle Kombination.

Bau das

Baue alle drei. Heute. 30 Minuten pro Seite. Deploye sie. Verlinke sie von deinem LinkedIn. Du hast gerade ein Portfolio gebaut ohne Designer oder Entwickler.