Du ser en landingsside, du elsker. I det gamle workflow ville du åbne DevTools, inspicere 50 elementer, manuelt kopiere hex-koder, gætte på skriftstørrelser og stadig få afstanden forkert. Design Extract gør dette med en enkelt kommando — det reverse-engineer enhver websteds visuelle design til en struktureret specifikation, som Claude Code eller Cursor kan gengive direkte.
- Hvad det gør: Udtrækker farver, skrifttyper, afstand, animationer og interaktioner fra enhver URL
- Output: Struktureret designspec, prompt-klar til AI-kodningsværktøjer
- Brugstilfælde: Genskab eller få inspiration fra eksisterende websteds designs
- Omkostning: Gratis, open source
- Kræver: Node.js
- Parres med: Claude Code, Cursor, Windsurf eller ethvert AI-kodningsværktøj
- Sidst verificeret: April 2026
Problemet det løser
At beskrive et design med ord er upræcist. "Gør det til at ligne Stripes prisside" giver Claude Code et vagt mål, der kræver 5-10 runder af visuel justering. Hver runde koster tokens og tid.
Design Extract eliminerer beskrivelsesproblemet. Det læser den faktiske CSS, beregnede stilarter, keyframe-animationer og DOM-struktur på enhver side — og pakker det derefter ind i et format, som AI-kodningsværktøjer kan implementere direkte.
Resultatet: i stedet for "gør det til at ligne dette" fulgt af endeløs iteration får du "her er de præcise specifikationer" fulgt af et tæt match på første build.
Sådan bruges det
Installér Design Extract fra dets GitHub-repo. Peg det mod enhver URL. Det udsender et designdokument indeholdende farvepalet med nøjagtige hex/RGB-værdier, typografi inklusive skriftfamilier, størrelser, vægte og linjehøjder, afstands- og layoutmålinger, animationskeyframes og timingfunktioner, interaktionsmønstre som hover-tilstande og transitions, og komponentstruktur med indlejring og hierarki.
Feed dette dokument til Claude Code eller Cursor som kontekst før dit build-prompt. "Brug den vedhæftede designspec til at bygge en landingsside med den samme visuelle stil" producerer dramatisk mere præcise resultater end nogen tekstbeskrivelse.
Hvad det fanger (og hvad det ikke gør)
Design Extract fanger beregnet CSS — de faktiske renderede stilarter, ikke kildekoden. Dette betyder, at det får det endelige visuelle output uanset om originalen blev bygget med Tailwind, CSS-moduler, vanilla CSS eller et CSS-in-JS-bibliotek.
Det fanger animationer og transitions inklusive keyframes, varigheder, easing-funktioner og udløserbetingelser. Hvis en knap har en hover-animation, registrerer Design Extract præcis hvordan den bevæger sig, skaleres og ændrer farve.
Får du værdi af dette? Vi dækker AI design- og kodningsværktøjer med praktisk dybde. Slut dig til læsere, der bygger smartere →
Hvad det ikke fanger: billeder (det henviser til deres positioner, men downloader dem ikke), dynamisk indhold indlæst via JavaScript efter den første rendering (selvom det håndterer det meste SPA-indhold), og responsive breakpoints (det fanger en viewport ad gangen — kør det ved flere bredder for responsive specs).
Praktiske workflows
Landingsside reproduktion. Find 3 landings pages, du beundrer. Kør Design Extract på hver. Feed alle 3 specs til Claude Code med: "Brug elementer fra disse 3 designspecs til at oprette en landingsside for [dit produkt]. Tag farvepalet fra spec 1, typografien fra spec 2 og layoutstrukturen fra spec 3."
Designsystem oprettelse. Kør Design Extract på dit eksisterende site (eller et site, hvis stil du gerne vil vedtage). Outputtet bliver din DESIGN.md fil til Claude Design — hvilket giver det mærkekonsistent kontekst til enhver fremtidig prototype.
Konkurrenceanalyse. Udtræk designene af dine top 3 konkurrenter. Sammenlign deres visuelle tilgange side ved side. Brug de bedste elementer til at informere din egen designretning — uden at inspicere hundredvis af elementer manuelt.
Etik-noten
Design Extract fanger visuelle specifikationer, ikke proprietær kode eller ophavsretsbeskyttede aktiver. At bruge det til inspiration og læring er standardpraksis — det samme som det, designere gør manuelt i DevTools hver dag. At kopiere en konkurrents design pixel-for-pixel og præsentere det som originalt er etisk forkert uanset hvilke værktøjer du bruger.
For mere om AI-drevne designworkflows, se vores Claude Design praktiske guide og vores Claude Design vs Figma sammenligning. For tips til at gøre dine AI-kodningsinteraktioner mere effektive, læs vores guide til at stoppe med at brænde tokens.
Det er hvad vi gør hver uge. Et dybt dyk i AI-værktøjer, workflows og ærlige synspunkter — ingen hype, intet fyld. Slut dig til os →
Oplysning: Nogle links i denne artikel er tilknytningslinks. Vi anbefaler kun værktøjer, vi selv har testet og bruger regelmæssigt. Se vores fuldstændig oplysningspolitik.