Jeg skulle lave Chili Con Carne den anden dag. En ret jeg har lavet mange gange, men jeg har det bedst med at følge en opskrift. Denne gang fra Valdemarsro.
Og som alle der har brugt en online opskrift ved: det er aldrig bare at følge opskriften.
De tre irritationsmomenter
Hvis du nogensinde har stået i et køkken med telefonen i den ene hånd og en grydeske i den anden, kender du det:
Indkøb er et puslespil. Opskriften lister ingredienser i den rækkefølge de bruges – ikke i den rækkefølge du finder dem i Netto. Har jeg spidskommen? Har jeg dåsetomater nok? Frem og tilbage mellem skærmens ingrediensliste og mine skabe.
Scrolle-helvede under madlavningen. Du er midt i at stege kødet, og skal lige tjekke om det var en halv eller en hel dåse tomat. Scroll op. Find ingrediensen. Scroll ned igen. Find trinnet. Det er den værst tænkelige brugeroplevelse – designet til at læse, ikke til at lave mad.
Ingen klargørelsesfase. De fleste opskrifter hopper direkte til “steg løgene.” Men hvornår skærer jeg dem? Hvad kan forberedes mens noget simrer? En erfaren kok ved det intuitivt. Resten af os improviserer og stresser.
Det er klassiske UX-problemer. Og jeg tænkte: kan AI løse dem?
Eksperimentet: en system prompt og et link
Jeg åbnede en Claude-chat på min iPhone – ikke Claude Code eller Cowork, bare en almindelig samtale med Claude Sonnet 4.6 – og gav den en system prompt jeg havde skrevet på et par minutter.
Idéen var simpel: giv Claude et link til en opskrift, og få den til at bygge en interaktiv app som et artifact direkte i chatten.
Det virker også med en gratis Claude-konto — du behøver ikke betale for at prøve det selv.
Her er prompten:
Når brugeren giver dig et link til en opskrift, skal du:
- Hente opskriften fra URL’en
- Spørge om antal personer skal skaleres
- Bygge et interaktivt React artifact med to faner:
Fane 1 – Indkøbsliste:
- Ingredienser grupperet i kategorier (kød & mejeri, grønt, dåsevarer, krydderier)
- Hver vare kan krydses af
- Progressbar og konfetti når alt er hentet
Fane 2 – Opskrift:
- Trin med ingredienser fremhævet inline med mængder
- Klargørelsestrin FØR selve madlavningen
- Hvert trin kan krydses af
- Tidsmærker ved ventetid
Så gav jeg den linket til Valdemarsro-opskriften. Og det virkede.
Hvad jeg fik
Claude genererede et React artifact – en lille interaktiv webapp der kører direkte i chatten. Ingen installation, ingen app. Bare resultatet.
En kategoriseret indkøbsliste – ikke bare en liste, men grupperet efter Kød & Mejeri, Dåsevarer, Krydderier, Tilbehør. Præcis som du bevæger dig gennem en butik. Hver vare kan krydses af med et tryk, og en progressbar viser hvor langt du er.
Og ja – der er konfetti når alt er i kurven.
Klargørelsestrin – mise en place – noget opskriften slet ikke havde. “Bland krydderierne i en lille skål. Hak hvidløg fint. Hak løg fint.” Alt det du kan gøre klar, inden du tænder for komfuret. Hvert trin har en note om hvornår det bruges i opskriften.
Opskrift med inline-ingredienser – i stedet for at scrolle op for at se mængden, står der direkte i trinnet: “Tilsæt 2 dåser hakkede tomater, 6 spsk soltørrede tomater og 2 dl oksebouillon.” Tidsmærker viser ventetid. Ingen scroll. Ingen hukommelsestest.
Alt sammen som en interaktiv webapp der kører direkte i Claude-chatten. Ingen installation. Ingen app. Bare et link og en prompt.
Hvorfor det er interessant – også hvis du ikke laver Chili Con Carne
Det her handler ikke om madlavning. Det handler om et mønster.
Opskriftsider er designet til at læse – ikke til at bruge. Det er en klassisk UX-fejl: indholdet er rigtigt, men konteksten er forkert. Når du står i køkkenet med våde hænder, er en 2.000 ord lang side med livsstilsbilleder og anekdoter det forkerte format.
Det Claude lavede var i praksis at redesigne informationsarkitekturen for en opskrift. Samme indhold, men struktureret efter brugerens faktiske behov i tre forskellige kontekster:
- I butikken → kategoriseret indkøbsliste
- Før madlavning → klargørelsestrin
- Under madlavning → trinvis opskrift med inline-ingredienser
Det tog under fem minutter. Og det er det egentlige takeaway: AI er ikke kun til at skrive tekst eller generere kode. Den er til at omstrukturere information til den kontekst du har brug for den i.
System prompten (tag den selv)
Her er den prompt jeg brugte – tilpasset så den spørger efter opskriftslinket og tilpasser designet til retten:
Når brugeren giver dig et link til en opskrift, skal du:
- Hente opskriften fra URL’en med dit web-fetch værktøj
- Identificere antal personer og spørge om skalering
- Bygge et interaktivt React artifact med to faner:
Fane 1 – Indkøbsliste:
- Ingredienser grupperet i logiske kategorier
- Hver vare kan krydses af med et klik
- Progressbar der viser hvor mange varer er hentet
- Nulstil-knap og konfetti når alle varer er krydset af
Fane 2 – Opskrift:
- Klargørelsestrin først (skæring, skylning, afmåling)
- Fremgangsmåden i nummererede trin
- Ingredienser fremhævet inline i trinnet med mængder
- Hvert trin kan krydses af
- Tidsmærke ved trin der kræver ventetid
Design: Mørkt tema med farver der passer til retten. Serif-font. Ingen eksterne biblioteker – kun React og inline styles.
Kopiér den ind i en Claude-chat, giv den et link til din yndlingsopskrift, og se hvad der sker – det er ikke sikkert den giver dig samme resultat som det jeg viser her, men så kan du prøve at iterere en smule mere med den, så den bliver til det du ønsker.