DEL 3 · VÆRKTØJER I PRAKSIS
Lær at bygge skarpe, brandede infografikker med Claude og AI-billedgenerering — uden designerfaring og uden at rode med Canva.
Du kan lave professionelle, brandede infografikker med Claude — uden designerfaring. Denne guide viser dig to metoder (kode og billedgenerering), hvornår du bruger hvilken, og hvordan du kombinerer dem. Du får konkrete prompts du kan kopiere direkte.
Din hjerne bruger langt mere kapacitet på at bearbejde billeder end tekst. Det gælder ikke kun for mennesker — det gælder også for AI-modeller. Giver du Claude et referencebillede, forstår den dit ønskede udtryk langt hurtigere end hvis du beskriver det med ord.
På LinkedIn og andre platforme husker folk hvad de så, ikke hvad de læste. Infografikker er ikke pynt — de er formidlingsstrategi.
Der er to fundamentalt forskellige måder at generere infografikker med AI på:
| Metode | Værktøj | Bedst til |
|---|---|---|
| HTML/kode | Claude | Data, tal, præcision, nem redigering |
| Billedgenerering (diffusion) | ChatGPT | Visuelle, kunstneriske infografikker |
| Kombineret | Begge | Det bedste fra begge verdener |
Dette er den metode de fleste overser — og den mest præcise. Claude genererer din infogafik som HTML, ikke som et billede. Det betyder nul stavefejl, nul pixelede tekster og let redigering bagefter.
Trin for trin:
Du er designlead på dette projekt. Jeg er ikke designer og træffer de endelige beslutninger, så tal til mig i plain language.
De vedhæftede referencebilleder viser det udtryk jeg ønsker. Studér dem samlet og udtræk det designsystem de deler.
• Læs referencerne. Identificér: farvepallet som 4-6 navngivne hex-værdier med roller (baggrund, overflade, tekst, accent, dæmpet); typografi for 2-3 roller (display, brødtekst, label) — hvis en skrifttype ikke er frit tilgængelig, navngiv den nærmeste Google Font og beskriv hvad der går tabt; rytme i spacing, hjørneradius, kant- og skyggebehandling, tæthed; layoutlogik; og det ene signaturelement der gør dette udtryk genkendeligt.
• Rapportér tilbage på under 200 ord uden fagtermer. For hvert valg: sig hvad det er og hvad det gør for læseren ("næsten-sort tekst på varm råhvid — rolig, læses som print"). Flag alt du gætter fremfor ser.
• Hvor referencerne er uenige, eller hvor en reel beslutning stadig er åben, spørg mig. Brug AskUserQuestion-værktøjet, 2-4 spørgsmål maksimum, plain-language muligheder med afvejningen beskrevet. Spørg ikke om noget du kan svare på ud fra billederne.
• Skriv derefter DESIGN_SYSTEM.md: en :root CSS-variabelblok, typeskalaen med konkrete størrelser og vægte, spacing- og radiusværdier, Google Fonts link-tag, ét afsnit om layoutlogik, signaturelementet og en kort "dette design gør aldrig"-liste over ting der ville bryde udtrykket.
• Byg tokens-preview.html — én side der viser farverne, typeskalaen og ét eksempelkort — så jeg kan se systemet inden vi bruger det. Tag et screenshot, sammenlign med mine referencer, ret hvad der er drevet af.
• Design ikke noget andet endnu. Troskab mod mine referencer vinder over din egen smag. Hvis du normalt ville træffe et mere modigt valg, notér det til sidst som en mulighed i stedet for at bruge det.
Fordelen ved denne metode: En HTML-infogafik er matematisk præcis. Tal og tekst sidder præcis hvor de skal. Vil du ændre farver, fonte eller tal bagefter, skriver du bare hvad du vil have — og Claude retter det.
Vil du genbruge samme stil til et nyt emne? Tryk Edit på din originale prompt, skift emnet, og kør igen. Designsystemet bevares.
Hvor finder du gode referencebilleder? Pinterest er den nemmeste kilde — søg på 1-2 ord, klik på det billede du bedst kan lide, og lad algoritmens rabbit hole guide dig. Til webdesign-stil: Awwwards, Dribbble eller CSS Design Awards.
Diffusion-modeller (som ChatGPT bruger) maler pixels ud fra en beskrivelse. Resultatet er mere kunstnerisk og visuelt komplekst — men sværere at redigere præcist.
Trin for trin:
Du kan ændre sprog, målgruppe, farver og layout i opfølgende beskeder.
Hvornår bruger du hvilken metode?
| Situation | Brug dette |
|---|---|
| Mange tal og data der kan ændre sig | Claude (HTML) |
| Du vil have nul fejl i tekst og tal | Claude (HTML) |
| Visuelt tungt, kunstnerisk udtryk | ChatGPT (diffusion) |
| Du behøver ikke redigere data meget | ChatGPT (diffusion) |
Du kan lade ChatGPT skabe den visuelle baggrund og Claude lægge data og tekst ovenpå som HTML. Resultatet er både kunstnerisk og præcist.
Sådan gør du:
Lav en baggrundsgrafik til en infogafik om [emne]. Stil: [beskriv stil]. Efterlad tydelig tom plads til tekst og grafer i midten. Ingen tekst på billedet.
Brug dette billede som baggrund for en HTML-infogafik om [emne]. Lav [beskriv indhold: grafer, tal, punkter]. Output skal være én selvstændig HTML-fil.
Husk at fortælle ChatGPT at efterlade tom plads til tekst — ellers drukner dit indhold i baggrunden.
Hvis du laver infografikker jævnligt, er det spild af tid at forklare dit designsystem forfra hver gang. Claude har en funktion kaldet Skills der lader dig gemme din stil én gang og bruge den med minimale prompts fremover.
Sådan gemmer du dit designsystem som en skill:
/skill-creator i chatfeltet og vælg pop-up'enBrug det uploadede designsystem til at oprette en skill der lader mig lave infografikker i denne stil. Skillen skal: automatisk anvende korrekte farver, fonte og layout fra systemet; generere HTML-infografikker; og kræve minimal instruktion fra mig — jeg skal blot angive emne og indhold.
Herefter kan dine prompts være så enkle som:
Lav en infogafik om [emne]. Inkludér: [3-4 punkter eller data].
Skilllen håndterer alt det visuelle automatisk.
En advarsel: Denne tilgang er perfekt til konsistens — fx hvis du har et fast brand. Men den giver snæver stilvariation. Vil du eksperimentere med mange forskellige visuelle udtryk, er du bedre stillet med at starte forfra hver gang.
Når du har lavet en første infografik med metoderne her, kan du tage næste skridt på Claude-masterclassen. Det er en 4-timers hands-on masterclass for dig, der allerede bruger Claude, med fokus på grundprincipperne: Du arbejder med en reel opgave, får feedback og bygger et personligt setup med projekter, instruktioner og prompts til gentagne opgaver samt en 30-dages plan.
Nej. Du behøver ikke forstå en linje HTML. Du giver Claude instrukser på almindeligt dansk, og den skriver koden. Du ser kun slutresultatet i preview.
Ja. Beskriv dine farver med hex-koder i din prompt, eller upload et billede med dit brand og bed Claude identificere farverne. Logo kan du ikke indsætte direkte i HTML via Claude, men du kan tilføje det i et billedprogram bagefter.
Send Claude et screenshot af resultatet og din reference i samme besked og skriv: "Sammenlign disse to. Hvad er de største forskelle, og ret dem." Claude er god til at debugge sit eget output.
HTML-formatet kræver et ekstra trin. Den nemmeste løsning: åbn preview i din browser, tag et screenshot i høj opløsning, og indsæt billedet. Alternativt kan du bede Claude generere en version optimeret til et specifikt format.