Agentic Canvas: design med AI-agenter9 min read

AI-agenter kan lage et nettsted på få minutter. Så vil du flytte en knapp, sammenligne to oppsett, samle noen skjermbilder eller justere avstanden selv. Plutselig må du forklare en visuell endring i enda en prompt. Noen ganger er det enklere å dra enn å skrive en ny prompt.

Det er derfor vi bygde Agentic Canvas av AgentGrid.io. Det er et gratis AI-designlerret der du og en MCP-kompatibel agent jobber på den samme ekte HTML- og CSS-siden. Ta inn HTML, start med et design eller bilde, eller be agenten din bygge en side. Deretter kan du velge, flytte, endre størrelse på og redigere det agenten laget. Du kan åpne Agentic Canvas uten å opprette en konto.

Her er en enkel måte å bruke det på: ta inn en HTML-side eller et bilde, ordne og rediger det visuelt, be Claude eller ChatGPT om å avgrense en animasjon eller interaksjon, og eksporter deretter HTML-en. Du kan gå inn for hånd når som helst i stedet for å starte en ny melding fra bunnen av.

Hva er Agentic Canvas?

Det er et visuelt arbeidsområde for å designe ekte nettsider med en AI-agent. Lerretet har kjente rammer, lag, en inspektør og layoutkontroller, men rammene er kodebaserte i stedet for statiske bilder. En agent som kobler til via MCP kan lese gjeldende side og gjøre endringer. Du ser resultatet, justerer det for hånd, og lar agenten fortsette fra det oppdaterte designet.

Tenk på det som et sted der personen som ser det som må fikses og agenten som kan skrive koden jobber med det samme.

Hvorfor vi trengte et lerret for AI-agenter

1. Visuelt samarbeid uten en ny runde med prompter

Når du lager en landingsside, produktskjerm eller markedsføringsmateriell med Claude eller ChatGPT, er det første utkastet bare begynnelsen. Kanskje vil du ha tre varianter av toppseksjonen, et tettere rutenett eller en annen handlingsoppfordring. Å beskrive hver visuelle beslutning i chat tar tid, særlig når du allerede vet nøyaktig hva du vil endre.

I Agentic Canvas kan du gjøre endringen direkte. Agenten kan så lese siden slik den faktisk ser ut nå, i stedet for en muntlig beskrivelse av en versjon som allerede er endret. Den gjør grovarbeidet, du tar de siste valgene selv, og den fortsetter der du slapp.

2. Et sted å samle visuell kontekst

Noen ideer begynner som et inspirasjonsbrett, ikke en spesifikasjon. Samle skjermbilder, referansesider, bilder og tekst, plasser dem i rommet og legg til materialet som forklarer hva du prøver å lage. En AI-agent kan jobbe ut fra designet foran deg i stedet for å gjette fra en lang samtalehistorikk.

Det er viktig i merkevarearbeid. En layoutreferanse, en tekstbit og et skjermbilde kan formidle hensikten raskere enn enda et avsnitt om stemningen du ønsker.

3. Hvorfor lerretet bruker ekte HTML og CSS

Hvorfor bygge et designverktøy på HTML og CSS? Fordi kodeagenter allerede leser og skriver kode flytende. For meg er det å be en agent jobbe i et eget designformat som å be en person med engelsk som morsmål tenke på engelsk, men lese og skrive kinesisk. Oversettelsen kan miste detaljer og koster både tid og tokens. Jeg har tidligere argumentert for at design er kode. Her er den ideen bokstavelig.

Med Agentic Canvas er en ramme en ekte side, automatisk layout tilsvarer CSS flexbox, og rutenett er CSS-rutenett. Du kan redigere en knapp visuelt, be agenten legge til en animasjon eller interaksjon og eksportere koden når du er klar. Levende sider kan kjøre skript, hover-tilstander og responsiv oppførsel på lerretet. Dette er ikke et bilde du må bygge på nytt senere.

Hvordan er dette forskjellig fra et konvensjonelt designlerret?

Et vanlig designlerret er nyttig for å sette sammen en visuell idé, men resultatet trenger ofte et eget implementeringstrinn før det blir en fungerende nettside. Agentic Canvas er et HTML-designverktøy: En ramme er en ekte side, slik at en agent kan lese og endre den samme HTML-en og CSS-en som du redigerer visuelt. Det betyr ikke at verktøyet har alle funksjonene i en etablert designpakke. Poenget er å holde visuelle beslutninger og fungerende kode samlet, enten du videreutvikler et AI-generert nettsted eller lager et nytt.

Hvordan designe en nettside med Claude eller ChatGPT på Agentic Canvas

1. Begynn med det du har. Åpne lerretet og lim inn HTML, kopier og lim inn fra Figma, ta inn bilder eller design, eller start med en side laget av en agent. Importveiledningen viser hvilke utgangspunkter som støttes.
2. Koble til agenten din. Velg AI-agenter, deretter Legg til en agent i lerretet. Følg veiledningen for tilkobling for Claude, ChatGPT eller en annen MCP-kompatibel klient. Hold lerretsfanen åpen mens agenten arbeider.
3. Gjør et første pass sammen. Be om et oppsett eller en interaksjon, og inspiser deretter liveresultatet på lerretet.
4. Ta kontroll visuelt. Flytt elementer, endre farger, endre størrelse på en ramme og juster oppsettet for hånd. Be agenten om å fortsette fra den nyeste versjonen.
5. Eksporter eller del når du er klar. Eksporter HTML eller et annet støttet format uten å publisere. Hvis du vil ha en vertskobling, del eller publiser gjennom AgentGrid.io. Det sky-trinnet er valgfritt og krever en konto.

Hva forblir lokalt, og hva krever en konto?

Du kan begynne å designe gratis i nettleseren uten å registrere deg. Filene dine ligger i nettleseren på denne enheten, ikke i en automatisk sikkerhetskopi på tvers av enheter. Eksporter en kopi av arbeid du vil bevare utenfor nettleseren. Når du kobler til en ekstern agent, kan den lese lerretet, og tilkoblingen bruker nettverket. Lokalt betyr altså ikke frakoblet. Deling eller publisering gjennom AgentGrid.io er valgfritt og krever en konto.

Jeg mener at det neste designverktøyet ikke bør tvinge oss til å velge mellom visuell kontroll og en agent som kan bygge. Agenten bør snakke arbeidets eget språk, mens vi fortsatt skal kunne gripe tak i det som vises på skjermen og endre det.

Åpne Agentic Canvas og prøv å designe med agenten din. For en rask titt på arbeidsflyten, se lanseringsdemoen og utforsk funksjonene.

Spørsmål om Agentic Canvas

Er Agentic Canvas gratis, og trenger jeg en konto?

Ja, designlerretet er gratis. Åpne det i nettleseren og begynn å designe uten konto. Du trenger bare en AgentGrid.io-konto hvis du velger å dele eller publisere gjennom AgentGrid.io.

Hvilke AI-agenter jobber med Agentic Canvas?

Claude, ChatGPT, Claude Code, Codex, Cursor og andre MCP-kompatible agenter kan lese og endre det åpne lerretet. Velg AI-agenter og deretter Legg til en agent for å følge tilkoblingstrinnene. Hold lerretsfanen åpen mens agenten din jobber.

Kan jeg redigere et AI-generert nettsted visuelt?

Ja. Ta inn HTML-siden eller en nettstedsmappe, flytt, endre størrelse og avgrens elementer på lerretet. Rammene er ekte HTML og CSS, slik at en agent kan fortsette fra dine visuelle redigeringer i stedet for å gjenoppbygge en statisk mockup.

Kan jeg importere en eksisterende HTML-side eller nettside?

Ja. Lim inn HTML på lerretet, eller slipp en nettstedsmappe eller ZIP-filen på Home. Du kan også starte med et utvalg fra Figma eller et bilde.

Hvor er lerretsfilene mine lagret? Er de sikkerhetskopiert?

De lagres lokalt i nettleseren og enheten du brukte, uten automatisk sikkerhetskopiering av skyen. En annen nettleser eller enhet vil ikke se dem. Eksporter en kopi av viktig arbeid, eller velg AgentGrid.io-deling hvis du vil ha sikkerhetskopiering i skyen og versjonshistorikk.

Kan AI-agenten min jobbe på lerretet etter at jeg lukker fanen?

Nei. Lerretsfanen må forbli åpen mens en tilkoblet agent leser eller endrer designet. Du kan gå tilbake til de lokalt lagrede filene dine i samme nettleser senere.

Gir tilkobling av en agent den også tilgang til AgentGrid.io-arbeidsområdet mitt?

Nei. Ved å koble en agent til lerretet kan den fungere på de åpne lerretsfilene. Å koble den agenten til AgentGrid.io-artefakter er et eget trinn.

Kan jeg eksportere uten å publisere?

Ja. Eksporter HTML, PNG, SVG eller PDF uten å dele eller publisere. Du kan levere HTML-en til en kodeagent for å fortsette å bygge andre steder.

Er deling det samme som publisering?

Nei. Deling gjennom AgentGrid.io gir tilgang til personene og agentene du velger; publisering setter designet på en offentlig nettadresse. Begge er valgfrie og krever en AgentGrid.io-konto.