Claude Design er et samtalebaseret værktøj til interaktive prototyper, landingssider, dashboards og præsentationer. Du kan forbinde et designsystem, men du skal stadig kontrollere, om outputtet følger jeres komponenter, tilgængelighedskrav og visuelle regler.

I denne guide får du:

  • Hvad Claude Design er, og hvad det kan bruges til i praksis
  • Hvordan interfacet er bygget op (chat + canvas + inline-kommentarer)
  • En trin-for-trin gennemgang af dit første projekt
  • Prompts der faktisk virker — og de klassiske faldgruber
  • Sådan sætter du et designsystem op, så alle i organisationen får brand-korrekt output
  • Eksport, deling og handoff til udviklere
  • Priser, abonnementstyper og kendte begrænsninger

Kort fortalt: Claude Design er i research preview til Pro, Max, Team og Enterprise. Det er som at have en junior-designer siddende ved siden af dig, der kan lave funktionelle prototyper mens du tænker højt. Svaghed: det er stadig en beta, så forvent enkelte bugs.

Hvad er Claude Design — og hvorfor er det interessant?

Claude Design er et værktøj fra Anthropic Labs, der kombinerer to ting, vi kender hver for sig:

  1. En samtalebaseret AI (Claude), hvor du beskriver hvad du vil have
  2. Et visuelt canvas, hvor output bliver vist som en rigtig prototype — ikke bare kode eller en beskrivelse

Forskellen fra klassiske AI-designværktøjer (Figma AI, Uizard, v0 m.fl.) er at Claude Design lægger vægt på to ting:

  • Designsystem-bevidsthed: Din organisations farver, typografi og komponenter er bygget ind fra start
  • Iteration via samtale OG direkte manipulation: Du kan både skrive "gør det mørkere" i chatten og klikke på en knap på canvaset og skrive "gør denne større"

Det gør værktøjet brugbart for langt flere end designere. Hvis du er PM, udvikler, marketingchef eller — som jeg selv — arbejder i krydsfeltet mellem teknologi og forretning, kan du nu lave en klikbar prototype uden at booke en designer først.

Hvornår giver det mening at bruge Claude Design?

Realistisk set:

  • Hurtige mock-ups til stakeholder-feedback ("sådan her kunne den nye medlemssektion se ud")
  • Landing pages til ny funktionalitet eller kampagner
  • Interne værktøjer (dashboards, godkendelsesflows, formularer)
  • Præsentationer der faktisk ligner noget, uden at du skal ud i PowerPoint-helvede
  • Onboarding-flows og feature-demoer til kundedialog
  • A/B-testvarianter hvor du skal have 2-3 designalternativer hurtigt

Hvor det stadig ikke erstatter en designer: komplekse designsystemer fra bunden, tilgængelighedsaudits på produktionsniveau, eller den strategiske forretningsforståelse bag et design. Se det som en accelerator, ikke en erstatning.

Sådan er interfacet bygget op

Claude Design har to hovedområder, og du skal kende dem, før du går i gang:

Claude Design interface med chat-panel til venstre og canvas til højre, der viser en TEKNIQ-præsentation

Det typiske flow:

  1. Opret et projekt og tilføj relevant kontekst (screenshots, kodebase, brand-assets)
  2. Beskriv hvad du vil bygge
  3. Claude genererer et første bud på canvaset
  4. Du itererer via chat og/eller inline-kommentarer
  5. Du eksporterer eller deler, når du er tilfreds

Dit første projekt — trin for trin

Trin 1: Opret et projekt

Gå til claude.ai/design og opret et nyt projekt. Projektet arver automatisk dit organisationsdesignsystem (hvis det er sat op) — du skal altså ikke uploade logoer og farver hver gang.

Trin 2: Tilføj kontekst før du prompter

Det her er det vigtigste trin, og det er lige her de fleste går i fælden: De hopper direkte til prompten.

Brug 2 minutter på at vedhæfte:

  • Screenshots eller eksisterende designs — enten dine egne eller konkurrenters. "Gør det ligner det her" er en af de stærkeste prompts du kan give.
  • Kodebaser — hvis jeres produkt allerede har komponenter i kode, link til repo'et. Claude læser jeres React-komponenter, styles og arkitektur, og det gør output markant mere produktionsklart.
  • Slide decks eller dokumenter der afspejler jeres visuelle identitet
  • Wireframes hvis du har en grov struktur i hovedet

Real-world eksempel fra min egen hverdag: Når jeg bygger mockups til TEKNIQs medlemsvendte værktøjer, vedhæfter jeg altid et screenshot af vores eksisterende interface + et "inspirations-screenshot" fra en konkurrent vi gerne vil ligne mere. Det sparer 3-4 iterationer.

Trin 3: Skriv en effektiv prompt

En god prompt indeholder fire ting:

Element Hvad det er Eksempel
Mål Hvad du bygger "Et dashboard"
Layout Hvordan det skal struktureres "Med filtre i toppen og en graf nedenunder"
Indhold Hvilke data/information "Månedlig omsætning fordelt på region"
Målgruppe Hvem skal bruge det "Til salgsledere der skal bruge det i møder"

Promptformuleringer der virker (direkte fra Anthropics dokumentation):

  • "Create a dashboard showing monthly revenue with filters for region and product line."
  • "Design a mobile app onboarding flow with 4 screens that walks users through our core features."
  • "Build a landing page for our new API product with a hero section, code examples, and pricing."
  • "Create a form for collecting customer feedback with conditional questions based on category."
  • "Design an internal tool for our ops team to review and approve content submissions."

Oversat til dansk kontekst (eksempler jeg selv ville bruge):

  • "Design et dashboard til vores medlemsrådgivere, der viser antal åbne sager fordelt på rådgiver, med filtre for region og sagstype."
  • "Byg en landing page til vores nye AI-ambassadørkursus, med hero, 3 værdipunkter, pris og tilmeldingsformular."
  • "Lav et onboardingflow på 4 skærme til nye medlemsvirksomheder, der skal sætte deres firmaoplysninger op."

💡 Tip: Hvis Claude har brug for mere information, stiller den selv opklarende spørgsmål. Ret dem ikke som en forstyrrelse — svar præcist, og første output bliver meget bedre.

Iteration: Sådan får du det rigtige resultat

Første generering er aldrig perfekt. Det skal den heller ikke være — det er et udgangspunkt, ikke et facit. Her er hvor værktøjet virkelig viser sin styrke.

Brug chat til strukturelle ændringer

Chat er bedst til ændringer der påvirker helheden:

  • "Gør farveskemaet mørkere og mere minimalistisk"
  • "Flyt nøgletallene op øverst og rykket grafen ned"
  • "Tilføj et indstillingspanel i højre side"
  • "Vis mig 2-3 alternative layouts for denne side"

Du kan også bede Claude om at forklare sine designvalg, foreslå forbedringer, eller reviewe designet for tilgængelighed. Det sidste er særligt værdifuldt — bed eksplicit om: "Gennemgå dette design for WCAG 2.2 AA-overholdelse og foreslå konkrete ændringer."

Brug inline-kommentarer til komponent-ændringer

Inline-kommentarer er når du klikker direkte på et element på canvaset og skriver en kommentar. Det er hurtigere end at beskrive placeringen i chatten.

Gode inline-kommentarer:

  • "Gør padding på denne knap større"
  • "Ændr denne til en dropdown i stedet for radio-knapper"
  • "Brug primærfarven her"
  • "Gør denne sektion sammenklappelig"

Tommelfingerregel: Chat vs. kommentar

Brug chat til Brug inline-kommentarer til
Strukturelle ændringer Specifik knap, tekst eller element
Nye sektioner eller sider Spacing, farve, størrelse på én komponent
Æstetisk skift "Ret denne" typer feedback
Noget der kræver forklaring Hurtige, lokale ændringer

⚠️ Bug du skal kende: Inline-kommentarer forsvinder af og til før Claude når at læse dem. Hvis en kommentar ikke bliver fanget, så kopiér teksten over i chatten i stedet. Anthropic har selv bekræftet det her er en kendt issue i preview.

Versioner og alternative retninger

Vil du prøve en helt anden retning uden at miste det du har? Skriv til Claude:

"Gem det vi har nu, og prøv en helt anden tilgang."

Claude gemmer dit nuværende projekt og bekræfter hvor, så du kan referere til tidligere versioner senere i samtalen. Det er en simpel men kraftfuld måde at udforske divergerende idéer uden at være bange for at miste det første bud.

Designsystemet: Det der gør Claude Design interessant for virksomheder

Det her er den største forskel på Claude Design og generiske AI-designværktøjer. Hvis din organisation sætter et designsystem op, vil alle projekter i organisationen automatisk bruge jeres brand.

Sådan sættes det op (for designansvarlige)

Du skal bruge admin-rettigheder og mindst ét af følgende som kildemateriale:

  • En kodebase med jeres designsystem eller komponentbibliotek
  • Et slide deck eller dokument der afspejler jeres visuelle identitet
  • Brand guideline-assets (logoer, farvepaletter, typografispecs)

Processen er 4 trin:

  1. Opret/skift til din organisation i Claude Design (klik på organisationsnavnet nederst i venstre hjørne af projektvælgeren)
  2. Upload brand- og produkt-assets — jo mere, desto bedre, men én kilde er nok til at komme i gang
  3. Gennemgå det genererede designsystem (UI kit) — farvepalet, typografi, komponenter, layout-mønstre
  4. Udgiv det — slå "Published"-kontakten til, så alle projekter i organisationen bruger det fra det øjeblik

Valider dit designsystem

Når det er sat op, så opret et testprojekt og prøv prompts som:

  • "Lav en landing page for [jeres produkt]"
  • "Design et dashboard der viser [relevante metrikker]"
  • "Lav en præsentation om [et emne I ofte præsenterer]"

Hvis outputtet ikke rammer jeres brand, så upload flere eller andre assets og iterér. Et færdigt eksempel (en landing page, en marketingside) giver Claude meget mere brand-føling end en farvepalet alene.

Opdater designsystemet senere

Brands udvikler sig. Gå til organisationsindstillingerne → klik "Open" ved designsystemet → klik "Remix" i øverste højre hjørne. Nu kan du snakke med Claude om ændringer, ligesom med et normalt projekt.

Eksport og deling

Når du er tilfreds, så brug Export-knappen i øverste højre hjørne. Du kan vælge:

  • Download som .zip — hele projektet som filer
  • Eksport som PDF — til stakeholder-feedback
  • Eksport som PPTX — PowerPoint til præsentationer
  • Send til Canva — hvis marketing skal arbejde videre
  • Eksport som standalone HTML — en færdig, levedygtig webside
  • Handoff til Claude Code — send direkte til Claude Code Web eller lokal coding-agent for videre udvikling

Du kan også dele projektet internt i organisationen med et link, og vælge adgangsniveau: view-only, comment eller edit.

🔧 Mit favorit use case: Eksport som standalone HTML til hurtige stakeholder-review. Du får en URL eller HTML-fil du kan sende, og folk kan klikke rundt uden at skulle installere noget. Næste skridt: handoff til Claude Code, hvis prototypen skal til produktion.

Prisen afhænger af abonnement og forbrug

Guiden angiver ikke aktuelle beløb, fordi priser og forbrugsgrænser kan ændres. Anthropics pris- og forbrugsoversigt er den gældende kilde. Claude Design måles separat fra almindelig chat og Claude Code og har sin egen ugentlige forbrugsgrænse.

Individuelle abonnementer

Abonnement Bedst til
Pro Hurtige udforskninger, engangsbrug
Max 5x Semi-regulær brug — PM''er og udviklere der laver mockups
Max 20x Powerbrug — designere og kreative

Alle planer har en ugentlig tilladelse der nulstilles hver syvende dag. Hvis du løber tør, kan du købe ekstra forbrug.

Team-plan

Hver provisioneret bruger får en ugentlig tilladelse. To typer sæder:

Sædetype Bedst til
Standard Hurtige udforskninger, engangsbrug
Premium Powerbrugere — designere og kreative

Admins kan købe ekstra forbrug til brugere der har brug for mere.

Enterprise

To modeller:

  • Legacy seat-based: Samme model som Team — ugentlig tilladelse pr. bruger
  • Usage-based: Claude Design-forbrug bilæges til standard API-rater under jeres eksisterende aftale. Der er en one-time credit på ~20 typiske prompts pr. bruger, der udløber 17. juli

Vigtigt: Claude Design er default slået fra på Enterprise-planer. Admin skal slå det til.

Hvordan fordeles tilladelser?

Alle tilladelser er pr. bruger, ikke puljet på organisationen. Hver provisioneret bruger har sin egen bucket. Hvis I bruger custom roles på Enterprise, er det kun brugere der er eksplicit provisioneret til Claude Design, der får en tilladelse.

Usage tracking

Her er en vigtig detalje: Claude Design understøtter endnu ikke audit logs eller detaljeret usage tracking — det er en labs-release. Så hvis I har stramme compliance-krav (GDPR-audit af hvem der har genereret hvilket designindhold), så vent til det bliver produktionsmodent.

Du skal kende begrænsningerne før brug

Claude Design er en eksperimentel preview. Det betyder at der er et par rå kanter:

  1. Kommentarer kan forsvinde: Inline-kommentarer bliver af og til ikke fanget før Claude læser dem. Workaround: Paste kommentaren i chatten.
  2. Gem-fejl i kompakt visning: Det kompakte layout kan trigger gemmefejl. Skift til fuld visning og prøv igen.
  3. Store kodebaser laggger: Link ikke hele monorepos — link specifikke underdirektorier i stedet.
  4. Chat upstream errors: Hvis du får en "chat upstream error", så start en ny chat-tab inden for samme projekt. Dit arbejde går ikke tabt.

8 praktiske tips — fra min egen brug

Her er hvad jeg har lært efter at have bygget mockups og prototyper med værktøjet:

  1. Start simpelt, lag så kompleksitet på. Byg kerne-layoutet og indholdet først. Tilføj interaktioner, edge cases og polish bagefter. Claude responderer meget bedre på inkrementelle anmodninger end på "byg hele dashboardet inkl. alle undersider".

  2. Vær specifik i din feedback. "Det her ser ikke rigtigt ud" er umuligt at handle på. "Stram spacing mellem formular-felterne til 8px" giver Claude præcis det den skal bruge.

  3. Referencér jeres designsystem ved navn. Hvis du ved at der findes en "Primary Button"-komponent i jeres system, så skriv "brug Primary Button-komponenten". Claude bruger den så.

  4. Tænk responsivitet tidligt. Nævn fra start om designet skal virke på mobil, tablet og desktop — eller kun én. Ellers får du typisk kun desktop.

  5. Bed om varianter. Usikker på en retning? Bed om 2-3 alternativer. At sammenligne er hurtigere end at gætte.

  6. Bed Claude om feedback på sit eget design. Claude kan reviewe for tilgængelighed, kontrastforhold, informationshierarki og usability. Prompt: "Gennemgå dette design kritisk. Hvad er de 3 største svagheder?"

  7. Brug kontekst aggressivt. Screenshots af hvad du ikke kan lide er lige så nyttigt som screenshots af hvad du kan lide.

  8. Gem alternative retninger aktivt. Før du laver en stor ændring, så bed Claude gemme den nuværende version. Det er billigere at være forsigtig end at genskabe.

Hvor passer Claude Design ind i værktøjskassen?

Hvis du allerede bruger AI-værktøjer, er det værd at være bevidst om hvor Claude Design supplerer — og hvor det overlapper — med det du har:

Værktøj Styrke Claude Design i forhold
Figma Fuld designkontrol, samarbejde Claude Design er hurtigere til 0→1, men Figma vinder på detalje-arbejde
v0 (Vercel) React-komponenter, kodeoutput Claude Design har bredere output (PDF, PPTX, Canva) og stærkere designsystem-integration
Uizard / Galileo AI-mockups Claude Design har samtalebaseret iteration og kodebase-integration
Claude Code Kode fra terminal Claude Design handoff''er til Claude Code når prototypen skal til produktion
PowerPoint + Designer Præsentationer Claude Design laver brand-korrekte slides på en anden liga

Min konklusion: Claude Design er stærkest i tidligste fase af et projekt (hurtige prototyper, stakeholder-alignment) og som broen mellem design og kode (handoff til Claude Code). Det erstatter ikke Figma for producerende designere, men det erstatter meget ofte behovet for en hurtig mockup-runde før man spørger designteamet.

Ressourcer og næste skridt

Vil du dybere i detaljen, så er det her de officielle kilder:

Afprøv værktøjet med en afgrænset opgave

Hvis dit abonnement giver adgang, kan du afprøve værktøjet med en fiktiv opgave uden følsomme data:

"Byg en enkel landingsside for et fiktivt produkt i min branche. Medtag en introduktion, tre værdipunkter og én handling. Brug et enkelt visuelt udtryk."

Kontrollér resultatet mod jeres designsystem, tilgængelighedskrav og tekniske rammer, før du genbruger det.

Produktets funktioner, adgang og priser kan ændre sig. Kontrollér de aktuelle vilkår hos Anthropic, før du vælger værktøjet til en arbejdsgang.