Wie du in wenigen Minuten einen professionellen, druckbaren SEO-Report für jeden Kunden erstellst – inklusive fertigem Design-Prompt für Google Stitch. Vollautomatisch. Mit Claude KI. Mit deinem Agentur-Branding.
Was ist der SEO-Stitch-Analyst?
Der SEO-Stitch-Analyst ist ein maßgeschneiderter Claude-Skill — entwickelt von WEB-PROFIS 74722 —, der die aufwändigste Arbeit einer SEO-Agentur in einem einzigen, automatisierten Workflow bündelt: Konkurrenzanalyse, SEO-Report-Erstellung und Website-Redesign-Vorbereitung.
Das Ergebnis sind immer zwei Dokumente: ein professionell gestalteter, druckbarer HTML-SEO-Report mit deinem Agentur-Branding — und ein präziser Design-Prompt für Google Stitch, mit dem dein Kunde oder du eine neue, hochkonvertierende Website-Version in Minuten visualisieren könnt.
Das Wichtigste in Kürze
Der SEO-Stitch-Analyst analysiert deine Kunden-URL, ihre Top-5-Konkurrenten, führt einen Blink-Test durch, extrahiert Farben und Typografie, erstellt einen kundenfertigen Report mit Quick Wins und liefert dazu einen Google-Stitch-Prompt — alles mit einem einzigen Satz in Claude.
Was kann der SEO-Stitch-Analyst?
Der Skill vereint fünf Disziplinen, die du sonst mühsam in verschiedenen Tools zusammensuchen müsstest:
- Technische SEO-Analyse der Zielseite (Meta-Daten, Struktur, Keywords, Blink-Test)
- Wettbewerbsanalyse der organisch rankenden Top-5-Konkurrenten
- Farbextraktion und Farb-Harmonisierung — inklusive harmonisierter Hex-Codes für Redesign-Vorschläge
- AIDA-Texterstellung für eine neue, verkaufsstarke Hero-Sektion
- Zwei fertige Deliverables: HTML-Report (druckbar, gebrandmarkt) + Stitch-Prompt
Besonders wertvoll für Agenturen: Der Report trägt automatisch das vollständige WEB-PROFIS 74722 Branding — Agenturname, Website, Telefonnummer und einen Vertraulichkeits-Footer. Du musst nichts nachformatieren.
So verwendest du den Skill — Schritt für Schritt
Lade die Datei seo-stitch-analyst.skill herunter und öffne sie in Claude Desktop. Klicke auf „Add to Claude“ — der Skill ist sofort einsatzbereit.
Schreibe in Claude z.B.: „Analysiere diese Seite und erstelle einen SEO-Report und Sticht-Layout: baiant-dienstleistungen.de“ — das reicht. Je spezieller je besser: „Erstelle einen SEO-Report und ein Stitch-Layout für gartenpflege-odenwald.de — Zielgruppe sind Privathaushalte im Landkreis Neckar-Odenwald.“
Claude ruft die URL ab, sucht die Top-5-Konkurrenten, analysiert alle Seiten auf SEO, Design, Farben und Conversion-Stärken — und startet sofort die Report-Erstellung.
Du erhältst den vollständigen HTML-Code des Kunden-Reports (zum Einbinden auf deinen Agentur-Webspace) — und den fertigen, englischsprachigen Stitch-Prompt.
Kopiere den Stitch-Prompt in stitch.withgoogle.com — und erhalte in unter 90 Sekunden einen visuellen Design-Entwurf für die Kunden-Website.
Trigger-Phrasen: So startest du die Analyse
Der Skill erkennt eine Vielzahl von natürlich formulierten Anfragen. Du musst keine spezielle Syntax kennen — schreib einfach, was du brauchst:
Diese Formulierungen aktivieren den Skill automatisch
Tipp
Je konkreter deine Anfrage, desto präziser der Output. Nenne neben der URL gerne auch die Branche, die Zielregion oder besondere Anforderungen des Kunden — z.B.: „Erstelle einen SEO-Report für gartenpflege-odenwald.de — Zielgruppe sind Privathaushalte im Landkreis Neckar-Odenwald.“
Was wird analysiert? Der 4-Schritte-Workflow
Schritt 1 — Datenbeschaffung & Farb-Extraktion
Claude ruft die Kunden-URL direkt ab und prüft H1-Tags, Meta-Title, Meta-Description, Seitenstruktur und die verwendeten Farben. Gleichzeitig wird der Blink-Test (3-Sekunden-Regel) durchgeführt: Versteht ein Besucher ohne zu scrollen, was das Unternehmen anbietet, an wen sich das Angebot richtet und warum es besser ist als das der Konkurrenz?
Parallel werden per Websuche die fünf organisch stärksten Konkurrenten ermittelt und inhaltlich analysiert — Ranking-Faktoren, Schwächen, Design-Muster.
Schritt 2 — Lückenanalyse & AIDA-Texte
Aus dem Vergleich zwischen Kunden-Seite und Konkurrenz entstehen drei priorisierte Quick Wins — also Verbesserungen, die sofort umsetzbar sind und einen hohen SEO-Effekt haben. Gleichzeitig werden verkaufspsychologische Texte nach dem AIDA-Modell für die neue Hero-Sektion des Kunden formuliert.
Schritt 3 — HTML-Report mit Agentur-Branding
Der fertige Report ist ein vollständiges, responsives HTML5-Dokument — optimiert für Bildschirm und Druck. Es enthält Executive Summary, Quick Wins, Konkurrenz-Vergleichstabelle, Action-Plan und einen Platzhalter-Bereich für Design-Entwürfe. Das Branding der WEB-PROFIS 74722 (inkl. Vertraulichkeitshinweis) ist fest eingebettet.
Schritt 4 — Stitch Master-Prompt
Auf Basis der extrahierten und harmonisierten Kunden-Farbpalette und der AIDA-Texte wird ein präziser, englischsprachiger Prompt für Google Stitch erstellt — mit exakten Hex-Codes, Layout-Vorgaben und Conversion-Fokus.
Beispiel: Stitch-Prompt Output
Design a high-converting landing page for a garden services
company in the Odenwald region, Germany.// COLOR PALETTE (harmonized from client brand)
Primary: #3A6B35 · Accent/CTA: #F4A528
Background: #F8F6F1 · Text: #1E1E1E
// HERO SECTION — AIDA content (fixed)
H1: "Ihr Garten. Professionell gepflegt."
Sub: "Zuverlässige Gartenpflege im Odenwald — ..."
CTA Button: "Jetzt Angebot anfragen"
Layout: Full-width hero · Social proof bar · Feature grid
Mobile-first · High-contrast CTA · Clean whitespace
Was ist Google Stitch — und warum ist der Prompt so wichtig?
Google Stitch ist ein KI-gestütztes UI-Design-Tool aus dem Google-Labs-Ökosystem. Es wurde auf dem Google I/O 2025 vorgestellt und ermöglicht es, aus einfachen Text-Prompts und Bild-Eingaben komplexe UI-Designs und Frontend-Code in wenigen Minuten zu erstellen.
Das Tool basiert auf Googles Gemini-2.5-Modellen und unterstützt HTML/CSS-Export sowie Figma-Integration — womit der Übergabeprozess zwischen Design und Entwicklung erheblich beschleunigt wird. Kurz gesagt: Du beschreibst in Worten, wie eine Website aussehen soll — Stitch baut dir einen vollständigen, klickbaren Entwurf.
Stitch ist derzeit kostenlos über Google Labs nutzbar und generiert neben einzelnen Screens auch vollständige Design-Systeme — also kohärente Farb-, Typografie- und Abstands-Regeln, die konsistent über alle Seiten hinweg angewendet werden.
Der SEO-Stitch-Analyst nutzt dieses Potenzial gezielt: Weil Stitch bei vagen Eingaben generische, wenig nützliche Layouts produziert, die Farben oft nicht markentreu sind und komplexe Flows menschliche Nacharbeit erfordern, sorgt der Skill für einen hochpräzisen, individuellen Prompt — mit exakten Hex-Codes, eingebetteten Texten und konkreten Layout-Anweisungen.
Für wen eignet sich der SEO-Stitch-Analyst?
- Webdesign-Agenturen, die neue Kundenanfragen schnell mit einem professionellen Erstbericht qualifizieren möchten
- SEO-Freelancer, die ihre Erstanalyse für potenzielle Kunden automatisieren wollen
- Unternehmer und Selbstständige, die verstehen möchten, warum Konkurrenten besser ranken
- Webentwickler, die Kunden einen Design-Entwurf präsentieren möchten, bevor das Projekt offiziell startet
Besonders stark ist der Skill bei der Kunden-Akquise: Statt mit einer leeren E-Mail anzufragen, lieferst du potenziellen Kunden direkt eine konkrete Analyse ihrer Website — inklusive Three Quick Wins und einem visuellen Design-Ausblick. Das schafft Vertrauen, differenziert dich vom Wettbewerb und verkürzt den Sales-Cycle.
Häufige Fragen zum SEO-Stitch-Analysten
Benötige ich einen Firecrawl-API-Zugang?
Nein. Der Skill nutzt intern die Websuche und die URL-Abruf-Funktion von Claude — diese sind bereits integriert. Du benötigst keinen separaten Firecrawl-Account oder API-Schlüssel. Das Ergebnis ist identisch.
In welchem Format erhalte ich den SEO-Report?
Du erhältst den vollständigen HTML5-Code in einem einzigen Code-Block. Diesen kannst du direkt als .html-Datei speichern, auf deinen Webspace hochladen oder dem Kunden als Link zusenden. Der Report ist responsiv (mobiloptimiert) und enthält auch eine Print-CSS-Vorlage für den Ausdruck auf Papier.
Kann ich das Agentur-Branding anpassen?
Ja. Das Branding (WEB-PROFIS 74722, www.web-profis.com, Telefonnummer) ist in der SKILL.md hinterlegt und kann dort vor der Installation angepasst werden. Für die Standardversion ist das Branding von Marco Nisblé / WEB-PROFIS 74722 voreingestellt.
Wie verwende ich den Stitch-Prompt?
Rufe stitch.withgoogle.com auf, melde dich mit deinem Google-Konto an und füge den Prompt in das Eingabefeld ein. Wähle den Experimental Mode (Gemini 2.5 Pro) für die höchste Designqualität. Nach ca. 60–90 Sekunden erhältst du einen vollständigen visuellen Entwurf.
Funktioniert der Skill auch für nicht-deutschsprachige Websites?
Ja. Der Skill analysiert URLs unabhängig von der Sprache. Der HTML-Report wird auf Deutsch erstellt, der Stitch-Prompt immer auf Englisch (da Google Stitch englische Prompts bevorzugt). Für internationale Kunden kannst du Claude bitten, den Report in einer anderen Sprache zu verfassen.
Wie viele Konkurrenten werden analysiert?
Standardmäßig werden die fünf organisch stärksten Wettbewerber aus den Google-Suchergebnissen für die relevantesten Haupt-Keywords des Kunden analysiert. Du kannst in deiner Anfrage auch gezielt Konkurrenten benennen, die analysiert werden sollen.
Markdown zur Skill-Generierung für Claude:
# ROLLE UND ZIEL
Du bist ein Elite-SEO-Stratege, Art Director und Conversion-Spezialist.
Deine Aufgabe ist es, eine Kunden-URL und deren Top 5 Konkurrenten via Firecrawl zu analysieren. Aus diesen Daten erstellst du zwei Ergebnisse:
1. Einen kundenfertigen, druckbaren HTML-SEO-Report.
2. Einen hochspezifischen Design-Prompt für das visuelle UI-Tool „Google Stitch“.
# WERKZEUGE
– **Suchmaschine:** Für organische Top 5 Konkurrenten.
– **Firecrawl.dev API:** Für das Scrapen (Auslesen) von Texten, HTML-Strukturen, technischem SEO und CSS-Styling (Farb-Extraktion und Design-Analyse).
# SCHRITT-FÜR-SCHRITT ABLAUF
### Schritt 1: Datenbeschaffung & Farb-Extraktion
– Analysiere die Ziel-URL des Kunden. Führe den **“Blink Test“ (3-Sekunden-Regel)** in der Hero-Sektion (dem direkt sichtbaren oberen Bereich) durch: Ist sofort klar, worum es geht?
– Extrahiere die aktuelle Grundfarbe und die Action-Farbe (für Buttons) der Kunden-Website.
– Analysiere die Top 5 Konkurrenten (Ranking-Gründe, Schwächen, Gemeinsamkeiten).
– **Referenz-Analyse:** Scrape die URL „www.Web-profis.com“. Extrahiere hierbei *ausschließlich* die Design-Sprache und CSS-Regeln (Typografie, Struktur, Abstände, Eleganz), um sie im nächsten Schritt zu adaptieren.
### Schritt 2: Analyse & Farb-Harmonisierung
– Erstelle eine Lückenanalyse zwischen Kunde und Konkurrenz. Definiere 3 sofort umsetzbare „Quick Wins“.
– Verfasse verkaufspsychologische Texte nach dem **AIDA-Modell** (Attention, Interest, Desire, Action) für die neue Hero-Sektion.
– **Farb-Logik für den Kunden:** Generiere basierend auf den extrahierten Kunden-Farben ein neues, harmonisches und modernes Farbschema (inklusive Hex-Codes) für den späteren Stitch-Entwurf.
### Schritt 3: Erstellung des Kunden-HTML-Reports (Agentur-Branding)
– Generiere ein responsives (mobilfreundliches) HTML5-Dokument zur Hostung auf dem Agentur-Webspace.
– **Zwingende Design-Vorgaben für den Report:** Wandle das edle Dark-Mode-Design von „www.Web-profis.com“ in ein **Inverted Design (Light-Mode)** um. Nutze einen hellen, reinen Hintergrund, dunkelgraue edle Typografie und viel Weißraum. Integriere ein `@media print` CSS für den perfekten Ausdruck auf Papier.
– **Zwingende Branding- und Footer-Elemente (Wortwörtlich übernehmen!):**
– Header/Einleitung: *“Dieser SEO-Report ist eine exklusive Recherche der Agentur WEB-PROFIS 74722.“*
– Sichtbarer Agentur-Bereich: **“www.web-profis.com by marco nisblé:: +49 151 675 077 97″**
– Footer (dezent, kleine Schrift): *“Dieser SEO-Report enthält vertrauliche Analysedaten und strategische Handlungsempfehlungen. Die Weitergabe dieser Daten an Dritte (insbesondere an Mitbewerber) ist strikt untersagt.“*
– **Inhalt des Reports:**
1. Executive Summary & Blink-Test.
2. Quick Wins.
3. Konkurrenz-Vergleich (Stärken/Schwächen).
4. Action-Plan.
5. Platzhalter-Sektion: *“Unsere Design-Vorschläge für Sie“* (Für das spätere Einbetten von PNG-Entwürfen).
– Gib diesen HTML-Code in einem einzigen „„html „„ Code-Block aus.
Schritt 4: Erstellung des Master-Prompts für Google Stitch (Kunden-Branding)
– Erstelle einen englischsprachigen Text-Prompt für Google Stitch.
– **Anforderungen:** Nutze exakt die in Schritt 2 harmonisierte Kunden-Farbpalette (Hex-Codes übergeben). Integriere die AIDA-Texte als festen Inhalt der Hero-Sektion. Fordere ein hochkonvertierendes, fesselndes Layout.
– Gib diesen Prompt in einem separaten „„text „„ Code-Block aus.
Firecrawl-Integration in Claude.ai Projekte: Der Schnellstart
Wenn du Claude.ai nutzt, um eine App zu bauen, die Daten von anderen Webseiten benötigt, ist Firecrawl das ideale Werkzeug. Es wandelt komplexe Webseiten in sauberes Markdown um, das Claude perfekt versteht.
1. Vorbereitung & API-Key
Anstatt ein riesiges Backend aufzusetzen, nutzt du hier einen direkten API-Zugang:
Logge dich auf der Firecrawl-Website mit deinem Google-Konto ein.
Kopiere deinen API-Key aus dem Dashboard. Dieser Schlüssel ist dein „Ausweis“ für den Zugriff.
2. Initialisierung per PowerShell (Lokal)
Du hast den wichtigsten Schritt bereits mit deinem Befehl eingeleitet. Dieser Befehl bereitet deine lokale Umgebung darauf vor, Webseiten zu crawlen (zu durchsuchen):
# Initialisiert Firecrawl auf deinem PC
npx -y firecrawl-cli@latest init --all --browser
Was dieser Befehl macht:
npx: Führt das Tool direkt aus, ohne es dauerhaft installieren zu müssen.
init –all: Erstellt alle notwendigen Konfigurationsdateien in deinem Ordner.
–browser: Installiert die Browser-Engine, die benötigt wird, um moderne Webseiten (die JavaScript nutzen) korrekt zu erfassen.
3. Sichere Konfiguration für Claude
Auch wenn es „einfacher“ ist, darf dein API-Key niemals direkt im Skript stehen, das du eventuell veröffentlichst. Claude wird dir wahrscheinlich vorschlagen, den Key direkt in den Code zu schreiben – tue das nicht.
Erstelle eine Datei namens .env in deinem Projektordner:
# Deine Firecrawl API-Daten
FIRECRAWL_API_KEY=fc-xxxxxxxxxxxxxxxxxxxxxxxx
4. Nutzung im Claude.ai Workflow
Wenn du Claude bittest, ein Skript zu schreiben, das Daten von einer Website holt, gib ihm folgende Anweisung:
„Erstelle ein Node.js Skript, das die Firecrawl-Bibliothek nutzt. Verwende den API-Key aus der Umgebungsvariable
FIRECRAWL_API_KEY. Das Ziel ist es, die URL https://en.langenscheidt.com/german-english/einfuegen in Markdown zu konvertieren.“
Beispiel-Code, den Claude generieren sollte:
import FirecrawlApp from '@mendable/firecrawl-js';
// Sicherer Zugriff auf den Key
const app = new FirecrawlApp({apiKey: process.env.FIRECRAWL_API_KEY});
const crawlResponse = await app.crawlUrl('https://beispiel.de', {
limit: 10,
scrapeOptions: { formats: ['markdown'] }
});
Wichtige Sicherheitshinweise
API-Key Schutz: Dein Key ist wie ein Passwort. Wer ihn hat, kann auf deine Kosten Webseiten crawlen.
Rate Limits: Achte in deinem Dashboard darauf, wie viele Seiten du pro Monat frei crawlen darfst.
Datenschutz: Crawle nur Webseiten, deren Nutzungsbedingungen das zulassen.
Der ultimative Leitfaden zur agentenbasierten Webentwicklung: Eine umfassende Analyse von Claude Code, Nano Banana 2 und Firecrawl
Die digitale Landschaft des Jahres 2026 markiert einen Wendepunkt in der Art und Weise, wie Software und Webpräsenzen konzipiert, entwickelt und skaliert werden. Der Übergang von der manuellen Codierung hin zu einer orchestralen Steuerung autonomer KI-Agenten hat eine neue Ära eingeläutet, die oft als „Vibe-Coding“ bezeichnet wird. In dieser Ära steht nicht mehr die Syntax im Vordergrund, sondern die Intention und die Fähigkeit, komplexe Systeme durch natürliche Sprache zu dirigieren. Dieser Bericht untersucht den hocheffizienten Workflow, der es ermöglicht, Premium-Websites mit einem Marktwert von über 12.000 USD zu erstellen, indem die Synergien zwischen Claude Code, Nano Banana 2 und Firecrawl optimal genutzt werden.
Die technologische Basis: Infrastruktur und Ökosystem
Bevor die spezifischen Prozesse der Website-Erstellung betrachtet werden können, muss die zugrunde liegende Infrastruktur verstanden werden. Das Herzstück dieses Workflows ist die agentenzentrierte Entwicklungsumgebung (IDE) Google Antigravity, die in Kombination mit dem Command-Line-Tool Claude Code eine Umgebung schafft, in der Agenten nicht nur als Assistenten, sondern als vollwertige Partner fungieren.
Google Antigravity: Das agentenführende Betriebssystem
Antigravity unterscheidet sich grundlegend von traditionellen Editoren wie VS Code. Während herkömmliche Tools auf die Interaktion zwischen einem menschlichen Programmierer und einer statischen Codebasis ausgelegt sind, führt Antigravity eine „Manager-Oberfläche“ ein. Auf dieser Oberfläche werden spezialisierte Agenten koordiniert, die parallel an verschiedenen Modulen eines Projekts arbeiten können. Ein Agent könnte beispielsweise das Backend refaktorisieren, während ein zweiter Unit-Tests schreibt und ein dritter Browser-Verifikationen durchführt.
| Funktionsbereich | Beschreibung der Technologie | Relevanz für den Workflow |
| Agent Manager | Zentrale Steuerung für asynchrone Orchestrierung | Ermöglicht die parallele Ausführung komplexer Aufgaben |
| Multi-Model Support | Integration von Gemini 3.1 Pro und Claude Sonnet 4.5 | Bietet Modell-Optionalität für unterschiedliche Komplexitätsstufen |
| Browser Subagent | Autonome Navigation und Interaktion im Web | Ermöglicht automatisierte Tests und Datenerfassung |
| Verifiable Artifacts | Transparente Dokumentation des Denkprozesses | Schafft Vertrauen durch nachvollziehbare Implementierungspläne |
Die Installation von Antigravity erfolgt plattformspezifisch: Unter macOS wird der Paketmanager Homebrew (brew install antigravity) empfohlen, während Windows-Nutzer eine ausführbare .exe-Datei verwenden. Nach der Installation ist die Konfiguration des Agenten-Verhaltens entscheidend. Hierbei kann zwischen Modi wie „Off“ (manuelle Befehlsfreigabe), „Auto“ (Agent entscheidet situativ) und „Turbo“ (vollständige Autonomie) gewählt werden, wobei für Anfänger der „Auto“-Modus eine ideale Balance zwischen Kontrolle und Effizienz darstellt.
Claude Code: Die generative Intelligenz
Claude Code fungiert innerhalb dieses Systems als das primäre Werkzeug für die logische Strukturierung. Im Gegensatz zu einfachen Chat-Schnittstellen hat Claude Code Vollzugriff auf das Terminal, das Dateisystem und die Entwicklungswerkzeuge. Die Effizienz dieses Systems wird durch das Model Context Protocol (MCP) verstärkt, das es Claude ermöglicht, sicher mit lokalen Datenbanken, APIs und Cloud-Diensten zu interagieren.
Phase 1: Marktintelligenz durch Firecrawl
Der Prozess der Erstellung einer 12.000-USD-Website beginnt nicht mit dem ersten Pixel, sondern mit Daten. Firecrawl ist ein spezialisierte Werkzeug, das Websites in „LLM-bereite“ Markdown-Formate umwandelt. Es ermöglicht die Extraktion von Wettbewerbsvorteilen und Marktstrategien in einer Tiefe, die manuell kaum erreichbar wäre.
Semantische Extraktion statt statischem Scraping
Herkömmliche Web-Scraper scheitern oft an Designänderungen von Zielseiten, da sie auf starre CSS-Selektoren angewiesen sind. Firecrawl hingegen nutzt ein „Zero-Selector“-Design, das auf künstlicher Intelligenz basiert, um die semantische Struktur eines Dokuments zu verstehen. Wenn beispielsweise nach „Produktpreisen“ gesucht wird, erkennt Firecrawl diese unabhängig davon, ob sie in einer Tabelle, einer Liste oder einem Fließtext stehen.
Für die in dem Video beschriebene Nische der Pool-Reinigungsdienste bedeutet dies, dass Firecrawl systematisch die Top-Wettbewerber analysiert. Es erfasst:
Die visuelle Sprache und Farbpaletten erfolgreicher Anbieter.
SEO-Gaps, also Keywords und Themen, die Wettbewerber vernachlässigen.
Vertrauenssignale wie spezifische Zertifizierungen oder Kundenbewertungsstrukturen.
Strukturierte Daten über Preisgestaltungen und Servicepakete.
| API-Endpunkt | Technische Funktion | Strategischer Nutzen |
/scrape | Verarbeitet eine einzelne URL | Schnelle Analyse spezifischer Unterseiten |
/crawl | Rekursives Durchsuchen einer Domain | Erfassung der gesamten Inhaltsstruktur eines Wettbewerbers |
/map | Erstellt eine Sitemap aller verfügbaren Links | Identifikation verborgener Services oder Landingpages |
/extract | Extraktion nach JSON-Schema oder NLP | Überführung von unstrukturiertem Web-Inhalt in Datenbankformate |
Durch diesen Prozess wird ein „Intelligenzbericht“ erstellt, der Claude Code als Grundlage dient. Dies stellt sicher, dass die zu erstellende Website nicht nur ästhetisch ansprechend ist, sondern von Beginn an auf die harten Fakten des Marktes optimiert wird.
Phase 2: Der Aufbau des agentischen Systems
Nachdem die Marktdaten vorliegen, erfolgt der Übergang in die Bauphase. Hierbei wird ein Konzept genutzt, das als „Skills“ bezeichnet wird. Ein Skill ist im Wesentlichen eine Markdown-Datei (SKILL.md), die dem Agenten detaillierte Anweisungen gibt, wie er eine bestimmte Rolle ausfüllen soll.
Installation der Kern-Ressourcen
Der Sprecher im Video stellt ein System bereit, das als „Website Builder System“ bezeichnet wird. Dieses System muss in den Antigravity-Workspace integriert werden. Für einen Anfänger mag dies komplex klingen, doch der Prozess ist vergleichbar mit dem Hinzufügen einer App zu einem Smartphone.
Download des Archivs: Die Ressourcen werden als
.zip-Datei aus dem „Vault“ (einem Google Drive Ordner) heruntergeladen.Integration in Antigravity: Das entpackte Verzeichnis wird per Drag-and-Drop in den Antigravity-Workspace gezogen.
Pfad-Struktur: Skills können entweder global für alle Projekte unter
~/.gemini/antigravity/skills/oder projektspezifisch unter.agent/skills/gespeichert werden.
Die Kunst der Skill-Initialisierung
Sobald die Dateien im System sind, muss der Agent „aktiviert“ werden. Dies geschieht durch einen spezifischen Prompt, der den Agenten dazu zwingt, seine eigenen Fähigkeiten zu reflektieren und zu internalisieren.
Prompt für die Skill-Initialisierung:
„Hallo, ich möchte, dass du dich mit dem Website-Builder-Skill auf der linken Seite vertraut machst. Ich möchte, dass du mir alles, was du tun wirst, Schritt für Schritt wiederholst. Sobald du das getan hast, möchte ich, dass du das in einen Skill verwandelst, den du selbst speicherst, damit ich ihn in Zukunft jederzeit verwenden kann.“
Dieser Prompt ist deshalb so effektiv, weil er den Agenten in einen Zustand des „aktiven Lernens“ versetzt. Anstatt nur Befehle auszuführen, konstruiert der Agent ein internes Modell des Workflows. Er erstellt einen Implementierungsplan, der sicherstellt, dass alle Komponenten – von der SEO-Struktur bis hin zu den Animationen – logisch aufeinander aufbauen.
Phase 3: Generierung der Website-Struktur
Mit dem aktivierten Website-Builder-Skill beginnt der Agent mit der eigentlichen Entwicklung. Der Fokus liegt hierbei auf der Erstellung eines SEO-optimierten Grundgerüsts, das modular aufgebaut ist.
Prompt für den initialen Bau:
„Hallo, das klingt großartig. Geh bitte voran und erstelle die initiale Website. Achte darauf, dass wir Platz lassen, damit ich dir später das Video für die integrierte animierte Struktur des Pools geben kann.“
Der Agent nutzt hierbei moderne Web-Technologien wie React oder Next.js, die für ihre Schnelligkeit und SEO-Freundlichkeit bekannt sind. Ein wesentlicher Bestandteil einer 12.000-USD-Website ist die Nutzererfahrung (UX). Claude Code sorgt dafür, dass die Website nicht nur gut aussieht, sondern auch schnell lädt und auf allen Geräten einwandfrei funktioniert.
Struktur des Website-Builder-Systems
| Komponente | Aufgabe | Technologische Basis |
| Core Structure | Erstellung von Header, Footer und Navigation | React / TypeScript |
| SEO Engine | Automatische Generierung von Meta-Tags und Sitemaps | Basierend auf Firecrawl-Daten |
| Content Generator | Erstellung von Service-Texten und Testimonials | Claude Sonnet 4.5 |
| Asset Placeholder | Vorbereitung für 3D-Animationen | CSS Grid / Framer Motion |
Während des Erstellungsprozesses generiert der Agent „Artefakte“ – das sind verifizierbare Pläne und Code-Schnipsel, die der Entwickler in Echtzeit überprüfen kann. Dies ermöglicht es auch Anfängern, die Kontrolle zu behalten, ohne selbst programmieren zu müssen.
Phase 4: Die Hero-Animation – Vom schmutzigen zum sauberen Pool
Ein absolutes Highlight des Videos ist die sogenannte „Hero Animation“ ganz oben auf der Website. Stell dir vor, ein Besucher kommt auf die Seite und sieht einen schmutzigen, ekligen Pool. Während er nach unten scrollt, verwandelt sich dieser Pool wie durch Zauberei in eine kristallklare Oase. Dieser Vorher-Nachher-Effekt wird nicht mühsam von Hand gezeichnet, sondern von einer KI aus zwei Fotos berechnet.
Schritt 1: Die Fotos vorbereiten
Zuerst brauchst du zwei Bilder, die fast identisch sind – bis auf den Zustand des Pools.
Foto A (Start): Ein Foto eines schmutzigen Pools (vielleicht mit Blättern oder grünlichem Wasser).
Foto B (Ende): Genau dasselbe Foto, aber der Pool ist nun perfekt sauber und blau.
Diese Bilder kannst du entweder selbst machen oder mit Nano Banana 2 generieren lassen. Wichtig ist, dass die Kameraeinstellung (der Winkel) bei beiden Fotos genau gleich bleibt, damit der Übergang später nicht ruckelt.
Schritt 2: Das Video erstellen (Kling AI oder StyleGAN)
Um aus diesen zwei Fotos ein flüssiges Video zu machen, nutzt man Tools wie Kling AI. Dieses Programm hat eine spezielle Funktion namens „Start and End Frames“.
Upload: Du lädst Foto A als den ersten Frame (Start) und Foto B als den letzten Frame (Ende) hoch.
KI-Berechnung: Die KI (Kling AI oder ähnliche Systeme wie Higgsfield) füllt die Lücken dazwischen aus. Sie berechnet, wie das Wasser langsam klarer wird und der Schmutz verschwindet.
Prompt-Tipp: Nutze einen einfachen Befehl wie: „The pool water transitions smoothly from dirty and green to crystal clear and blue.“
Ergebnis: Du erhältst einen kurzen Video-Clip (ca. 5 Sekunden), der die perfekte Verwandlung zeigt.
Hinweis für Profis: Der Sprecher im Video erwähnt auch fortgeschrittene Methoden wie „Gans Park“ (eine Anlehnung an StyleGAN-Techniken), bei denen man die Verwandlung noch präziser steuern kann. Für den Anfang ist Kling AI jedoch viel einfacher zu bedienen.
Schritt 3: Einbau in die Website mit Anti-Gravity & Claude
Sobald du das Video hast, musst du es in den oberen Teil deiner Website (die Hero-Section) einbauen. Das Tolle ist: Du musst den Code nicht selbst schreiben. Du sagst es einfach deinem KI-Agenten in Anti-Gravity.
Der passende Prompt für Claude Code:
„Ich habe hier ein Video vom Pool-Übergang hochgeladen. Bitte setze dieses Video ganz oben in die Hero-Section der Website. Nutze eine Bibliothek wie GSAP ScrollTrigger, damit das Video nicht einfach von alleine abspielt, sondern genau mit meiner Scroll-Bewegung verknüpft ist. Wenn ich runterscrolle, soll der Pool sauber werden.“
Der Agent erledigt dann folgende Aufgaben für dich:
Er erstellt den Container für das Video.
Er bindet die GSAP-Bibliothek ein (ein Werkzeug für Profi-Animationen).
Er schreibt das Skript, das die Abspielzeit des Videos an deine Mausbewegung beim Scrollen koppelt.
Das Ergebnis ist eine interaktive Erfahrung, die Kunden sofort beeindruckt und den Wert der Website massiv steigert.
Phase 5: Visuelle Revolution mit Nano Banana 2
Neben der Hero-Animation braucht eine Premium-Website weitere fotorealistische Bilder. Nano Banana 2, offiziell als Gemini 3.1 Flash Image bekannt, liefert diese in Sekundenschnelle.
Ein besonderes Merkmal ist das „JSON Prompting“. Anstatt vage Beschreibungen zu verwenden, können Entwickler dem Modell präzise Parameter übergeben.
JSON-Struktur für ein Premium-Asset:
{
"image_type": "Photorealistic 3D Render",
"subject": "Luxury swimming pool, crystalline water",
"action": "Transition from dirty/filthy to sparkling clean",
"style": "Modern architecture, high-end resort",
"environment": "Sunny Texas backyard, lush greenery",
"lighting": "Natural golden hour sunlight",
"camera": "Wide angle, low perspective",
"quality": "4K, high fidelity"
}
Diese Präzision eliminiert das Rätselraten bei der KI-Generierung und führt zu konsistenten Ergebnissen.
Was ist JSON-Prompting?
Normalerweise beschreibst du ein Bild in einem flüssigen Satz (z. B. „Mach mir ein Bild von einem Pool in Texas“). Das Problem: Die KI muss raten, was dir wichtig ist.
JSON (kurz für JavaScript Object Notation) ist eigentlich ein Format für Programmierer. In der Bildgenerierung nutzen wir es als eine Art Checkliste. Anstatt eines langen Textes gibst du der KI eine strukturierte Liste mit festen Kategorien (Attributen).
Wie ist die Handhabung? (Schritt-für-Schritt)
Du musst keine speziellen Einstellungen ändern oder Programme installieren. Du nutzt einfach mich (Gemini) dafür.
Kopiere die Struktur: Nimm den JSON-Block, den du oben gepostet hast.
Anpassen: Ändere die Werte hinter den Doppelpunkten nach deinen Wünschen (z. B. statt „Swimming Pool“ schreibst du „Luxury Sportscar“).
Einfügen & Abschicken: Poste diesen Block einfach direkt in unseren Chat und schreibe dazu: „Generiere mir ein Bild basierend auf diesem JSON:“
Warum ist das besser? (Die Vorteile)
Kein Rätselraten: Wenn du im JSON sagst
"lighting": "golden hour", dann wird das Bild dieses warme Licht haben. In einem normalen Text geht so ein Detail oft unter.Konsistenz: Wenn du eine ganze Website baust, möchtest du, dass alle Bilder den gleichen Stil haben. Du behältst das JSON-Gerüst einfach bei und änderst nur das
"subject"(den Gegenstand).Nano Banana 2 Power: Mein Bildmodell (Nano Banana 2, auch bekannt als Gemini 3 Flash Image) ist darauf trainiert, diese technischen Anweisungen extrem präzise umzusetzen.
Ein praktisches Beispiel für dich
Stell dir vor, du möchtest ein Bild für deine Website passend zu deinem Cupra Tavascan (den du ja liebst). Du könntest mir diesen Prompt schicken:
{
"image_type": "Commercial Photography",
"subject": "Electric SUV, Cupra Tavascan VZ, dark metallic violet",
"environment": "Modern minimalist villa architecture, night scene",
"lighting": "Neon blue ambient lights, sharp reflections on the car body",
"camera": "Low angle, cinematic depth of field",
"quality": "8K resolution, photorealistic"
}
Fachausdrücke kurz erklärt
JSON: Eine strukturierte Liste von Daten, die immer aus einem Namen (z. B. „camera“) und einem Wert (z. B. „Wide angle“) besteht.
Prompting: Das „Einflüstern“ oder Geben von Befehlen an eine KI.
Asset: Ein Begriff aus der Webentwicklung für ein Element (wie ein Bild oder eine Grafik), das auf einer Seite verwendet wird.
Phase 6: Qualitätssicherung und technisches Audit
Bevor eine Website für 12.000 USD verkauft werden kann, muss sie einem strengen Audit unterzogen werden. Hierbei wird sichergestellt, dass sie nicht nur gut aussieht, sondern auch den höchsten technischen Standards entspricht.
Der 15-Punkte-Audit-Skill
Ein spezialisierter Skill wird eingesetzt, um die Website auf SEO-Optimierung, Barrierefreiheit (Accessibility) und Ladegeschwindigkeit zu prüfen. Der Agent nutzt den Browser-Subagenten von Antigravity, um die Website wie ein echter Nutzer zu besuchen und Fehler zu identifizieren.
Prompt für das Audit:
„Hallo, ich möchte, dass du den Skill herunterlädst und ein vollständiges Audit dieser Website für mich durchführst. Stelle sicher, dass sie vollständig SEO-optimiert ist und basierend auf allen Anforderungen vollständig barrierefrei ist… und wenn das erledigt ist, gib mir einfach eine coole Checkliste von allem, was du getan hast…“
Phase 7: Kundenmanagement und Feedback-Portal
Ein professioneller Workflow beinhaltet auch die Verwaltung von Kundenwünschen. In dem untersuchten Modell wird hierfür ein „Client Feedback Portal“ eingerichtet, das direkt mit Notion verbunden ist.
| Funktion des Portals | Technischer Hintergrund | Vorteil für den Entwickler |
| Bug-Reporting | Formular-Integration in React | Direkte Erfassung technischer Probleme |
| Design-Tweaks | Verbindung zur Notion-API | Übersichtliche Verwaltung von Änderungswünschen |
| Automatisches Update | Claude-Skript zur DB-Überprüfung | Reduzierung manueller Revisionsarbeit |
Anleitung zum Download der Ressourcen
Für Anfänger ist der Zugriff auf die richtigen Dateien entscheidend. Der Autor des Videos stellt seine Ressourcen in einem sogenannten „Vault“ zur Verfügung.
Schritt-für-Schritt-Download-Guide
Beschreibung öffnen: Klicken Sie unter dem Video auf „Mehr anzeigen“, um die vollständige Videobeschreibung zu sehen.
Vault-Link finden: Suchen Sie nach einem Link, der zum „Resources Vault“ oder direkt zu einem Google Drive führt.
Dateien identifizieren: Laden Sie folgende Pakete herunter:
website_builder_system.zip(Das Kern-Framework).3d_assets_and_skills.zip(Die spezialisierten KI-Prompts).client_feedback_portal_guide.pdf(Die Anleitung für Notion).
In Antigravity integrieren: Öffnen Sie Ihren Workspace in Antigravity. Navigieren Sie zu den „Customizations“ oben rechts und wählen Sie „Rules and Workflows“. Ziehen Sie die entpackten Dateien in den entsprechenden Ordner für Workspace-Skills (
/.agent/skills/).
Strategische Einordnung: Der Wert agentischer Webentwicklung
Traditionelle Agenturen benötigen für eine Website mit individuellen 3D-Animationen oft Wochen. Mit dem agentischen Workflow verkürzt sich diese Zeit auf wenige Stunden.
Durch den Einsatz von KI-Agenten reduziert sich dieser Wert signifikant:
Diese Effizienzsteigerung von über $90\%$ ermöglicht es dem Entwickler, sich auf das hochwertige Branding zu konzentrieren, was den hohen Preis rechtfertigt.
Fazit und Handlungsempfehlungen
Für einen zwölfjährigen Anfänger bedeutet dies: Die Barriere für den Einstieg in die High-End-Webentwicklung ist fast vollständig verschwunden. Es geht nicht mehr darum, jahrelang Programmiersprachen zu büffeln, sondern darum, zu lernen, wie man komplexe Aufgaben in logische Prompts zerlegt.
Die wichtigsten Takeaways sind:
Präzision im Prompting: Nutze strukturierte Prompts und JSON.
Vorher-Nachher-Effekte nutzen: Tools wie Kling AI machen komplizierte Animationen kinderleicht.
Modularität durch Skills: Baue deine eigene Skill-Bibliothek auf.
Interaktivität als USP: Nutze Scroll-Effekte, um Kunden zu beeindrucken.
.htuser, 
Website-Configurator.
Anmerkung
