AI-feedback op je website via een screenshot van de hele pagina

Waarom een screenshot van alleen het venster slechte AI-invoer is

Een taalmodel redeneert alleen over wat in de afbeelding staat. Geef het een screenshot van het zichtbare venster van een landingspagina en het ziet een hero-sectie, verder niets. Het antwoordt toch vol zelfvertrouwen, want zo werken deze modellen, maar het advies gaat over een fragment van een pagina waarvan het de rest niet kent.

Een opname van de hele pagina haalt dat giswerk weg. Het model krijgt de hero, de social proof, de functieblokken, de prijstabel en de footer in één afbeelding, in precies de volgorde waarin een bezoeker ze tegenkomt. Om die volgorde draait het grootste deel van ontwerpfeedback: wat komt eerst, wat herhaalt zich, waar heeft het oog niets om zich aan vast te houden en waar staat de volgende call-to-action.

Het voorkomt ook een hele categorie verkeerde antwoorden. Vraag je op basis van alleen het zichtbare deel of je call-to-action duidelijk genoeg is, dan kan het model niet weten dat er verderop nog vier knoppen met hem concurreren.

Het stappenplan

Als de extensie eenmaal is geïnstalleerd, duurt dit nog geen minuut.

1. 1

   Laat de pagina volledig laden

   Scrol op pagina's met lazy loading of met secties die pas bij het scrollen verschijnen, één keer naar beneden en weer terug naar boven. Wat de browser nog niet heeft weergegeven, kan niet worden vastgelegd, en een halflege opname levert halfbruikbare feedback op.

2. 2

   Leg de hele pagina vast

   Druk op de voorgestelde sneltoets Alt+Shift+S (Option+Shift+S op een Mac), of klik op het icoon in de werkbalk en kies ‘Full page’. De pagina scrolt vanzelf, elk deel wordt vastgelegd en samengevoegd tot één hoge afbeelding, en het resultaat opent in een nieuw tabblad.

3. 3

   Scherm eerst alles af wat privé is

   Staan er klantnamen, facturen, e-mailadressen of interne gegevens op de pagina, vervaag of bedek ze dan in de ingebouwde editor voordat de afbeelding je computer verlaat. Wat je naar een AI-dienst uploadt, valt onder de voorwaarden van die dienst, niet onder die van jou.

4. 4

   Exporteer als PNG

   PNG is verliesvrij, dus de randen van letters en dunne lijnen blijven scherp en het model hoeft geen JPEG-artefacten te ontcijferen. Gebruik JPEG of WebP alleen als je tegen een uploadlimiet aanloopt.

5. 5

   Upload en stel een concrete vraag

   Sleep het bestand naar ChatGPT, Claude, Gemini, Copilot of je AI-bouwtool. Een vage prompt geeft een vaag antwoord, dus noem een doel: “Dit is de volledige homepage van een B2B-SaaS-product. Beoordeel de visuele hiërarchie, de consistentie van de witruimte en of de belangrijkste call-to-action van boven tot onder duidelijk blijft. Geef concrete verbeteringen, de belangrijkste eerst.”

Prompts die bruikbare AI-feedback op je website opleveren

De screenshot is de context; de prompt bepaalt of je kritiek krijgt of een compliment. Geef het model een rol, een doelgroep en één aspect om te beoordelen.

• Hiërarchie: “Loop deze pagina sectie voor sectie door en vertel per sectie waar het oog als eerste op valt. Waar breekt de hiërarchie?”
• Consistentie: “Noem elke inconsistentie in witruimte, kopgroottes, knopstijlen en afgeronde hoeken die je op de hele pagina ziet.”
• Conversiepad: “Ik verkoop een Chrome-extensie. Volg het pad van de bovenkant van deze pagina naar de installatieknop en noem elk punt waar een bezoeker kan afhaken.”
• Tekst: “Herschrijf de kop en de eerste alinea van elke sectie zo dat een nieuwe bezoeker het product binnen vijf seconden begrijpt.”
• Vergelijking: upload je eigen opname van de hele pagina en die van een concurrent, en vraag welke van de twee het product sneller uitlegt en waarom.
• Signalen voor toegankelijkheid: “Wijs alle tekst op deze pagina aan waarvan het contrast met de achtergrond te laag lijkt om prettig te lezen.”

Wat een AI wel en niet kan beoordelen aan een screenshot

Als je de grenzen kent, wordt deze werkwijze pas echt nuttig. Een afbeelding is een weergave, niet de pagina zelf.

• Betrouwbaar: visuele hiërarchie, volgorde van secties, ritme van de witruimte, uitlijning, duidelijke inconsistenties, helderheid van koppen en tekst, of een call-to-action opvalt, hoe vol de indeling is en zichtbare contrastproblemen.
• Niet betrouwbaar: exacte kleurwaarden en contrastverhoudingen (het model schat op basis van pixels en leest je CSS niet), namen van lettertypen, laadsnelheid, hover- en focusstatussen, animaties, toetsenbordnavigatie, gedrag met schermlezers en hoe de pagina zich op andere breedtes gedraagt.
• Onmogelijk: zien of echte gebruikers converteren. Een review van een screenshot is een heuristische beoordeling, geen gebruikerstest en geen toegankelijkheidsaudit.
• Praktische tip: leg dezelfde pagina vast op desktop- en mobiele breedte en upload beide. De meeste problemen met de indeling zie je pas in de vergelijking.

Heel lange pagina's: waarom AI-uploads mislukken en hoe je dat oplost

Een lange marketing- of documentatiepagina kan 15.000 pixels hoog zijn. Upload je die als één afbeelding, dan kan de dienst het bestand weigeren of de afbeelding verkleinen tot de lopende tekst onleesbaar is.

De oplossing is niet met de hand bijsnijden. Exporteer de opname als genummerde delen van 3000, 4000 of 5000 pixels met 160 pixels overlap. Die overlap doet ertoe: zonder overlap kunnen een kop en de alinea die erbij hoort aan weerszijden van een snede belanden, en dan leest het model ze als twee losse onderdelen.

Upload de delen daarna op volgorde en zeg dat in de prompt: “Dit zijn genummerde, overlappende delen van één pagina, van boven naar beneden. Beoordeel ze als één pagina.” De meeste chatomgevingen accepteren meerdere afbeeldingen per bericht, zodat je één gesprek en één beoordeling houdt.

Waar deze werkwijze nog meer goed voor is

Ontwerpanalyse is de voor de hand liggende toepassing, maar dezelfde opname is de basis voor veel dagelijks werk.

• Ontwerpreview met klanten: zet pijlen en notities op de opname van de hele pagina in plaats van secties in een e-mail te beschrijven.
• Concurrentieanalyse: bewaar een map met opnamen van hele pagina's van concurrenten en laat een model samenvatten hoe elk van hen zich positioneert.
• Screenshot naar code: geef een opname van de hele pagina aan een AI-bouwtool als vertrekpunt voor structuur en indeling, en werk het resultaat daarna in de browser verder uit. Behandel de uitkomst als eerste versie, niet als eindproduct.
• Bugmeldingen: één afbeelding van de hele kapotte pagina is beter dan vijf uitsneden, omdat de beoordelaar ziet in welke staat alles rond de bug is.
• Documentatie en overdracht: leg een complete flow pagina voor pagina vast en bewaar die bij het ticket.
• Archivering: een PNG of PDF van de hele pagina zoals die er op een bepaalde dag uitzag, handig voor prijspagina's, voorwaarden en offertes.

De opname zelf blijft op je eigen computer

GoFullScreenshot scrolt, voegt samen, bewerkt en exporteert volledig in je browser. Er zit geen server tussen, er is geen account, de extensie bevat geen analytics en er bestaat geen geüploade kopie van je pagina.

Dat is juist belangrijk omdat de volgende stap in deze werkwijze een AI-dienst is. Jij bepaalt welke afbeelding je apparaat verlaat, nadat je de kans hebt gehad om hem af te schermen. De extensie neemt die beslissing nooit voor je.