Sådan bygger du et websted med Claude og Figma på 2 timer

Du kan gå fra et Figma-design til et live, udployeret website på en eneste eftermiddag ved hjælp af Claude — uden kodningserfaring. Arbejdsgangen er simpel: design i Figma, eksportér eller beskriv designet til Claude, generer koden, deploy på Vercel eller Netlify. Det hele koster $0, hvis du bruger gratis versioner.

Folk poster "$5.000 website på 2 timer"-klip på X, men de fleste springer de faktiske trin over. Denne guide fylder det hul. Alle prompter er inkluderet, hvert beslutningspunkt er forklaret, og kompromiserne er ærlige.

Hvorfor det virker nu (og ikke gjorde for et år siden)

For et år siden betød det at omdanne et design til kode med AI at indsætte et screenshot og få tilbage en grov tilnærmelse, der havde brug for timers oprydning. I dag betyder Claudes 1M-token kontekstvindue, at du kan give det hele designsystem — farver, typografi, spacing, komponentdetaljer — og få tilbage produktionskvalitetskode, der closely matcher dit design ved første forsøg.

Nøgleindsigten: kvaliteten af det du får afhænger næsten udelukkende af hvor godt du beskriver designet. Vage beskrivelser producerer vage websites. Specifikke, strukturerede beskrivelser producerer specifikke, polerede websites.

Hvad du skal bruge

Tre værktøjer, alle med gratis versioner:

Figma — til dit design. Gratis version virker fint. Hvis du ikke har et design, tag en gratis skabelon fra Figma Community og tilpas den.

Claude — til kodegenerering. Gratis version giver dig Sonnet, som håndterer dette godt. Pro ($20/md) giver dig Opus 4.7 til mere komplekse sites.

Vercel eller Netlify — til deployment. Begge har gratis versioner. Forbind dit GitHub-repo, push kode, site går live.

Trin 1: Forbered dit Figma-design

Før du involverer Claude, få din Figma-fil organiseret. Dette trin bestemmer kvaliteten af alt det, der følger.

Dit design skal have klart definerede sider (Hjem, Om, Kontakt osv.), konsistent spacing og justering, en synlig farvepalet (notér de nøjagtige hex-værdier), identificerede fonte og responsive breakpoints for desktop og mobil hvis muligt.

Bekymr dig ikke om pixel-perfekthed. Claude håndterer implementeringsdetaljer godt. Det der betyder noget er at dit design kommunikerer struktur, hierarki og visuell stil klart.

Pro tip: Navngiv dine Figma-lag meningsfuldt. "Hero Section," "Feature Cards," "Pricing Table" er meget mere nyttige for dig når du skriver prompts end "Frame 247."

Trin 2: Eksportér dine designoplysninger

Claude kan ikke læse en Figma-fil direkte, så du skal oversætte dit design til information, som Claude kan arbejde med. Du har tre tilgange, fra nemmeste til mest præcis:

Tilgang A: Screenshot + beskrivelse. Tag full-page screenshots af hver side i dit design. Upload dem til Claude sammen med en skriftlig beskrivelse af layoutet, farverne og interaktionerne. Dette er den hurtigste tilgang og virker overraskende godt.

Tilgang B: Figma Dev Mode eksport. Hvis du har Figmas betalte plan, brug Dev Mode til at eksportere CSS-værdier, spacing tokens og komponentspecifikationer. Feed disse til Claude sammen med screenshots for mere præcist output.

Tilgang C: Skriftlig designspecifikation. Skriv en detaljeret beskrivelse af hvert afsnit — header, hero, features, testimonials, footer — inklusive farver, fonte, størrelser og layout. Dette tager længere tid men giver dig mest kontrol over outputtet. Hvis du bygger uden et Figma-design, er dette din vej.

Trin 3: Skriv din indledende prompt

Det er her de fleste gør det forkert. De skriver "byg mig et website, der ser sådan ud som dette screenshot" og får generisk output. Her er den promptstruktur, der konsistent producerer kvalitetsresultater:

Jo mere specifik du er om hvad brugeren ser, jo bedre output. Beskriv ikke koden — beskriv oplevelsen. Hvis du skal skærpe denne prompt før du sender den, kan vores gratis promptoptimizer hjælpe med at strukturere den for bedre resultater.

Trin 4: Gennemse og iterér

Claudes første output fanger normalt 60–80% af dit design. De resterende 20–40% kommer fra iteration. Dette er det trin hvor de fleste "vibe coding"-tutorials slutter, men det er hvor den rigtige kvalitet sker.

Gennemse outputtet ved at tjekke tre ting: matcher layoutet dit design? Føles farverne og typografien rigtigt? Ser det godt ud på mobil?

Iterér derefter med specifikt feedback. Sig ikke "gør det bedre." Sig:

• "Hero-sektionen har brug for mere vertikal padding — tilføj 120px top og bottom"
• "Feature-kortene skal være i et 3-kolonne grid på desktop, enkelt kolonne på mobil"
• "CTA-knappen skal have en hover-effekt — mørkere baggrunden med 10% og skaler lidt op"
• "Footerlinks skal arrangeres i 4 kolonner: Produkt, Virksomhed, Ressourcer, Juridisk"

Hver runde feedback skal adressere 3–5 specifikke problemer. Tre runder får dig normalt til 95% af dit design.

Trin 5: Tilføj reelt indhold og billeder

Erstat pladsholdertekst med din faktiske kopi. Erstat placeholder-billededivs med rigtige billeder. Hvis du skal bruge hjælp til at skrive websitekopi, er Claude fremragende til dette — feed det din brandebeskrivelse og bed om hjemmesidekopi, der matcher din tone.

Til billeder, brug gratis stock fra Unsplash eller Pexels, eller generer tilpassede billeder med et AI-billedværktøj. Drop billedfilerne i dit projekts /public mappe og opdater src attributterne.

Trin 6: Deploy med ét klik

Hvis du brugte Next.js (anbefalet), tager deployment på Vercel 60 sekunder:

1. Push din kode til et GitHub-repository
2. Gå til vercel.com og log ind med GitHub
3. Klik "Import Project" og vælg dit repo
4. Vercel auto-detekterer Next.js og konfigurerer alt
5. Klik "Deploy"

Dit site er live med en .vercel.app URL. Forbind et brugerdefineret domæne i Vercels indstillinger hvis du har et.

Netlify virker næsten identisk — import fra GitHub, auto-detect framework, deploy. Begge platforme håndterer SSL, CDN og kontinuerlig deployment automatisk. Hver gang du pusher til GitHub, opdateres dit site.

Er du usikker på hvilken deploymentplatform du skal bruge? Vi skrev en fuld sammenligning: Hvor deployer du efter vibe coding?

Almindelige fejl som snubler folk

1. At give Claude et screenshot uden skriftlig kontekst. Screenshots hjælper, men Claude har brug for skriftlige beskrivelser af farver, fonte, spacing og layout for at producere præcis kode. Skærmbilledet er en reference — teksten er instruktionen.

2. At prøve at bygge alt i én prompt. Et 6-sides website med animationer, formularer og en CMS er for meget til ét pass. Byg side for side, afsnit for afsnit. Start med hjemmesiden, få den rigtig, gå derefter til næste side.

3. At springe mobil responsivitet over. Hvis du ikke nævner mobil i din prompt, vil Claude bygge et desktop-only layout. Inkludér altid "mobile responsive" i dine tekniske krav og test outputtet ved 375px bredde.

4. At ikke teste interaktioner. Klik på hver knap, udfyld hver formular, scroll hver side. AI-genereret kode ser ofte rigtig ud men har ødelagte links, ikke-funktionelle formularer eller manglende hover-states. Test før deployment.

5. Perfektionisme før deployment. Ship ved 90% og iterér. Dit første deployment behøver ikke være perfekt — det skal være live. Du kan pushe opdateringer på sekunder.

Bygger til klienter? Læs vores guide om 5 sikkerhedsfejl, som enhver vibe coder laver før du leverer.

Bundlinjen

Figma-til-Claude-til-deploy-arbejdsgangen er den hurtigste måde at omdanne et design til et funktionelt website uden selv at skrive kode. Kvaliteten afhænger af specificitet i dine prompts, ikke kodningserfaring. Tre runder iteration får dig normalt fra første udkast til produktionsklar.

Start med et simpelt projekt — en portfolio eller landingsside — og arbejd gennem hele cyklussen én gang. Anden gang tager det halvt så lang tid, fordi du præcist ved hvordan du strukturerer dine prompts.

Usikker på hvilket AI-værktøj der er bedst til dit workflow? Tag vores 60-sekunders Model Picker Quiz for at finde ud af det, eller se den fulde State of AI Models sammenligning.

Oplysning: Nogle links i denne artikel er affiliatelinks. Vi anbefaler kun værktøjer, vi har testet personligt og bruger regelmæssigt. Se vores fulde offentliggørelsespolitik.