Agentic Canvas: ontwerpen met AI-agents9 min read

AI-agenten kunnen binnen enkele minuten een website genereren. Dan wil je een knop verplaatsen, twee lay-outs vergelijken, een paar screenshots maken of zelf de afstand aanpassen. Plotseling ben je weer bezig met het uitleggen van een visuele wijziging in een andere prompt. Soms is het makkelijker om te slepen dan om te prompten.

Daarom hebben we Agentic Canvas van AgentGrid.io gebouwd. Het is een gratis AI-ontwerpcanvas waar jij en een MCP-capabele agent werken op dezelfde echte HTML- en CSS-pagina. Breng HTML binnen, begin met een ontwerp of afbeelding, of vraag je agent om een pagina te bouwen. Selecteer dan, verplaats, vergroot en bewerk wat het heeft gemaakt. Je kunt Agentic Canvas openen zonder een account aan te maken.

Hier is een eenvoudige manier om het te gebruiken: haal een HTML-pagina of afbeelding, rangschik en bewerk het visueel, vraag Claude of ChatGPT om een animatie of interactie te verfijnen, en exporteer dan de HTML. Je kunt op elk moment met de hand instappen in plaats van een nieuwe prompt helemaal opnieuw te beginnen.

Wat is Agentic Canvas?

Het is een visuele werkruimte voor het ontwerpen van echte webpagina’s met een AI-agent. Het canvas heeft bekende frames, lagen, een inspector en layout-elementen, maar de frames zijn code-gebaseerd in plaats van statische afbeeldingen. Een agent die via MCP verbinding maakt, kan de huidige pagina lezen en wijzigingen aanbrengen. Je ziet het resultaat, past het handmatig aan en laat de agent doorgaan vanaf het bijgewerkte ontwerp.

Zie het als een plek waar de persoon die ziet wat gerepareerd moet worden en de agent die de code kan schrijven aan hetzelfde werken.

Waarom we een canvas nodig hadden voor AI-agenten

1. Visuele samenwerking zonder een andere prompt-lus

Als je met Claude of ChatGPT een landingspagina, productscherm of marketingmateriaal maakt, is de eerste versie pas het begin. Misschien wil je drie varianten van de hero-sectie, een strakker raster of een andere oproep tot actie. Elke visuele keuze in een chat beschrijven kost tijd, zeker als je al precies weet wat je wilt veranderen.

In Canvas kun je die wijziging direct doorvoeren. De agent kan dan de pagina lezen zoals die nu bestaat, niet een mondelinge beschrijving van een versie die al is veranderd. Hij doet het zware werk, jij doet de laatste beslissingen met de hand, en hij gaat verder waar je gebleven was.

2. Een plek om visuele context te verzamelen

Sommige ideeën beginnen als een moodboard, niet als een specificatie. Verzamel screenshots, referentiepagina’s, afbeeldingen en tekst, rangschik ze ruimtelijk en voeg het materiaal toe dat helpt uitleggen wat je probeert te maken. Een AI-agent kan werken vanuit het ontwerp voor je in plaats van te gokken uit een lange chatgeschiedenis.

Dat is belangrijk voor merkwerk. Een layoutreferentie, een stuk tekst en een screenshot kunnen sneller een intentie communiceren dan een andere alinea over de gewenste sfeer.

3. Waarom het canvas echte HTML en CSS gebruikt

Waarom een ontwerptool bouwen op HTML en CSS? Omdat codeeragenten al vloeiend code lezen en schrijven. Voor mij is het vragen van een agent om een apart ontwerpformaat te gebruiken alsof je een native Engels spreker vraagt om in het Engels te denken maar Chinees te lezen en te schrijven. De extra vertaling kan details verliezen en kost tijd en tokens. Ik heb eerder betoogd dat design code is. Hier is dat idee letterlijk.

Met Agentic Canvas is een frame een echte pagina, automatische lay-out wordt gekoppeld aan CSS flexbox, en grids zijn CSS-grids. Je kunt een knop visueel bewerken, je agent vragen een animatie of interactie toe te voegen, en de code exporteren wanneer je er klaar voor bent. Livepagina’s kunnen scripts, hover-states en responsief gedrag op het canvas uitvoeren. Dit is geen afbeelding die je later opnieuw hoeft te maken.

Hoe verschilt dit van een conventioneel ontwerpdoek?

Een conventioneel ontwerpcanvas is nuttig voor het samenstellen van een visueel idee, maar het resultaat heeft vaak een aparte implementatiestap nodig voordat het een werkende webpagina wordt. Agentic Canvas is een HTML-ontwerptool: een frame is een echte pagina, zodat een agent dezelfde HTML en CSS kan lezen en wijzigen die je visueel bewerkt. Dat betekent niet dat het overeenkomt met elke functie van een volwassen ontwerpsuite. Het punt is om visuele beslissingen en werkende code samen te houden, of je nu een AI-gegenereerde website verfijnt of een nieuwe maakt.

Hoe ontwerp je een website met Claude of ChatGPT op Agentic Canvas

1. Begin met wat je hebt. Open het canvas en plak HTML, kopieer en plak vanuit Figma, haal afbeeldingen of ontwerpen binnen, of begin met een door agenten gegenereerde pagina. De importgids vermeldt de ondersteunde startpunten.
2. Verbind je agent. Kies AI-agenten en voeg vervolgens een agent toe aan het canvas. Volg de verbindingsgids voor Claude, ChatGPT of een andere MCP-capabele client. Houd het canvas-tabblad open terwijl de agent werkt.
3. Maak samen een eerste ronde. Vraag om een layout of interactie, en inspecteer dan het live resultaat op het canvas.
4. Neem visueel de controle. Verplaats elementen, verander kleuren, verander een frame en stel de lay-out met de hand af. Vraag de agent om verder te gaan vanaf de nieuwste versie.
5. Exporteer of deel wanneer je klaar bent. Exporteer HTML of een ander ondersteund formaat zonder te publiceren. Als je een gehoste link wilt, deel of publiceer dan via AgentGrid.io. Die cloudstap is optioneel en vereist een account.

Wat blijft lokaal en wat vereist een account?

Je kunt gratis in je browser gaan ontwerpen, zonder je aan te melden. Je bestanden staan in die browser op dat apparaat, niet in een automatische back-up van meerdere apparaten. Exporteer een kopie van het werk dat je buiten de browser wilt houden. Door een externe agent te verbinden, kan hij het canvas lezen en een netwerkverbinding gebruiken, dus lokaal betekent niet offline. Delen of publiceren via AgentGrid.io is optioneel en vereist een account.

Ik geloof dat de volgende ontwerptool ons niet moet dwingen te kiezen tussen visuele controle en een agent die kan bouwen. De agent moet de moedertaal van het werk spreken, en we moeten nog steeds het object op het scherm kunnen pakken en veranderen.

Open Agentic Canvas en probeer samen met je agent te ontwerpen. Voor een snelle blik op de workflow, bekijk de lanceringsdemo en bekijk de functies.

Vragen over Agentic Canvas

Is Agentic Canvas gratis en heb ik een account nodig?

Ja, het ontwerpcanvas is gratis. Open het in je browser en begin met ontwerpen zonder account. Een AgentGrid.io-account is alleen nodig als je ervoor kiest om te delen of te publiceren via AgentGrid.io.

Welke AI-agenten werken met Agentic Canvas?

Claude, ChatGPT, Claude Code, Codex, Cursor en andere MCP-geschikte agenten kunnen het open canvas lezen en wijzigen. Kies AI-agenten en voeg vervolgens een agent toe om de verbindingsstappen te volgen. Houd het canvas-tabblad open terwijl je agent werkt.

Kan ik een door AI gegenereerde website visueel bewerken?

Ja. Importeer de HTML-pagina of een webwebsitemap, en verplaats, vergroot, verklein en verfijn de elementen op het canvas. De frames zijn echte HTML en CSS, dus een agent kan voortbouwen op je visuele wijzigingen in plaats van een statische mock-up opnieuw te maken.

Kan ik een bestaande HTML-pagina of website importeren?

Ja. Plak HTML in het canvas, of sleep een webwebsitemap of het ZIP-bestand ervan naar Home. Je kunt ook beginnen met een Figma-selectie of een afbeelding.

Waar worden mijn canvasbestanden opgeslagen? Zijn ze geback-upt?

Ze worden lokaal opgeslagen in de browser en het apparaat dat je gebruikte, zonder automatische cloudback-up. Een andere browser of apparaat zal ze niet zien. Exporteer een kopie van belangrijk werk, of kies AgentGrid.io delen als je cloud-backup en versiegeschiedenis wilt.

Kan mijn AI-agent op het canvas werken nadat ik het tabblad heb gesloten?

Nee. Het canvas-tabblad moet open blijven terwijl een verbonden agent het ontwerp leest of verandert. Je kunt later terugkeren naar je lokaal opgeslagen bestanden in dezelfde browser.

Geeft het verbinden van een agent ook toegang tot mijn AgentGrid.io werkruimte?

Nee. Een agent koppelen aan het canvas laat het werken op de open canvasbestanden. Het koppelen van die agent aan AgentGrid.io artefacten is een aparte stap.

Kan ik exporteren zonder te publiceren?

Ja. Exporteer HTML, PNG, SVG of PDF zonder te delen of te publiceren. Je kunt de HTML aan een programmeeragent geven om elders verder te bouwen.

Is delen hetzelfde als publiceren?

Nee. Delen via AgentGrid.io geeft toegang tot de mensen en agenten die je kiest; publicatie plaatst het ontwerp op een openbaar webadres. Beide zijn optioneel en vereisen een AgentGrid.io account.