Website mit KI analysieren: ganzseitige Screenshots als Grundlage für Design-Feedback

Warum ein Screenshot des sichtbaren Bereichs für die KI nicht reicht

Ein Sprachmodell kann nur über das urteilen, was im Bild zu sehen ist. Gibst du ihm einen Screenshot des sichtbaren Bereichs einer Landingpage, sieht es den Hero-Bereich und sonst nichts. Es antwortet trotzdem selbstsicher, denn das tun diese Modelle, aber der Rat bezieht sich auf ein Bruchstück einer Seite, deren Rest es nicht kennt.

Eine Aufnahme der ganzen Seite macht dieses Raten überflüssig. Das Modell bekommt Hero-Bereich, Kundenstimmen, Funktionsblöcke, Preistabelle und Footer in einem Bild, in genau der Reihenfolge, in der Besucher sie sehen. Um diese Reihenfolge geht es bei Design-Feedback zum größten Teil: was zuerst kommt, was sich wiederholt, wo das Auge keinen Halt findet und wo die nächste Handlungsaufforderung sitzt.

Außerdem fällt eine ganze Kategorie falscher Antworten weg. Fragst du anhand eines Ausschnitts „Ist mein Call-to-Action klar genug?“, kann das Modell nicht wissen, dass weiter unten vier weitere Buttons mit ihm konkurrieren.

Website mit KI analysieren: der Ablauf Schritt für Schritt

Ist die Erweiterung installiert, dauert das deutlich weniger als eine Minute.

1. 1

   Die Seite fertig laden lassen

   Bei Seiten mit nachgeladenen Bildern oder animierten Abschnitten scrollst du einmal ganz nach unten und zurück nach oben. Was der Browser noch nicht dargestellt hat, kann nicht aufgenommen werden, und eine halb leere Aufnahme liefert nur halb brauchbares Feedback.

2. 2

   Die ganze Seite aufnehmen

   Drücke die vorgeschlagene Tastenkombination Alt+Umschalttaste+S (Alt+Shift+S; auf dem Mac Wahltaste+Umschalttaste+S, ⌥⇧S) oder klicke auf das Symbol in der Symbolleiste und wähle „Full page“ (ganze Seite). Die Seite scrollt von selbst, jeder Abschnitt wird aufgenommen und zu einem hohen Bild zusammengesetzt, und das Ergebnis öffnet sich in einem neuen Tab.

3. 3

   Zuerst alles Private schwärzen

   Zeigt die Seite Kundennamen, Rechnungen, E-Mail-Adressen oder interne Daten, machst du sie im eingebauten Editor unkenntlich, bevor das Bild dein Gerät verlässt. Am sichersten ist „Redact“ (Schwärzen), weil es die Pixel darunter entfernt. Was du bei einem KI-Dienst hochlädst, unterliegt dessen Bedingungen, nicht deinen.

4. 4

   Als PNG exportieren

   PNG ist verlustfrei, Textkanten und dünne Rahmen bleiben scharf, und das Modell muss keine JPEG-Artefakte deuten. JPEG oder WebP nimmst du nur, wenn du an eine Upload-Grenze stößt.

5. 5

   Hochladen und eine konkrete Frage stellen

   Zieh die Datei in ChatGPT, Claude, Gemini, Copilot oder deinen KI-Builder. Vage Prompts bringen vage Antworten, also nenne ein Ziel: „Das ist die vollständige Startseite eines B2B-SaaS-Produkts. Prüfe die visuelle Hierarchie, die Einheitlichkeit der Abstände und ob der wichtigste Call-to-Action von oben bis unten klar erkennbar bleibt. Nenne konkrete Änderungen, die wichtigste zuerst.“

Prompts, die brauchbares Feedback liefern

Der Screenshot liefert den Kontext, der Prompt entscheidet, ob du eine Kritik oder ein Kompliment bekommst. Gib dem Modell eine Rolle, eine Zielgruppe und genau einen Maßstab.

• Hierarchie: „Geh diese Seite Abschnitt für Abschnitt durch und sag mir, worauf das Auge in jedem Abschnitt zuerst fällt. Wo bricht die Hierarchie?“
• Einheitlichkeit: „Liste jede Uneinheitlichkeit bei Abständen, Überschriftgrößen, Button-Stilen und Eckenradien auf, die du auf der ganzen Seite siehst.“
• Weg zur Conversion: „Ich verkaufe eine Chrome-Erweiterung. Verfolge den Weg vom Seitenanfang bis zum Installieren-Button und nenne jede Stelle, an der Besucher hängen bleiben könnten.“
• Text: „Schreib die Überschrift und den ersten Absatz jedes Abschnitts so um, dass jemand, der zum ersten Mal hier ist, das Produkt in fünf Sekunden versteht.“
• Vergleich: Lade deine Aufnahme der ganzen Seite und die eines Mitbewerbers hoch und frag, welche Seite ihr Produkt schneller erklärt und warum.
• Hinweise zur Barrierefreiheit: „Markiere jeden Text auf dieser Seite, dessen Kontrast zum Hintergrund zu niedrig wirkt, um ihn bequem zu lesen.“

Was eine KI anhand eines Screenshots beurteilen kann und was nicht

Wer die Grenzen kennt, holt aus diesem Ablauf den größten Nutzen. Ein Bild ist eine Darstellung der Seite, nicht die Seite selbst.

• Zuverlässig: visuelle Hierarchie, Reihenfolge der Abschnitte, Rhythmus der Abstände, Ausrichtung, offensichtliche Uneinheitlichkeiten, Klarheit von Überschrift und Text, ob ein Call-to-Action heraussticht, Dichte des Layouts, erkennbare Kontrastprobleme.
• Nicht zuverlässig: exakte Farbwerte und Kontrastverhältnisse (das Modell schätzt anhand der Pixel, es liest dein CSS nicht), Namen von Schriften, Ladeleistung, Hover- und Fokuszustände, Animationen, Tastaturbedienung, Verhalten mit Screenreadern, responsives Verhalten bei anderen Breiten.
• Unmöglich: ob echte Besucher tatsächlich zu Kunden werden. Eine Prüfung per Screenshot ist eine heuristische Kritik, kein Usability-Test und kein Barrierefreiheits-Audit.
• Praxistipp: Nimm dieselbe Seite in Desktop- und in Mobilbreite auf und lade beide hoch. Die meisten Layoutprobleme zeigen sich erst im Vergleich.

Sehr lange Seiten: Warum KI-Uploads scheitern und was hilft

Eine lange Marketing- oder Dokumentationsseite kann 15.000 Pixel hoch sein. Lädst du sie als ein einziges Bild hoch, lehnt der Dienst die Datei womöglich ab oder verkleinert sie, bis der Fließtext unlesbar ist.

Die Lösung ist kein Zuschneiden von Hand. Exportiere die Aufnahme als nummerierte Teile von etwa 3.000 bis 5.000 Pixel Höhe mit 160 Pixel Überlappung. Die Überlappung ist wichtig: Ohne sie können eine Überschrift und der zugehörige Absatz auf verschiedenen Seiten eines Schnitts landen, und das Modell liest sie als nicht zusammengehörig.

Lade die Teile dann in der richtigen Reihenfolge hoch und sag das im Prompt: „Das sind nummerierte, überlappende Abschnitte einer einzigen Seite, von oben nach unten sortiert. Beurteile sie als eine Seite.“ Die meisten Chat-Oberflächen nehmen mehrere Bilder pro Nachricht an, so bleibt es bei einem Gespräch und einer Kritik.

Wofür sich dieser Ablauf noch eignet

Design-Analyse ist die naheliegende Anwendung, aber dieselbe Aufnahme ist die Grundlage für viel alltägliche Arbeit.

• Design-Abstimmung mit Kunden: die Aufnahme der ganzen Seite mit Pfeilen und Notizen beschriften, statt Abschnitte in einer E-Mail zu beschreiben.
• Wettbewerbsanalyse: einen Ordner mit Aufnahmen der ganzen Seiten von Mitbewerbern anlegen und von einem Modell zusammenfassen lassen, wie sich jeder positioniert.
• Screenshot to Code: einem KI-Builder eine Aufnahme der ganzen Seite als Ausgangspunkt für Struktur und Layout geben und danach im Browser verfeinern. Behandle das Ergebnis als ersten Entwurf, nicht als fertige Umsetzung.
• Fehlerberichte: Ein Bild der ganzen kaputten Seite schlägt fünf Ausschnitte, weil die prüfende Person den Zustand von allem rund um den Fehler sieht.
• Dokumentation und Übergabe: einen kompletten Ablauf Seite für Seite aufnehmen und beim Ticket ablegen.
• Archivierung: ein PNG oder PDF der ganzen Seite, so wie sie an einem bestimmten Tag aussah, nützlich für Preisseiten, AGB und Angebote.

Die Aufnahme selbst bleibt auf deinem Gerät

GoFullScreenshot scrollt, setzt zusammen, bearbeitet und exportiert vollständig in deinem Browser. Im Ablauf gibt es keinen Server, kein Konto, keine Analyse-Tools in der Erweiterung und keine hochgeladene Kopie deiner Seite.

Das ist gerade deshalb wichtig, weil der nächste Schritt in diesem Ablauf ein KI-Dienst ist. Du entscheidest, welches Bild dein Gerät verlässt, und zwar nachdem du es schwärzen konntest. Diese Entscheidung trifft die Erweiterung nie für dich.