Sådan bygger du din hjemmeside med Claude Code og Vercel

Papir først

Før jeg åbnede noget, satte jeg mig ned uden computer. Papir, en kuglepen, og siderne tegnet op én ad gangen.

For hver side skrev jeg tre ting: hvad den hedder, hvem den er til, og hvad hun skal gøre, når hun har læst den. Forsiden skulle få folk til at skrive sig op. Siden til virksomheder skulle få dem til at skrive til mig. Guides skulle være åbne for alle.

Det tog en time. Og det er den time, der gjorde, at Claude fik en plan i stedet for en stemning.

Det du giver Claude

Det her lå i mit Claude-projekt, før jeg bad om den første fil. Det er det, der afgør, om siden ligner dig.

• Dit designsystem

  Farver med hex-koder, to skrifter, og reglerne for, hvordan de bruges. Mit er fem farver, Fraunces til tekst, Caveat til håndskrevne noter, og en tynd ramme om hver sektion.

• Din tone of voice-fil

  Hvordan du skriver. Ord du bruger, ord du aldrig bruger, hvordan en sætning åbner, hvad en knap må hedde. Har du ikke en, så start med brandfilen.

• Tekster du selv har skrevet

  Opslag, nyhedsbreve, det du har på din nuværende side. Tag mange med. Det er dem, den lærer din stemme af.

• Tilbud og mails du har sendt

  Sådan taler du til en kunde, når det gælder. Det er en anden tone end på Instagram, og den skal også med.

• Screenshots og inspiration

  Sider du kan lide, med en linje om hvorfor. Luften, typografien, måden de bruger billeder på. Claude kan se billeder, så vis den det.

• Kunder, cases, tal og priser

  Hvem du har arbejdet for, hvad du byggede, hvad det gav. Skrevet ned, så den henter fakta i stedet for at digte dem.

Den skal hente fakta, ikke digte dem.

Det lyder som meget. Det meste har du allerede liggende. Arbejdet er at samle det ét sted, i filer Claude kan læse, i stedet for i din indbakke og dit hoved.

Design-skills fra GitHub

Beder du en AI om en hjemmeside uden andet, får du standard-AI: runde hjørner, gradient, tre kasser i en række. Det kan rettes, før du begynder.

Der ligger færdige skills på GitHub, som lærer Claude typografi, luft og hierarki. Anthropic har selv et repo med skills på github.com/anthropics/skills, hvor frontend-design ligger. Det er det, jeg startede med. Ovenpå har jeg to skills om designsmag, der trækker i en rolig, redaktionel retning.

Et skill er en mappe med en fil, der hedder SKILL.md. Hent den ned, og læg den ind i Claude. I Claude Code ligger den i mappen .claude/skills i dit projekt. I Claude pakker du mappen som zip, med mappen selv øverst i zip-filen, og uploader den under Customize, så Skills, plusset, Create skill, så Upload a skill. Slå den til, så bruger Claude den af sig selv, når den bygger, også i Claude Code, når du er logget ind med samme konto.

Stakken, lag for lag

Fire værktøjer. Hvert af dem har ét job.

• Claude Code bygger

  Det er Claude, der arbejder direkte i en mappe på din computer. Den skriver filerne, retter dem, og holder styr på dem. Du åbner den i desktop-appen under fanen Code: vælg Local, så Select folder, og peg på mappen. Ingen installation. Kræver en betalt plan: Pro, Max, Team eller Enterprise.

• Design-skills og designsystem styrer udtrykket

  Det du satte op i trin 2 og 3. Claude læser det, hver gang den rører en side.

• GitHub gemmer alt

  Mappen ligger som et repo på GitHub. Hver ændring gemmes med en besked om, hvad der blev ændret. Du kan altid gå tilbage.

• Vercel viser det

  Vercel holder øje med dit repo. Hver gang der kommer noget nyt, går det live af sig selv. Gratisplanen Hobby er til private projekter. Driver du forretning på siden, skal den på Pro.

• Din udbyder har domænet

  Jeg købte mit hos Simply.com. Det eneste, udbyderen skal, er at pege domænet på Vercel.

Det var alt. Ingen WordPress, ingen skabelon, intet abonnement på en sidebygger.

Byg og ret

Én HTML-fil per side. Al styling inde i filen. Skrifter fra Google Fonts. Det er hele den tekniske beslutning, og den gør siden hurtig og let at rette.

Jeg bad Claude bygge én side ad gangen, forsiden først, efter det jeg havde på papir og det, der lå i projektet. Så åbnede jeg den i browseren og så efter.

Rettelser skriver du, som du ville sige dem til en kollega:

Du skriver ikke kode. Du ser efter, og du siger, hvad der skal være anderledes. Ret én ting ad gangen, så kan du se, hvad der skete.

GitHub og Vercel

Det her er det trin, der lyder teknisk og tager ti minutter.

Domænet

Det eneste trin, der tager tid. Og det tager kun tid, hvis du gør det til sidst.

Åbn din browser, log ind hos din udbyder, og bed Claude stå for domænearbejdet. Med Claude i Chrome kan den se skærmen og pege domænet på Vercel, mens du ser på. Det, der skal ske, er to linjer: en A-record på dit domæne, der peger på Vercels IP-adresse, og en CNAME på www, så www-udgaven også virker. Vercel viser dig begge under Domains i dit projekt og foreslår selv www-linjen.

Har du et .dk-domæne, kommer der et trin mere. Punktum dk kræver ID-kontrol med MitID, før domænet aktiveres. Det står i en mail, du får, når du køber det, med en frist på 25 dage. Gør du det ikke, går siden ikke live, uanset hvad DNS siger.

Prompten

Læg filerne fra trin 2 i mappen, åbn mappen i Claude Code, og sæt prompten ind som første besked. Den stiller spørgsmålene, du svarer, og den bygger én side ad gangen.

Du er min webdesigner og udvikler. Vi bygger min hjemmeside sammen, i ren HTML, én fil per side, med al styling inde i filen og skrifter fra Google Fonts. Den skal ligge på GitHub og gå live på Vercel. Du bygger, jeg ser efter. Arbejd gennem trinnene i rækkefølge, og spring ikke frem.

SÅDAN ARBEJDER DU

Stil ét spørgsmål ad gangen, og vent på mit svar. Brug almindeligt dansk. Byg én side ad gangen, og vis mig den, før du går videre til den næste. Opfind aldrig tekst, kunder, tal eller priser. Mangler du noget, så spørg. Ret kun det, jeg beder om at få rettet, og lad resten stå. Send aldrig noget til GitHub, før jeg har sagt ja.

TRIN 1 · LÆS DET, DER LIGGER I PROJEKTET

Læs alle filerne i projektet, før du spørger om noget: mit designsystem, min tone of voice-fil, mine egne tekster, mine tilbud og mails, screenshots og inspiration, og listen over kunder, cases, tal og priser. Opsummér i ti linjer, hvad du har forstået om min forretning og mit udtryk. Ret mig, hvis noget er uklart. Mangler en af filerne, så sig hvilken, og spørg om jeg har den.

TRIN 2 · SIDERNE

Spørg mig, hvilke sider siden skal have. For hver side vil jeg have tre ting på plads, før du bygger: hvad den hedder, hvem den er til, og hvad hun skal gøre, når hun har læst den. Hver side har ét job og én knap. Foreslå selv en rækkefølge, forsiden først.

TRIN 3 · DESIGNSYSTEMET I KODE

Oversæt mit designsystem til en fælles stilblok, som alle sider bruger: farverne som variabler, de to skrifter, afstande, rammer, knapper. Ingen kasser med skygger, ingen gradienter, ingen runde hjørner, medmindre mit designsystem siger det. Vis mig stilblokken på en tom testside, før du bygger noget rigtigt.

TRIN 4 · BYG FORSIDEN

Byg forsiden som én HTML-fil efter det, vi aftalte i trin 2. Teksten skal følge min tone of voice-fil og ligne mine egne tekster. Brug kun kunder, cases og tal fra projektet. Vis mig siden, og vent på mine rettelser. Ret én ting ad gangen.

TRIN 5 · BYG RESTEN

Gentag trin 4 for hver side i rækkefølgen. Samme stilblok, samme navigation, samme footer. Alle links skal virke mellem siderne.

TRIN 6 · GITHUB

Når jeg siger, at siderne er klar: guid mig gennem at oprette en konto på github.com, hvis jeg ikke har en. Opret repoet, og send mappen op. Forklar, hvad du gør, i én linje ad gangen. Brug SSH, hvis det er sat op. Foreslå aldrig et token, før vi har tjekket, om SSH virker.

TRIN 7 · VERCEL

Guid mig gennem at oprette en konto på vercel.com, importere repoet og trykke Deploy. Bed mig sende dig linket, når siden er live, og tjek at alle sider åbner.

TRIN 8 · DOMÆNET

Spørg, hvor mit domæne er købt. Fortæl mig præcis, hvilken DNS-post der skal oprettes hos udbyderen, med de værdier Vercel viser under Domains. Er det et .dk-domæne, så mind mig om ID-kontrollen med MitID hos Punktum dk, og at siden ikke går live, før den er gennemført.

TRIN 9 · HEREFTER

Forklar mig, hvordan en rettelse går fra dig til GitHub til Vercel, så jeg ved, hvad der sker, når jeg beder om noget næste gang. Foreslå tre ting, jeg kan bygge videre på ud fra det fundament, der nu ligger i projektet.

Start nu. Begynd med trin 1.

Næste gang

Fundamentet er det, du bruger igen. Næste side, næste nyhedsbrev, næste karrusel bygger på de samme filer.

Det er derfor, eftermiddagen med papir og filer er godt givet ud. Siden var én dag. Filerne ligger der stadig, og de bliver bedre, hver gang du retter i dem.

Har du ikke et Claude-setup endnu, så start med Kom i gang med Claude. Skal fundamentet skrives først, ligger fremgangsmåden i Byg din brandfil. Vil du hellere bygge det sammen med mig, kan du læse om en session.