De magiske kreftene i HTML

Ber du en AI-agent om et dokument, får du et chatsvar, en markdown-fil eller Word og PowerPoint hvis du ber om det. Ber du om HTML, får du en nettside du kan klikke i, justere og dele. Noen få ord i prompten avgjør hva du får.

De fleste AI-verktøyene kan lage en HTML-side. Claude lager den som artifact, ChatGPT med Preview, Copilot i Copilot Pages og Gemini i Canvas. Claude og ChatGPT lager også visualiseringer rett i svaret, noen ganger uten at du ber om det. Hvordan det fungerer, endrer seg stadig. Denne guiden handler om kreftene en side har, og om ordene som henter dem fram.

# Q4 på en side

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

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

Tre ord

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.

Hva du sier

Gjør det interaktivt. 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. Dataanalyse og dashboards med Claude Code bygger denne typen side fra et regneark du oppdaterer hver måned.

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 til

Vis meg mindre. Ikke så overveldende, en 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 en.

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. En fil jeg kan sende, gjør den utskriftsvennlig. Den legger alt i en 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.

Fortell en historie

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 en idé om gangen, i den rekkefølgen du bestemmer.

Hvordan virker kontekstvinduet i AI-agenter?

Det er en 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, en 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å.

Prøv i morgen

Ta en 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å en 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.