Et website uden skabelon med Claude Code og Refero DESIGN.md

Praktisk materiale om arbejde med projekter og modeller: Ailoot-dokumentation.

Hvorfor ligner Claude Code-websites Tailwind-skabeloner?#

I januar-eksemplet blev der oprettet et lille sideprojekt – en dialer til kold kanvasalg. I et tomt repository blev Claude Code bedt om at bygge startsiden. Resultatet var generisk: en mørk slate-950-baggrund, en purple-500-accentfarve, en fed overskrift i sans serif og tre kort nedenunder med identiske skygger. Samme layout som ChatGPTs første version, Lovables første version og v0’s første version. Efter fem ændringer af prompten med tilføjelserne ”moderne”, ”premium” og ”ikke som alle andre” – intet ændrede sig. Siden så stadig ud, som om den kom fra en samling Tailwind UI Templates.

Det vil sige, at Claude ikke ”ikke ved”, hvordan man laver noget smukt. Den ved, hvad de fleste gør, og gengiver dette flertal. For at få et resultat, der ikke er et gennemsnit, har agenten brug for specifikke begrænsninger: hvilke farver og skrifttyper der skal bruges, hvilke afstande der skal gælde, og hvilke komponenter der skal betragtes som kanoniske.

Det er her, et designsystem kommer ind som kontekst. Ikke ”gør det smukt”, men ”lav det i denne bestemte stil; her er parametrene”.

Refero Styles bygger bro over den afstand med et færdigt artefakt – en DESIGN.md-fil med parametre fra virkelige produkter.

Hvad er Refero Styles?#

På styles.refero.designs hjemmeside står det ligeud: ”opdag over 2.000 AI-agentlæsbare designsystemer fra førende produktwebsites”. Kataloget rummer brands, der sætter den visuelle standard: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal og Duolingo. De udtrækkes ikke manuelt – Refero-teamet kører et script, der analyserer et websites faktiske CSS og markup og pakker resultatet i struktureret markdown. Selve biblioteket på styles.refero.design er gratis.

Nøgleordet er ”strukturerede”. Filen indeholder ingen skærmbilleder og ingen beskrivelse som ”i minimalistisk stil”. Den består af markdown med specifikke hexfarver, præcise skriftstørrelser i pt, afstandsenheder og regler for komponenter. AI-agenten læser filen og arbejder med konkrete detaljer i stedet for forsøg på at beskrive smag med ord.

Refero-teamet angiver de understøttede værktøjer på sin ai-agents-side som ”Cursor, Claude Code, Codex, v0 og Lovable”. DESIGN.md fungerer altså som et universelt artefakt – én fil, der passer til alle de store AI-udviklingsagenter.

Hvad indeholder en DESIGN.md?#

Refero-teamet beskriver filstrukturen på sin side med design-md-skabelonen sådan:

Filstrukturen ser altså typisk sådan ud:

Skaberne fremhæver også et princip, der løser 80 % af AI-designproblemerne:

Hexkoden #5E6AD2 vejer altså tungere end ”som Linear”. Den præcise værdi font-size: 13px / line-height: 18px vejer tungere end ”kompakt tekst”. Konkrete detaljer slår fortolkning.

DESIGN.md i repositoryet er ikke et billede til teamet. Den er en byggesten i projektets permanente kontekst: struktureret viden, som AI læser ved hver forespørgsel.

Sådan laver du et website i Linears stil i 4 trin#

Disse fire trin udgør den beskrevne rækkefølge for at starte et nyt website. Ikke ”fire trin i almindelighed”, men en specifik sekvens med én handling for hvert trin.

1. Installér Claude Code

   Den indbyggede installationskommando med én linje er curl -fsSL https://claude.ai/install.sh | bash (den anbefalede metode i den officielle dokumentation). På macOS fungerer brew install --cask claude-code; på Windows fungerer winget install Anthropic.ClaudeCode. Hvis det allerede er installeret, skal du kontrollere versionen: claude --version (2.1.178+ er nødvendig – denne version indførte tilladelser med Tool(param:value) og blokering af farlige git-kommandoer i automatisk tilstand). Log ind på din konto: claude starter guiden. Claude Code er inkluderet i et Pro-abonnement ($17/måned ved årlig betaling eller $20/måned ved månedlig betaling).

2. Åbn Refero Styles, og vælg et brand

   Gå til https://styles.refero.design, og åbn kataloget. Det vigtigste udvælgelseskriterium er, hvor godt det passer til dit produkt, ikke om du ”kan lide udseendet”. Bygger du et SaaS-dashboard? Se på Linear, Vercel og Notion. Bygger du et fintech-produkt? Se på Stripe, Mercury og Column. Bygger du et produkt til medlemmer? Se på Duolingo. Åbn et brandkort, og klik på ”Copy DESIGN.md”.

3. Læg DESIGN.md ind i projektet som kontekst

   Opret filen docs/DESIGN.md i projektets rodmappe, og indsæt det kopierede indhold. Åbn derefter CLAUDE.md, og tilføj én linje: @docs/DESIGN.md. Det er et importdirektiv – Claude Code indlæser indholdet i konteksten, når en session starter. Læs mere om importer i CLAUDE.md i guiden til én instruktionsfil til Claude Code, Codex og Cursor.

4. Skriv en prompt til en bestemt side

   Ikke ”gør den smuk”. Vær specifik: ”Byg en startside til et SaaS-produkt til opgavestyring med DESIGN.md i konteksten. Struktur: hero med en overskrift og underoverskrift, to CTA-knapper (primær og sekundær), et afsnit nedenunder med 3 funktioner og ikoner og derefter et afsnit med kundeudtalelser. Brug præcis farverne og typografien fra DESIGN.md; find ikke på dine egne.”

Efter det fjerde trin bygger Claude siden. I den beskrevne erfaring tager en startside i gennemsnit 8–12 minutter – og den ligner faktisk det valgte brands stil. Ikke en pixelperfekt kopi, men en genkendelig æstetik: de samme skrifttyper, den samme palette, den samme afstandsrytme og de samme små beslutninger i knapperne.

Refero-skaberne beskriver det samme princip i tre trin lidt kortere på deres ai-agents/design-resources-side:

Denne rækkefølge på fire trin følger samme logik med de ekstra, udtrykkelige trin, hvor Claude Code installeres, og filen importeres i CLAUDE.md.

Hvilken stil skal du vælge til dit produkt?#

Refero-skaberne giver dette råd allerede i guidens første trin: vælg ikke kun en reference efter brandnavnet, men også efter tæthed, tone og målgruppe.

Hvad betyder det i praksis? Apple-afledte farver, typografi, hierarki og afdæmpet bevægelse kan passe til et SaaS-dashboard, mens den luftige afstand fra en bestemt produktmarkedsføringsside måske ikke gør. Undersøg den konkrete reference frem for at vælge efter brandnavn. Indstil kompakte rækkehøjder, afstande og informationstæthed udtrykkeligt til et bogføringsdashboard med læsbare tal og kontroller; kopiér ikke et luftigt præsentationslayout uændret.

En enkel vejledning til valg efter produkttype:

Hvis du stadig er i tvivl, så vælg Linear. Det har det mest alsidige fundament: en neutral palette, læsbar typografi (Inter / Söhne) og afdæmpede afstande. Et website baseret på Linear vil se professionelt ud til 9 ud af 10 produkttyper.

Hvorfor gøre DESIGN.md til en del af projektets permanente kontekst?#

I den beskrevne praksis gemmes DESIGN.md ved siden af CLAUDE.md i hvert projekt, der administreres med AI-agenter. Filen betragtes ikke som ”midlertidig til én opgave”. Den er en permanent kanon, som alle fremtidige sessioner bygger på. Om en måned kan du bede Claude om at tilføje en ny side til projektet – den åbner den samme DESIGN.md og bygger i samme stil. Om seks måneder kan du overlade projektet til et andet teammedlem – vedkommende kan også køre Claude og få et ensartet resultat, fordi DESIGN.md ligger i repositoryet.

I design fungerer princippet sådan: En beslutning træffes én gang – om paletten, typografien og afstandsrytmen. Derefter tager hver AI-agent den for givet.

Design lever altså som kode (markdown er kode), ikke som en Figma-fil, som AI ikke kan læse. Når designet er en fil i repositoryet, læser Claude Code den, Codex læser den, og fremtidige værktøjer kan læse den. Når designet ligger i Figma, befinder det sig på et separat plan og skal oversættes manuelt til hver session.

I de beskrevne sideprojekter blev denne struktur brugt:

project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (visual canon, copied from Refero)
│   ├── ARCHITECTURE.md  (project structure)
│   └── BRAND.md         (tone of voice, vocabulary)
└── ...

Disse tre filer er én måde at organisere projektets permanente kontekst på. DESIGN.md håndterer det visuelle, ARCHITECTURE.md håndterer strukturen, og BRAND.md håndterer stemmen. Enhver AI-agent med adgang til repositoryet får alle tre som kontekst.

Hvad er Refero MCP og refero_skill?#

Refero Styles er grundlaget (DESIGN.md som fil). Den næste bølge består af integrationer, der gør adgangen til biblioteket ”indbygget” for AI-agenter.

Refero MCP (officiel). Dette er en server-API på https://api.refero.design/mcp, som Claude Code opretter forbindelse til med et bearer-token. Agenten får derefter adgang til over 150.000 skærme og over 6.000 brugerflows fra virkelige produkter. Du kan installere den med en skill:

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

Efter installationen starter Claude ”design research” i begyndelsen af hver session som et obligatorisk første trin: Den undersøger, hvilke visuelle valg der passer til opgaven, og foreslår om nødvendigt tre retninger knyttet til den valgte reference. Pr. 23. juni 2026 har refero_skill-repositoryet 67 commits og 135 stjerner. Et nyt produkt under aktiv udvikling.

Den beskrevne praksis bruger en enkel tilgang: Åbn sitet manuelt, kopier DESIGN.md, og læg den i en fil. MCP er nyttig, når arbejde med designsystemer bliver rutine – for eksempel når du administrerer flere kundeprojekter og skifter mellem visuelle kanoner hver dag. Læs mere om at forbinde MCP-servere til Claude Code i guiden til NotebookLM og MCP.

Hvilke 4 fejl ødelægger arbejdsgangen?#

Disse fire fejl går igen i den beskrevne erfaring med at arbejde med designkontekst. Hver enkelt virker harmløs, men hver fører resultatet tilbage til standard-Tailwind-skabelonen.

Fejl 1. Prompten ”få det til at se moderne ud”. Dette er det mest almindelige fejlmønster. Folk åbner Claude Code og skriver: ”Byg et SaaS-website til mig, moderne stil, premium-look.” De får en mørk baggrund plus en lilla accent. I træningsdataene hænger ordet ”moderne” sammen med alle landingssiderne fra 2022–2024, der er bygget ud fra den samme skabelon. Uden de præcise parametre fra DESIGN.md betyder ”moderne” ”gennemsnitligt”.

Fejl 2. Indsæt DESIGN.md i chatten som en besked. Nogle gange kopierer folk DESIGN.md ind i Claude Codes chatvindue og siger: ”Her er stilen, brug den.” Det virker én gang – indtil sessionen slutter. Åbn en ny session (eller skift til en anden opgave, /clear), så er konteksten væk. Hvis du vil have stilen til at bestå, skal filen ligge i repositoryet og importeres i CLAUDE.md. Læs mere om, hvorfor CLAUDE.md er den permanente konteksts omdrejningspunkt, i guiden til Claude-hukommelse.

Fejl 3. Vælg en stil, fordi du “kan lide den”. En luftig Apple-markedsføringsreference kan være et dårligt layout at kopiere uændret til et ejendomsdashboard med behov for 30 opslag på skærmen. Det udelukker ikke Apple-afledt typografi, palette eller hierarki: Tilpas afstande og rækketæthed til opgaven, og kontrollér derefter den faktiske synlige information ved målskærmstørrelsen. Vælg konkret reference efter tæthed, tone og målgruppe, ikke kun brandnavnet.

Fejl 4. Nævn ikke DESIGN.md i selve prompten. DESIGN.md kan ligge i repositoryet, være importeret gennem CLAUDE.md og være synlig for agenten. Men hvis prompten siger ”byg et website”, kan Claude vælge standardløsningen uden udtrykkeligt at henvise til filen. Denne linje er nyttig i enhver designprompt: ”Brug præcis farverne, skrifttyperne og afstandene fra docs/DESIGN.md. Find ikke på dine egne værdier – hent dem fra filen.” Det sikrer, at agenten bruger DESIGN.md i stedet for at omgå den.

Præcise tokens er hexkoder, skriftstørrelser i pt og afstandsenheder i DESIGN.md. Naturligt sprog betyder ”moderne”, ”premium”, ”rent” eller ”som Apple”. Præcise tokens virker; frie formuleringer gør ikke.

Hvad skal du gøre nu?#

Nu har du den grundlæggende arbejdsgang: Claude Code + DESIGN.md fra Refero + 4 trin = et website uden skabelon. Det dækker 70 % af behovene. De resterende 30 % er tilfælde, hvor du har brug for større præcision, mere hastighed eller verifikation.

Tre retninger at følge, når du har styr på det grundlæggende:

1. Frontend Design Skill. Dette er en officiel skill til Claude Code, der tilføjer visuel feedback. Agenten tager et skærmbillede af den færdigsamlede side med Puppeteer, ser på det med sine ”øjne” (en synsmodel), sammenligner det med DESIGN.md og foreslår selv rettelser. Det er en automatiseret ”prompt → kode → skærmbillede → kritik → prompt”-cyklus. Nyttigt, når en side er kompleks, og du ikke kan få den rigtig i én iteration.

2. Refero MCP i produktionstilstand. Når du administrerer 3–5 projekter parallelt, bliver det besværligt manuelt at tilføje DESIGN.md til hvert projekt. Refero MCP kan finde 3 passende stilarter ud fra en projektbeskrivelse og give dig mulighed for at vælge. Det reducerer tiden til at starte et nyt projekt fra 30 minutter til 3.

3. Kombination med Context Engineering. DESIGN.md er et af kontekstartefakterne. Ved siden af den finder du typisk ARCHITECTURE.md (projektstruktur), BRAND.md (stemme og tone) og business/audience.md (målgruppe). De importeres alle i CLAUDE.md. Når Claude bygger en side, tager den højde for det visuelle, målgruppen og produktets struktur. Det er i bund og grund Context Engineering – systematisk arbejde med det, du giver agenten før en forespørgsel.

Praktisk materiale: Ailoot-dokumentation.

Praktisk materiale: Ailoot-dokumentation.

Mere materiale og værktøjer: Ailoot.