Claude Design: guide og fem praktiske scenarier

Praktisk information om at arbejde med Ailoot findes i dokumentationen.

Hvad er Claude Design, og hvorfor kigger alle på den 17. april?#

Fredag den 17. april 2026 lancerer Anthropic Claude Design – et værktøj, der omdanner en tekstbeskrivelse til en fungerende landingsside, en investorspræsentation eller en prototype på en mobilapp. Ikke »endnu en billedgenerator«. Det er Anthropics første forsøg på at fjerne designeren fra de tidlige faser af produktudviklingen.

24 timer senere annoncerede Adobe en Firefly-Claude-connector og positionerede sig som platformspartner. Signalet: Anthropic vandt ikke en produktkrig, men et paradigmeskifte – design bliver nu genereret, og etablerede aktører bliver distributører.

Her undersøges Claude Design fra en vibe coders perspektiv: hvad det kan, hvad det koster, hvordan du bruger det uden en designbaggrund, og hvilke praktiske opgaver det er nyttigt til. Hvis du bygger et produkt uden en intern designer, er denne guide til dig.

Hvad Claude Design kan: 6 typer resultater#

Kort sagt skaber Claude Design design, der tidligere tog en designer 3–5 dage. Med Anthropics ord er der seks typer resultater:

Grænsefladen har to paneler. Chatten med Claude er til venstre, og en liveforhåndsvisning på et canvas er til højre. Processen består af fem trin: projektopsætning, beskrivelse, gennemgang, iterationer og eksport. Claude stiller opfølgende spørgsmål, når prompten er vag, så processen minder mere om at arbejde med en person end med en generator.

Det kan modtage som input:

1. Tekstprompter (det primære anvendelsesområde).
2. Skærmbilleder, billeder og eksisterende aktiver.
3. Dokumenter: DOCX, PPTX, XLSX.
4. En kodebase – via et link til et repository eller ved at importere en lokal mappe.
5. Et snapshot af et eksisterende website via URL.

Eksportformater:

1. PDF.
2. PPTX (PowerPoint).
3. En selvstændig HTML-fil – du kan uploade den som en side med det samme.
4. Overførsel til Canva – den åbnes dér som et fuldt redigerbart projekt.
5. En pakke til Claude Code – med hele designintentionen til udvikling.
6. Del et link inden for din organisation.

Hvad Claude Design ikke gør (vigtigt at få afklaret fra start):

• Det redigerer ikke en kodebase og kører ikke kommandoer – det er Claude Codes opgave.
• Det importerer eller eksporterer ikke .fig-filer – der er ingen indbygget Figma-integration.
• Det erstatter ikke Figma eller Canva.
• Der er ingen aktivitetslog eller administratorrapporter, så værktøjet egner sig ikke til store virksomheder med compliance-krav.
• Der er ingen indbygget videoeksport – animationer kan kun optages som screencast.

Hvordan Claude Design adskiller sig fra Figma, Lovable, v0 og Canva#

I den tilgang, der beskrives her, bruges disse fem værktøjer til forskellige opgaver. Her er en sammenligning fra maj 2026:

Her overgår Claude Design alle andre:

1. Designsystem fra en kodebase. Ingen af konkurrenterne udtrækker automatisk et sæt komponenter fra et repository. v0 kan importere fra Figma, men ikke fra kode.
2. Lukket arbejdsgang med Claude Code. Designintentionen bevares. Lovable og Bolt gør dette i ét værktøj, men designet dér er et biprodukt af koden.
3. Flere resultater fra samme kontekst. Ét brand – landingsside, præsentation, e-mailkampagne, kreativt materiale til sociale medier. De andre laver kun én af disse ting.
4. Du behøver ikke lære en grænseflade. Du behøver ikke lære en grænseflade, som du skal i Figma. Det betyder noget for målgruppen »founders og produktchefer uden designbaggrund« – Anthropics officielle positionering.

Her kommer Claude Design til kort:

1. Ingen komplet integration af database og server. Lovable og Bolt leverer en fungerende app med database, autorisation og publicering. Claude Design leverer kun frontend. For at få samme resultat: Claude Design → Claude Code → Vercel eller en anden host → betalingssystem manuelt. Tre værktøjer i stedet for ét.
2. Ingen .fig-filer. Designere kan ikke tage resultatet ind i Figma – kun via et skærmbillede eller ved at genskabe det.
3. Ingen gratisplan. Alle konkurrenter har en gratisplan. Claude Design fås med Pro og opefter.
4. Finish. Figma dominerer stadig, når det gælder det endelige produktionsklare resultat. Claude Design er til det første udkast.
5. Hastighed til en enkel prototype. Bolt er hurtigere til en helt enkel prototype – den åbner i en browser på få sekunder.

Claude Design er et værktøj til en anden opgave: at lave det første udkast uden en designer, hvorefter det gives videre til andre.

Hvad koster Claude Design, og hvordan tjekker du adgangen?#

Abonnementer og adgang:

Startkreditten gives én gang – en pakke med 20 typiske prompter, gyldig indtil den 17. juli 2026. Det er nok til at oprette 2–3 fulde projekter og afgøre, om Claude Design passer til dig.

Knapperne i grænsefladen er kun på engelsk.

Sådan tilslutter du et designsystem fra din kodebase#

Claude Designs vigtigste konkurrencefordel er rettet mod folk, der allerede har bygget noget. Intet andet værktøj udtrækker automatisk et designsystem fra et repository. Det svarer til Second Brain-tilgangen: du forklarer ikke Claude om dit brand – du giver en henvisning til kilden, og så finder det selv ud af tingene.

5 opsætningstrin:

1. Åbn Claude Design på claude.ai/design og opret et nyt projekt.
2. Vælg en kilde til designsystemet under den indledende opsætning. Tilgængelige muligheder: brand guidelines, frontendkodebase, gamle præsentationer og style guides, et live-website via URL, Figma-filer.
3. Hvis du vælger et repository – angiv et GitHub-link. Claude downloader frontendmappen og analyserer temaindstillinger, stilvariabler, eksisterende komponenter og typografi.
4. Hvis du vælger et live-website – angiv URL'en. Claude tager et snapshot af sidestrukturen og udtrækker farver, skrifttyper samt mønstre for knapper og kort.
5. Bekræft det udtrukne sæt komponenter. Claude viser den udtrukne farvepalet, skrifttyper og grundkomponenter, som du kan redigere, før du gemmer.

Derefter arver hvert nyt projekt i Claude Design automatisk dit designsystem. Det betyder, at den landingsside, du genererer i dag, kommer til at se identisk ud med dit nuværende website.

Prompt til at tjekke designsystemet igen:

Vis mit aktive designsystem i dette projekt: farvepalet, typografi,
grundkomponenter, afstandsmønstre og hjørneradier. Sammenlign det med mit live-
website [URL], og markér alt, der er anderledes.

I tilgangen, der beskrives her, gentages denne kontrol for hver 3.–4. iteration i et projekt. Anthropic advarer åbent i sin annoncering om, at Claude efter flere iterationer kan glemme designsystemet og gå tilbage til standardmønstre. Løsningen er jævnligt at bruge en prompt til at føre den tilbage til dit sæt komponenter. Grundlæggende er det den samme context engineering som i Claude Code: konteksten styres eksplicit, ikke i det skjulte.

Scenarie 1: Landingsside til en produktlancering#

I den erfaring, der beskrives her, er det første resultat af et nyt eksperiment i Claude Design en landingsside. Før: en dags briefing med en designer, efterfulgt af en uges iterationer. Nu: én prompt, en times redigering og færdig HTML.

Promptskabelon:

Opret en landingsside til [PRODUKTNAVN, beskrivelse i én sætning].
Visuel retning: [referencemærke 1] møder [referencemærke 2],
med en [tillægsord] og [tillægsord] tone. Struktur: hero med ét
værditilbud, tre afsnit om fordele, en formular til tilmelding til tidlig adgang,
en FAQ med 5 spørgsmål, sidefod. Brug mit designsystem.

Det får du: En selvstændig HTML-fil med indlejrede styles. Du kan uploade den som en side på dit website eller som et separat projekt på en hvilken som helst host.

Det plejer folk at tjekke og rette efter Claude:

• Den konkrete hero-tekst – Claude er god til struktur, men ikke til at forstå et produkts betydning.
• Billeder – Claude indsætter pladsholdere. Jeg erstatter dem med mine egne eller genererer dem med et separat værktøj.
• Målepunkter og tal – jeg bruger altid de virkelige. Find aldrig på »80 % af vores kunder«.

Tidsbesparelse: 6–8 timers designerarbejde plus en dags frontendudvikling for en typisk landingsside til en lancering. Claude Design laver det første udkast på 40–60 minutter, efterfulgt af en times iterationer.

Scenarie 2: Præsentation til investorer eller partnere#

En præsentation er det andet hovedscenarie: materialer til investorer, en acceleratoransøgning eller en samtale med en partner.

Promptskabelon:

Opret en præsentation på 10 slides til Series A for [Virksomhed],
der bygger [hvad] til [hvem] og har [nøgletal]. Målgruppe:
tidlige B2B SaaS-investorer. Tone: selvsikker, varm, ingen hype. Slides
i denne rækkefølge: titel, problem, løsning, traction (fremhæv målepunktet tydeligt),
produktdemo, markedsstørrelse, forretningsmodel, konkurrenter, team, ønske.

Det får du: En PPTX-fil og en overførsel til Canva. I Canva åbnes filen som et fuldt redigerbart samarbejdsprojekt.

Tid: Spar 6–10 timer sammenlignet med at bygge præsentationen manuelt. Du sparer mest tid på typografifokuserede slides – store overskrifter, minimal visuel støj, alt efter dit designsystem.

Faldgrube: Claude Design genererer statiske slides. Hvis du har brug for animationer, kan du enten tage dem ind i Canva og animere dem dér eller bruge Figma.

Scenarie 3: Klikbar prototype på en mobilapp#

Et praktisk scenarie: Test en hypotese om en mobilapp, før du betaler en udvikler.

Promptskabelon:

Byg en interaktiv onboardingprototype til mobilappen [produkt]
med tre scenarier: tom tilstand, brugerens første handling og øjeblikket,
hvor brugeren får en indsigt. Gør elementerne klikbare til en uovervåget brugertest
via Maze eller Useberry.

Det får du: Et link til prototypen. Du kan sende den direkte til Maze til en test med 5–10 brugere.

Det skal du tjekke:

• Skærmdimensioner – sørg for, at Claude har brugt det rigtige billedformat til iOS/Android.
• Scenariedybe – Claude slår nogle gange komplekse grene sammen til én skærm. Prompten »vis hver gren som en separat skærm« løser det.
• Tilstande – tom, fejl, indlæsning. Den laver dem ikke, medmindre du beder om det.

Tidsbesparelse: 1–2 sprints sammenlignet med at bygge den manuelt i Figma + ProtoPie.

Scenarie 4: Marketingkampagne med 5 enkeltsidede websites#

Et scenarie for folk, der arbejder med betalt trafik: Sammenlign fem værditilbud med samme formular og en ensartet målemetode.

Promptskabelon:

Generér 5 brandede enkeltsidede websites for at teste forskellige værditilbud:
[mulighed 1, mulighed 2, mulighed 3, mulighed 4, mulighed 5].
Hver side skal have en hero med en unik overskrift, et visuelt billede og en call-to-action-
knap, der fører til [DEN SAMME RIGTIGE FORMULAR-URL]. Eksportér hver side som selvstændig HTML.
Eksportér også PDF-forhåndsvisninger og en Canva-mappe til designgennemgang.
Hold CTA-destinationen og målehændelserne ens på alle fem sider.

Det får du: Fem HTML-sideudkast, fem PDF-forhåndsvisninger og en Canva-projektmappe. Forhåndsvisningerne hjælper med at godkende designet; de dokumenterer ikke fungerende landingssider eller konverteringsmåling.

Før du sender trafik:

1. Publicér hver HTML-side på sin egen URL hos din valgte hostingudbyder, eller overdrag den til Claude Code til implementering på dit website.
2. Udskift pladsholdere, og kontrollér hver CTA. Send en harmløs testbesvarelse gennem den fælles formular, og kontrollér, at den når den tilsigtede destination.
3. Giv hver side sin egen kampagne- eller variantetiket. Registrér sidebesøg, CTA-klik og vellykkede formularindsendelser hver for sig, så samme besøgerhandling sammenlignes mellem varianter.
4. Åbn de publicerede URL'er på computer og mobil, kontrollér de registrerede testhændelser, og start først derefter det planlagte trafikforsøg.

Brug: Betalt trafik, e-mailkampagner og test på sociale medier. Sammenlign CTA-klik pr. sidebesøg for klikrate og vellykkede indsendelser pr. besøg for konvertering. En gennemgang i PDF eller Canva alene er en designgennemgang, ikke denne live test.

Faldgrube: Claude Design vælger automatisk billeder fra sine aktiver. Hvis du har brug for bestemte fotos, skal du uploade dem på forhånd.

Scenarie 5: E-mailkampagne til Resend, Mailchimp eller Sendsay#

Enhver masse-e-mailkampagne har brug for en HTML-skabelon med indlejrede styles. Det er en teknisk hovedpine for en marketingmedarbejder uden en frontendudvikler.

Promptskabelon:

Opret en HTML-e-mail-skabelon til [kampagneemne]. Design: mørkt tema,
dit brands primære accentfarve, brandets skrifttyper. Struktur: underoverskrift,
overskrift, 3 afsnit, call-to-action-knap, signatur. Eksportér som
en selvstændig HTML-fil med indlejrede styles og ingen eksterne afhængigheder.

Det får du: En HTML-fil, der er klar til at blive indsat i Resend, Mailchimp, Sendsay eller Unisender.

Det plejer folk at tjekke og redigere:

• Bredde – e-mailklienter foretrækker en fast bredde på 600px.
• Billeder – jeg erstatter linksene med links til mine egne aktiver, der er hostet online.
• Ren tekstversion – Claude Design genererer ikke en; jeg skriver den selv.

Tidsbesparelse: 2–3 timers layoutarbejde pr. skabelon.

Overdragelse til Claude Code: den lukkede arbejdsgang#

I tilgangen, der beskrives her, er denne funktion grund nok til at vælge Claude Design, selv hvis du har Figma. Alle andre designværktøjer overdrager et billede eller en Figma-fil. Derefter ser udvikleren på den og oversætter den »sådan, som vedkommende forstår den«. Det er her, 30–40 % af designintentionen går tabt.

Claude Design leverer en pakke, der ikke kun indeholder det visuelle, men også:

• Komponentstruktur (hvordan komponenterne hænger logisk sammen).
• Logikken bag designbeslutninger (hvorfor afstandene er, som de er, hvorfor hjørneradierne er, som de er, og hvorfor hierarkiet ser sådan ud).
• Responsive ankre – hvor en blok »hæfter« til skærmen ved forskellige størrelser.
• Navngivne stilværdier i stedet for magiske tal.

Claude Code åbner denne pakke direkte og skriver kode, der bevarer intentionen. Det genskaber ikke bare et billede i et layout; det implementerer designlogikken. Det fungerer sammen med dit projekts CLAUDE.md: jo mere præcise reglerne i CLAUDE.md er, desto mindre »driver« Claude Code væk fra den oprindelige intention.

Workflow:

1. I Claude Design – færdiggør designet → klik på »Export to Claude Code«.
2. I Claude Code – åbn projektet → indsæt pakke-ID'et → prompt: »Implementér dette design i src/components/.«
3. Claude Code – læser pakken, forstår mønstrene og skriver komponenter med din nuværende stack (Next.js + Tailwind, Vue, Svelte – hvad end du bruger).
4. Derefter – foretag ændringer enten i koden via Claude Code eller i Claude Design (en ny designiteration), og overdrag det igen.

Det vigtige: Dette er ikke »AI skriver frontend«. Det er »design og kode bliver ét dokument«. Når jeg ændrer afstanden mellem sektioner i Claude Design, forstår Claude Code i næste iteration, at det er et nyt mønster, ikke en engangsrettelse.

Her mangler konkurrenterne denne funktion:

• Lovable / Bolt – designet er et biprodukt af koden. Hvis du vil ændre designsystemet, skriver du hele prompten om.
• v0 – leverer React-komponenter, men ingen pakke med designintentionen. Derefter arbejder du med kode, ikke design.
• Figma + Cursor – der findes plugins, men de overfører ikke logikken bag beslutningerne, kun det visuelle.

En eksklusiv integration, der bringer Claude Design ind i Anthropics strategi »agent plus canvas«.

Hvad der ikke fungerer: arkitektoniske svagheder#

Anthropic er åben om det: dette er en preview. Nogle funktioner virker stadig ikke.

Arkitektoniske svagheder:

• Ingen aktivitetslog – et problem for store virksomheder med compliance-krav.
• Ingen krav til dataopbevaring – du kan ikke bruge værktøjet med regulerede data.
• Eksperimentelt design (stemme, video, 3D) er markeret som eksperimentelt og kan gå i stykker.
• Ingen indbygget videoeksport – animationer kan kun optages som screencast.

Claudes adfærdsmæssige særheder (fælles for alle værktøjer, ikke kun Design):

• Efter flere iterationer glemmer det kravene og går tilbage til standardmønstre.
• Det er godt til tydeligt strukturerede opgaver (at gentage et mønster), men svagere til åbne opgaver (at finde en ny retning).
• Det kan »holde fast« i sine vaner i stedet for at følge de angivne mål.

Løsningen er at bruge en påmindelsesprompt til at føre det tilbage til designsystemet for hver 3.–4. iteration. Det er ikke en blokering, men det kræver en vane.

Hvornår du skal holde fast i Figma, Lovable eller Canva#

I tilgangen, der beskrives her, bruges disse fem værktøjer til forskellige opgaver. Her er en ærlig gennemgang af, hvornår du skal bruge hvert af dem:

Brug Claude Design, hvis:

• Du er founder, produktchef eller marketingmedarbejder uden designbaggrund.
• Du har brug for et første udkast til en præsentation, landingsside eller mockup på en time, ikke en dag.
• Du allerede har en kodebase eller brand guidelines, som Claude kan bruge.
• Du planlægger at overdrage det til en designer eller udvikler til finpudsning.
• Du skriver kode med Claude Code og vil have en lukket »design → udvikling«-arbejdsgang.

Brug Figma, hvis:

• Du er designer og skal stå for den sidste finish.
• Du skal arbejde som et team med fælles fokus på overdragelse til udviklere.
• Du har brug for plugins, udviklertilstand eller seriøs versionsstyring.
• Du har brug for et endeligt produktionsklart design.

Brug Lovable eller Bolt, hvis:

• Du har brug for et fungerende produkt med database, autorisation og publicering fra én prompt.
• Du er villig til at bytte designfinish for hastighed.
• En gratisplan er vigtig.

Brug Canva, hvis:

• Du har brug for marketingmateriale fra færdige skabeloner.
• Designopgaven handler om at samle elementer fra et bibliotek, ikke kreativ generering.
• Du har brug for tryk, sociale medier og video samlet i ét produkt.

Brug v0, hvis:

• Du bygger frontend og har brug for færdige komponenter, du kan kopiere og indsætte.
• Du allerede arbejder i Next.js- / Vercel-økosystemet.
• Du vil importere direkte fra Figma.

Det typiske workflow i tilgangen, der beskrives her: Claude Design laver det første udkast til en landingsside → Claude Code flytter det til src/app/ → redigeringer i kode → hvis typografien skal finpudses, går jeg til Figma → hvis den skal animeres til sociale medier, går jeg til Canva.

Claude Design påstår ikke, at det kan alt. Målet er at være det første trin, hvorefter du ved, hvad du skal gøre som det næste.

Gå til Ailoot.