Et nettsted uten mal med Claude Code og Refero DESIGN.md

Praktisk materiale om arbeid med prosjekter og modeller: Ailoot-dokumentasjon.

Hvorfor ligner nettsteder laget med Claude Code på Tailwind-maler?#

I januareksempelet som beskrives, ble et lite sideprosjekt laget – en oppringer for kaldt salg. I et tomt repositorium fikk Claude Code beskjed om å bygge hjemmesiden. Resultatet var generisk: en mørk slate-950-bakgrunn, en purple-500-aksentfarge, en fet overskrift i sans serif og tre kort under med identiske skygger. Samme layout som den første utgaven av ChatGPT, den første utgaven av Lovable og den første utgaven av v0. Fem endringer i prompten med tillegg som «moderne», «premium» og «ikke som alle andre» endret ingenting. Siden så fortsatt ut som om den kom fra en samling Tailwind UI Templates.

Det betyr ikke at Claude «ikke vet» hvordan man lager noe vakkert. Det vet hva de fleste gjør, og gjenskaper det flertallet gjør. For å få et resultat som ikke er et gjennomsnitt, trenger agenten tydelige rammer: hvilke farger, skrifttyper og mellomrom som skal brukes, og hvilke komponenter som skal regnes som standard.

Det er her et designsystem kommer inn som kontekst. Ikke «gjør det vakkert», men «lag det i denne bestemte stilen; her er parameterne».

Refero Styles bygger bro over dette gapet med et ferdig artefakt – en DESIGN.md-fil med parametere fra ekte produkter.

Hva er Refero Styles?#

Hjemmesiden til styles.refero.design sier det rett ut: «oppdag over 2,000 designsystemer fra ledende produktsider som AI-agenter kan lese». Katalogen inneholder merker som setter den visuelle standarden: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. De hentes ikke ut manuelt – Refero-teamet kjører et skript som analyserer nettstedets faktiske CSS og markup og pakker resultatet inn i strukturert markdown. Selve biblioteket på styles.refero.design er gratis.

Nøkkelordet er «strukturert». Filen inneholder ingen skjermbilder og ingen beskrivelser som «i en minimalistisk stil». Den er markdown med konkrete hexfarger, nøyaktige skriftstørrelser i pt, enheter for mellomrom og regler for komponenter. AI-agenten leser filen og jobber med konkrete detaljer i stedet for å forsøke å beskrive smak med ord.

Refero-teamet lister opp de støttede verktøyene på ai-agents-siden som «Cursor, Claude Code, Codex, v0 og Lovable». Med andre ord fungerer DESIGN.md som et universelt artefakt – én fil som passer til alle de viktigste AI-utviklingsagentene.

Hva inneholder en DESIGN.md?#

Refero-teamet beskriver filstrukturen på siden design-md-template slik:

Filstrukturen ser vanligvis slik ut:

Skaperne fremhever også et prinsipp som løser 80% av AI-designproblemene:

Det vil si at hexfargen #5E6AD2 er sterkere enn «som Linear». Den nøyaktige verdien font-size: 13px / line-height: 18px er sterkere enn «kompakt tekst». Konkrete detaljer slår tolkning.

DESIGN.md i repositoriet er ikke et bilde for teamet. Det er en byggestein i prosjektets permanente kontekst: strukturert kunnskap som AI leser for hver forespørsel.

Slik lager du et nettsted i Linear-stil på 4 trinn#

Disse fire trinnene utgjør den beskrevne sekvensen for å starte et nytt nettsted. Ikke «fire generelle trinn», men en konkret sekvens med én handling for hvert trinn.

1. Installer Claude Code

   Opprinnelig installasjonsprogram med én kommando: curl -fsSL https://claude.ai/install.sh | bash (den anbefalte metoden i den offisielle dokumentasjonen). På macOS fungerer brew install --cask claude-code; på Windows fungerer winget install Anthropic.ClaudeCode. Hvis det allerede er installert, sjekk versjonen: claude --version (du trenger 2.1.178+ – denne versjonen introduserte tillatelser for Tool(param:value) og blokkering av farlige git-kommandoer i automatisk modus). Logg inn på kontoen din: claude starter veiviseren. Claude Code er inkludert i et Pro-abonnement ($17 per måned ved årlig betaling eller $20 per måned ved månedlig betaling).

2. Åpne Refero Styles og velg et merke

   Gå til https://styles.refero.design og åpne katalogen. Det viktigste utvalgskriteriet er hvor godt stilen passer til produktet ditt, ikke om du «liker utseendet». Bygger du et SaaS-dashbord? Se på Linear, Vercel og Notion. Bygger du et fintech-produkt? Se på Stripe, Mercury og Column. Bygger du et produkt for medlemmer? Se på Duolingo. Åpne et merkekort og klikk på «Copy DESIGN.md».

3. Legg DESIGN.md inn i prosjektet som kontekst

   Opprett en docs/DESIGN.md-fil i prosjektets rotmappe og lim inn det kopierte innholdet. Åpne deretter CLAUDE.md og legg til én linje: @docs/DESIGN.md. Dette er en importdirektiv – Claude Code laster innholdet inn i konteksten når en økt starter. Les veiledningen til én instruksjonsfil for Claude Code, Codex og Cursor for mer om importer i CLAUDE.md.

4. Skriv en prompt for en bestemt side

   Ikke «gjør den vakker». Vær konkret: «Bruk DESIGN.md i konteksten til å bygge en hjemmeside for et SaaS-produkt for oppgavehåndtering. Struktur: hero med overskrift og underoverskrift, to CTA-knapper (primær og sekundær), en blokk under med 3 funksjoner og ikoner, og deretter en blokk med anbefalinger. Bruk nøyaktig fargene og typografien fra DESIGN.md; ikke finn på egne verdier.»

Etter det fjerde trinnet bygger Claude siden. I den beskrevne erfaringen tar det i gjennomsnitt 8–12 minutter å lage en hjemmeside – og den ligner faktisk på stilen til det valgte merket. Ikke en pikselperfekt kopi, men en gjenkjennelig estetikk: de samme skrifttypene, den samme paletten, den samme rytmen i mellomrommene og de samme små valgene i knappene.

Refero-skaperne beskriver det samme prinsippet i tre trinn litt kortere på siden ai-agents/design-resources:

Denne sekvensen på fire trinn følger samme logikk, med de ekstra, eksplisitte trinnene med å installere Claude Code og importere filen i CLAUDE.md.

Hvilken stil bør du velge for produktet ditt?#

Refero-skaperne gir dette rådet allerede i det første trinnet i veiledningen: velg en referanse ut fra tetthet, tone og målgruppe, ikke bare merkenavnet.

Hva betyr det i praksis? Apple-inspirerte farger, typografi, hierarki og dempet bevegelse kan passe et SaaS-dashbord, mens romslig avstand fra en bestemt produktmarkedsføringsside kanskje ikke passer. Undersøk den konkrete referansen fremfor å velge etter merkenavn. For et regnskapsdashbord angir du kompakte radhøyder, avstander og informasjonstetthet uttrykkelig, med lesbare tall og kontroller. Ikke kopier et romslig presentasjonsoppsett uendret.

En enkel veiledning for valg av produkttype:

Er du fortsatt usikker, velg Linear. Det har det mest allsidige grunnlaget: en nøytral palett, lesbar typografi (Inter / Söhne) og moderate mellomrom. Et nettsted basert på Linear vil se profesjonelt ut for 9 av 10 produkttyper.

Hvorfor gjøre DESIGN.md til en del av prosjektets permanente kontekst?#

I den beskrevne arbeidsmåten lagres DESIGN.md ved siden av CLAUDE.md i hvert prosjekt som administreres med AI-agenter. Filen regnes ikke som «midlertidig for én oppgave». Den er en permanent kanon som alle framtidige økter bygger på. Om en måned kan du be Claude legge til en ny side i prosjektet – det åpner samme DESIGN.md og bygger i samme stil. Om seks måneder kan du overlate prosjektet til et annet teammedlem – vedkommende kan også kjøre Claude og få et konsekvent resultat fordi DESIGN.md ligger i repositoriet.

I design fungerer prinsippet slik: én gang tar man en beslutning om palett, typografi og rytmen i mellomrommene. Deretter tar hver AI-agent dette for gitt.

Det vil si at design lever som kode (markdown er kode), ikke som en Figma-fil som AI ikke kan lese. Når designet er en fil i repositoriet, kan Claude Code lese det, Codex kan lese det, og framtidige verktøy kan lese det. Når designet ligger i Figma, lever det i et eget miljø og må oversettes manuelt for hver økt.

I de beskrevne sideprosjektene ble denne strukturen brukt:

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 filene er én måte å organisere prosjektets permanente kontekst på. DESIGN.md håndterer det visuelle, ARCHITECTURE.md håndterer strukturen, og BRAND.md håndterer stemmen. Alle AI-agenter med tilgang til repositoriet får alle tre som kontekst.

Hva er Refero MCP og refero_skill?#

Refero Styles er grunnlaget (DESIGN.md som fil). Den neste bølgen består av integrasjoner som gjør tilgangen til biblioteket «innebygd» for AI-agenter.

Refero MCP (offisiell). Dette er et server-API på https://api.refero.design/mcp som Claude Code kobler seg til med et bearer-token. Agenten får da tilgang til over 150,000 skjermer og 6,000 brukerflyter fra ekte produkter. Du kan installere det med en skill:

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

Etter installasjonen starter Claude «design research» som et obligatorisk første trinn ved begynnelsen av hver økt: den undersøker hvilke visuelle valg som passer til oppgaven, og foreslår om nødvendig tre retninger knyttet til den valgte referansen. Per 23. juni 2026 har refero_skill-repositoriet 67 commits og 135 stjerner. Et nytt produkt under aktiv utvikling.

Den beskrevne arbeidsmåten bruker en enkel tilnærming: åpne nettstedet manuelt, kopier DESIGN.md og legg den i en fil. MCP er nyttig når arbeid med designsystemer blir rutine – for eksempel når du administrerer flere kundeprosjekter og bytter mellom visuelle kanoner hver dag. Les veiledningen om NotebookLM og MCP for mer om hvordan du kobler MCP-servere til Claude Code.

Hvilke 4 feil ødelegger arbeidsflyten?#

Disse fire feilene går igjen i den beskrevne erfaringen med designkontekst. Hver av dem virker uskyldig, men hver gang blir resultatet igjen standard Tailwind-mal.

Feil 1. Prompten «gjør det moderne». Dette er det vanligste feil mønsteret. Folk åpner Claude Code og skriver: «lag et SaaS-nettsted for meg, moderne stil, premium uttrykk». De får mørk bakgrunn og lilla aksent. I treningsdataene henger ordet «moderne» sammen med alle landingssidene fra 2022–2024 som ble laget med samme mal. Uten nøyaktige parametere fra DESIGN.md betyr «moderne» «gjennomsnittlig».

Feil 2. Lim inn DESIGN.md i chatten som en melding. Noen ganger kopierer folk DESIGN.md inn i Claude Code-chattevinduet og sier: «her er stilen, bruk den». Det fungerer én gang – fram til økten er over. Åpne en ny økt (eller bytt til en annen oppgave, /clear), så er konteksten borte. Hvis du vil at stilen skal vare, må filen ligge i repositoriet og importeres i CLAUDE.md. Les veiledningen om Claude-minne for mer om hvorfor CLAUDE.md er stedet for permanent kontekst.

Feil 3. Velg en stil fordi du «liker den». En romslig Apple-markedsføringsreferanse kan være dårlig å kopiere uendret til et eiendomsdashbord som trenger 30 oppføringer på skjermen. Det utelukker ikke Apple-inspirert typografi, palett eller hierarki. Tilpass avstand og radtetthet til oppgaven, og kontroller faktisk synlig informasjon ved målskjermstørrelsen. Velg den konkrete referansen etter tetthet, tone og målgruppe, ikke bare merkenavn.

Feil 4. Ikke nevn DESIGN.md i selve prompten. DESIGN.md kan ligge i repositoriet, være importert via CLAUDE.md og være synlig for agenten. Men hvis prompten sier «bygg et nettsted», kan Claude følge standardframgangsmåten uten å vise uttrykkelig til filen. Denne setningen er nyttig i hver designprompt: «Bruk nøyaktig fargene, skrifttypene og mellomrommene fra docs/DESIGN.md. Ikke finn på egne verdier – hent dem fra filen.» Dette sørger for at agenten bruker DESIGN.md i stedet for å hoppe over den.

Eksakte tokens er hexfarger, skriftstørrelser i pt og mellomromsenheter i DESIGN.md. Naturlig språk betyr «moderne», «premium», «rent» eller «som Apple». Eksakte tokens fungerer; frie formuleringer gjør det ikke.

Hva bør du gjøre videre?#

Nå har du den grunnleggende arbeidsflyten: Claude Code + DESIGN.md fra Refero + 4 trinn = et nettsted uten mal. Dette dekker 70% av behovene. De resterende 30% gjelder situasjoner der du trenger større presisjon, høyere hastighet eller verifisering.

Tre retninger du kan følge etter at du har lært det grunnleggende:

1. Frontend Design Skill. Dette er en offisiell skill for Claude Code som legger til visuell tilbakemelding. Agenten tar et skjermbilde av den ferdigbygde siden med Puppeteer, ser på det med «øynene» sine (en vision-modell), sammenligner det med DESIGN.md og foreslår selv rettelser. Dette er en automatisert «prompt → kode → skjermbilde → kritikk → prompt»-sløyfe. Nyttig når siden er komplisert og du ikke får den riktig i én iterasjon.

2. Refero MCP i produksjonsmodus. Når du administrerer 3–5 prosjekter parallelt, blir det tungvint å legge til DESIGN.md manuelt for hvert enkelt. Refero MCP kan finne 3 passende stiler basert på prosjektbeskrivelsen og gi deg et valg. Dette reduserer oppstarten av et nytt prosjekt fra 30 minutter til 3.

3. Kombiner med Context Engineering. DESIGN.md er ett av kontekstartefaktene. Ved siden av finner du vanligvis ARCHITECTURE.md (prosjektstruktur), BRAND.md (merkevarens stemme) og business/audience.md (målgruppe). Alle importeres i CLAUDE.md. Når Claude bygger en side, tar den hensyn til det visuelle, målgruppen og produktstrukturen. I praksis er dette Context Engineering – systematisk arbeid med hva du gir agenten før en forespørsel.

Praktisk materiale: Ailoot-dokumentasjon.

Praktisk materiale: Ailoot-dokumentasjon.

Flere materialer og verktøy: Ailoot.