De magiske kreftene i HTML

Ber du en AI-agent om et dokument, får du ofte en markdown-fil eller et langt chatsvar som beskriver det du ba om. Ber du om HTML, kan du få selve siden, en du kan dra i, gå gjennom og beholde. Ordene du legger til, avgjør hvilken av de to du får.

Det gjelder stort sett alle AI-verktøyene. Claude, ChatGPT, Copilot og Gemini kan alle lage en HTML-side rett i chatten. Claude kaller det en artifact, ChatGPT viser den som en kodeblokk med Preview, Microsoft 365 Copilot bygger den i en Copilot Page og Gemini i Canvas. Agenter som Claude Code og Claude Cowork skriver den som en fil i mappen din. Denne guiden handler om kreftene en side har, og om ordene som henter dem fram.

# Q4 på én side

Omsetning **opp 12 prosent**
- Nå
- Forslag

<h1>Q4 på én side</h1>
<input type="range">
<button>Sammenlign</button>

Hva du ber om

En AI-agent gir deg det du ber om. Utfordringen er at de fleste ikke vet hva de skal be om.

AI-agenten kan allerede bygge en side med glidebrytere, faner og steg. Den gjør det bare når du ber om det. Forskjellen mellom et svar du skummer og en side du beholder, er ofte de siste tre ordene i prompten.

Det er fraser som legg til glidebrytere, gjør det til en veiviser, gjør det interaktivt og ikke så overveldende. Ingenting teknisk, bare det du vil ha endret.

Hvorfor HTML

Thariq Shihipar hos Anthropic argumenterte for dette i The unreasonable effectiveness of HTML. Siden hans med eksempler viser det bedre enn jeg klarer med et avsnitt til. Det han lar stå åpent, er hvilke ord du skal skrive, og det er resten av denne guiden.

AI-agenten velger prosa fordi det er prosa den blir bedt om. Ordene på slutten av prompten er det som får den til å bygge noe annet.

Sju krefter, og hva du sier

La meg dra i det. Legg til glidebrytere, legg til et filter, la meg endre forutsetningene. Den legger tallene i modellen på glidebrytere, så du kan endre dem og se resultatet oppdatere seg.

Ta meg gjennom det. Gjør det til en veiviser, ett steg om gangen, still meg spørsmålene først. Den deler beslutningen opp i ett spørsmål om gangen, der neste spørsmål bygger på svaret før.

Fire ting til du kan be om

Vis meg mindre. Ikke så overveldende, én skjerm, legg detaljene bak en bryter. Den holder hovedpoenget synlig og resten et klikk unna.

Vis meg flere. Gi meg tre retninger, side om side. Den gir deg tre versjoner ved siden av hverandre, så du kan sammenligne og velge én.

Gjør det verdt å se på. Gjør det magisk, få det til å føles levende. Den legger til bevegelse og timing, så siden reagerer når du tar i den.

La meg beholde det. Én fil jeg kan sende, gjør den utskriftsvennlig. Den legger alt i én fil du kan sende videre eller skrive ut.

Interaktivt eller levende

Jeg har brukt to av disse som om de var samme instruks, og jeg begynner å tro at de drar i hver sin retning.

Gjør det interaktivt ber om kontroller. Jeg får knapper, faner og felt, noen ganger flere av dem enn ideen trengte.

Få det til å føles levende ber om respons. Jeg får bevegelse, timing og tilstand, som regel med færre kontroller, ikke flere.

Neste gang du ber om interaktivt og får et kontrollpanel du ikke ville ha, er det kanskje den andre frasen du egentlig var ute etter.

HTML er god til å fortelle historier

Noen poenger må komme ett om gangen. Et dokument kan ikke holde den andre ideen tilbake til den første har landet. En side kan, fordi nettleseren vet hvor langt du har scrollet. De lange sakene avisene bygger slik, med grafer som tegner seg mens du scroller, er HTML og ingenting mer.

Led meg gjennom poenget. Gjør det til en historie jeg scroller gjennom, la figuren tegne seg mens jeg scroller. Den viser argumentet én idé om gangen, i den rekkefølgen du bestemmer.

Hvordan virker kontekstvinduet i AI-agenter?

Det er én fil. Glasset, de åtte scenene og måten den scroller på ligger i den ene filen, og den åpnes på hvilken som helst laptop uten at du trenger å installere noe.

Bare gi feedback

Ikke prøv å si alt i den første prompten. Be om siden, se på den, og si hva som ikke stemmer. Hver runde er noen få ord til, og hver runde løfter det som kommer tilbake.

Den første versjonen er enkel og gir deg litt for mye. Legg til glidebrytere gir deg tallene i hendene. Gjør det til en veiviser deler listen opp i steg. Ikke så overveldende tar bort det du ikke trengte. Siden du ender opp med, er formet av tilbakemeldingene dine, én runde om gangen.

Når du har siden du vil ha, be AI-agenten om å gjøre den om til en skill. Rundene du nettopp gikk gjennom, blir utgangspunktet neste gang, så den første versjonen starter der denne endte.

Vi sier det samme på kursene våre. Det vi bidrar med, er smak, og smak brukes runde for runde. Legg gjetningene på glidebrytere, så finner du ut hvilke av dem du tror på. Gå gjennom beslutningen steg for steg, så merker du steget du hoppet over. Du sjekker din egen tenkning på en side du kan peke på.

Hva du gjør i morgen

Ta én ting du ba en AI-agent om denne uken, noe som kom tilbake som tekst og var greit nok, og be om det igjen med tre ord til på slutten. Samme oppgave, bare med en annen slutt.

Merker du at du skriver de samme ordene på slutten hver gang, gjør den om til en skill.

Det klareste eksempelet jeg kjenner, kommer fra Thariq Shihipar igjen. I et innlegg på X delte han ELI5. Skillen ligger i Anthropics eget plugin-bibliotek, og du starter den med /eli5 og det du vil ha forklart. Hele skillen hviler på én setning.

explain like I'm someone who knows nothing about this topic, using a HTML artifact with big pictures and few words

Gå og lag noen skikkelig gode HTML-sider.