Claude Design: Komplet guide til prototyper, slides og websites med AI

Claude Design er et Anthropic Labs-produkt. Det er tilgængeligt i research preview for betalte abonnenter og giver dig mulighed for at bygge prototyper, slides, landingssider, pitch decks og marketingmateriale direkte i browseren ved at chatte med Claude. Du starter med en beskrivelse, Claude genererer et første udkast, og derefter iterer du via direkte redigering, inline-kommentarer eller det interaktive tweaks-panel.

Målgruppen er foundere, produktchefer og marketingfolk der har brug for at gå fra idé til noget visuelt hurtigt — uden at starte i et designværktøj og uden at have et designteam. Claude Design er ikke en erstatning for Figma eller for Claude Code. Det er et mellemled: hurtigere end at bygge fra bunden i kode, mere fleksibelt end en skabelonbaseret hjemmesidebygger.

Claude Design kræver et betalt abonnement — Pro (ca. 140 kr./md.), Max 5x (ca. 700 kr./md.) eller Max 20x (ca. 1.400 kr./md.) — samt Team- eller Enterprise-plan for organisationer. Den gratis plan giver ikke adgang. Når du er logget ind på claude.ai, finder du Claude Design under Anthropic Labs eller direkte på claude.ai/design.

1. 01

   Gå til claude.ai/design

   Log ind med din betalte konto og åbn Claude Design. Du lander på en oversigtsside med dine projekter og design systems.

2. 02

   Opret et design system

   Klik på Design systems og opret et nyt. Du kan tilkoble et GitHub-repository, uploade logo og brand guidelines, eller blot give produktets navn. Claude genererer herefter automatisk en komplet design spec med farver, typografi og komponenter. Bemærk: processen tager 10-15 minutter og er token-tung — gør det én gang og genbrug det.

3. 03

   Opret et nyt projekt

   Klik New project og vælg output-type: prototype, slides, one-pager eller animeret promo. Tilknyt dit design system, navngiv projektet, og klik Create.

4. 04

   Beskriv hvad du vil bygge

   Skriv din første prompt. Jo mere kontekst du giver op front — sketcher, brand guidelines, eksempler på tone — desto færre iterationer behøver du bagefter. Du kan uploade dokumenter (DOCX, PPTX, XLSX), videoer (MP4) og billeder direkte i chatten.

5. 05

   Iterer via kommentarer, direkte redigering og tweaks

   Klik på et element for at tilføje en inline-kommentar. Dobbeltklik på tekst for at redigere den direkte. Brug tweaks-panelet til at eksperimentere med farver, fonts og spacing uden at bruge chat-tokens.

Den mest effektive måde at bruge Claude Design på ligner den bedste praksis fra Claude Code: giv masser af kontekst upfront, planlæg i wireframe-fasen inden du bygger high-fidelity, og iterer i ét element ad gangen. De fleste der brænder deres tokens af hurtigt har forsøgt at hoppe direkte til high-fidelity uden en plan og sendt mega-prompts med ti ændringer på én gang.

Tweaks-panelet: eksperimenter uden at bruge tokens

Tweaks-panelet er en af Claude Designs mest undervurderede funktioner. Bed Claude om at generere et tweaks-panel ved at skrive noget i retning af: "Tilføj en tweaks-panel med farvepalet, font-vælger, hero-layout og spacing-slider." Herefter kan du eksperimentere med designet i realtid ved at trække i sliders — uden at sende en eneste prompt. Kan du lide resultatet, gemmer du det. Kan du ikke, nulstiller du. Det svarer til at teste ti varianter af et design med nul tokens brugt.

Brug referencer frem for beskrivelser

Claude Design reagerer markant bedre på specifikke referencer end på vage kvalitetsbeskrivelser. "Linear 2023-stil med højere densitet" giver et bedre resultat end "gør det clean og minimalistisk." Du kan også pege direkte på elementer med tegneværktøjet og skrive din kommentar oven på det du ønsker ændret.

Byg en hero-sektion med videobaggrund til venstre og headline + CTA til højre. Brug vores design system.

Jeg vil se hvad der ellers er muligt. Tilføj et tweaks-panel med farvepalet, font-vælger, hero-layout og spacing-slidere.

Lav en wireframe-skitse af en 3-sektioners landingsside: hero, features og CTA. Vi konverterer til high-fidelity i næste trin.

Optimér dette layout til mobilvisning. Flyt videoen under headlinen og sørg for at teksten er læselig på 375 px skærm.

Jeg kan ikke lide hvordan dette afsnit slutter abrupt. Tilføj en gradient-overgang til næste sektion.

Claude Design kan håndtere MP4-videofiler som baggrunde der afspilles i loop — det er grunden til at outputtet kan se dramatisk anderledes ud end hvad en typisk AI-websitebuilder producerer. Workflowet er: generer eller find en passende video (f.eks. via AI-videogeneratorer der arbejder med image-to-video), upload den direkte i Claude Design-projektet, og bed Claude om at integrere den som en animeret baggrund i hero-sektionen.

HyperFrames: scroll-baserede videooplevelser

HyperFrames er et framework der kobler videofremspilning til brugerens scroll-position. I stedet for at en video bare afspilles automatisk, fremskrider videoen når brugeren scroller ned — og går baglæns når brugeren scroller op. Det giver en filmisk, interaktiv oplevelse der er vanskelig at bygge manuelt, men som Claude Design kan generere ud fra en enkelt prompt: "Lad videoen følge scroll-positionen frem og tilbage i stedet for at køre på loop."

Et færdigt Claude Design-projekt er HTML, CSS og JavaScript i browseren. For at gøre det tilgængeligt på nettet skal du eksportere det, lægge det i et GitHub-repository og forbinde det til en hostingtjeneste som Vercel. Hele processen tager under 15 minutter første gang og er fuldt automatiseret fra anden gang — ændringer du foretager lokalt i Claude Code publiceres med én kommando.

1. 01

   Eksportér projektet fra Claude Design

   Klik Share → Download as zip i Claude Design. Alternativt kan du bruge Handoff to Claude Code-knappen, der genererer en kommando du kopierer direkte ind i Claude Code — denne funktion kan dog i perioder returnere 404-fejl, da Claude Design er i research preview.

2. 02

   Åbn projektet i Claude Code

   Udpak ZIP-filen i en mappe på din computer. Åbn mappen i VS Code med Claude Code-udvidelsen installeret, eller brug Claude Code CLI. Projektet indeholder HTML-filen, eventuelle videofiler og assets.

3. 03

   Push til GitHub

   Giv Claude Code instruksen: "Push dette projekt til et nyt privat GitHub-repository." Claude Code opretter repository, tilkobler det og pusher alle filer. Første gang skal du godkende GitHub-autorisation — Claude Code guider dig igennem processen.

4. 04

   Kobl GitHub-repository til Vercel

   Opret en gratis konto på vercel.com (log ind med din GitHub-konto). Klik Add New → Project, vælg dit repository, og klik Deploy. Vercel bygger og publicerer sitet — processen tager typisk under 60 sekunder.

5. 05

   Fejlsøg hvis du får 404-fejl

   Vercel serverer som standard fra rodmappen og forventer en fil der hedder index.html. Eksporterer Claude Design til en undermappe, skal filen omdøbes. Fortæl Claude Code om fejlmeddelelsen, og den finder og løser problemet automatisk.

6. 06

   Iterer lokalt, push når du er tilfreds

   Fremtidige ændringer foretages i Claude Code på localhost. Når du er tilfreds, siger du til Claude Code: "Push alle ændringer til GitHub." Vercel registrerer automatisk det nye commit og deployer inden for 30 sekunder.

Claude Design har sit eget ugentlige kvotum der er adskilt fra dit normale Claude-kvotum og fra Claude Code-kvotummet. De tre kvota nulstilles uafhængigt af hinanden, og forbrug på én påvirker ikke de andre. Kvotummet nulstilles hver 7. dag. Bruger du det op, kan du købe ekstra forbrug eller vente til næste nulstilling.

Hvad dræner kvotummet hurtigst

• At bruge Opus 4.7 til alt — selv til småjusteringer som at ændre en knapfarve. Skift til Sonnet 4.6 for iterationer og brug Opus 4.7 til den indledende generering og større strukturelle ændringer.
• At springe wireframe-fasen over — jo mere præcist Claude forstår opgaven fra starten, desto færre korrektioner er nødvendige. Hver korrektion er en dyr Opus 4.7-prompt.
• Oprettelse af design system fra bunden — processen tager 10-15 minutter og er token-tung. Har du et eksisterende GitHub-repository med brand assets, bruger Claude markant færre tokens.
• Lange kontekster der forurener — ekstremt lange projekttråde fører til dårligere output fordi kontekstvinduet forurenes. Eksportér projektet og start en frisk session for at undgå dette.
• Mega-prompts med mange ændringer — send én ændring ad gangen og brug tweaks-panelet til eksperimenter i stedet for at chatte om alle variationer.

Claude Design er i research preview, og det mærkes. Der er reelle begrænsninger og kendte bugs som det er bedre at kende på forhånd end at opdage midt i et projekt. Herunder er de vigtigste.

• Kun webbrowser — Claude Design er udelukkende tilgængeligt via claude.ai i en browser. Der er ingen desktopapp, ingen CLI-integration og ingen API-adgang til Claude Design-output.
• Enkeltbruger og ikke-realtidssamarbejde — der er ingen mulighed for at to personer simultant redigerer det samme projekt. Du kan dele et link med view-only, kommentar- eller redigeringsadgang, men det er ikke et Figma-alternativ til teamsamarbejde.
• Logohåndtering er svag — Claude er generelt svag til at gengive logoer præcist. Upload logoet som SVG eller PNG og bed eksplicit om at det bruges som-er frem for at Claude forsøger at tegne det.
• Tegneværktøjet har UI-bugs — kommentarer knyttet til tegnede annotationer kan forsvinde fra visningen. Workaround: kopier kommentaren ind i chat-feltet direkte.
• Compact-visning kan udløse gem-fejl — skift til fuld visning og prøv igen.
• Store repositories giver performance-problemer — kobler du et meget stort GitHub-monorepo, kan det forårsage langsomhed eller browser-nedbrud. Kobl i stedet til en specifik undermappe.
• Design system-oprettelse er langsom — 10-15 minutter til oprettelse er normalt. Afvent processen og undlad at starte nye projekter sideløbende.
• Ingen revert-knap — i modsætning til f.eks. Lovable kan du ikke rulle tilbage til en tidligere version af projektet via en knap. Brug tweaks-panelet til at eksperimentere, og vær bevidst om hvad du sender som prompt.

Claude Design er ikke altid den rigtige løsning. Der er scenarier hvor det er mere effektivt at arbejde direkte i Claude Code — og det er vigtigt at kende sondringen, ikke mindst fordi de to produkter har separate kvota der hurtigt kan løbe op.