Webbplats utan mall med Claude Code och Refero DESIGN.md

Praktiskt material om arbete med projekt och modeller: Ailoot-dokumentation.

Varför ser Claude Code-webbplatser ut som Tailwind-mallar?#

I exemplet från januari skapades ett litet sidoprojekt – en uppringare för kalla säljsamtal. I ett tomt kodförråd ombads Claude Code att bygga startsidan. Resultatet var generiskt: mörk bakgrund i slate-950, en accentfärg i purple-500, en fet rubrik i sans serif och tre kort under den med identiska skuggor. Samma layout som i den första versionen av ChatGPT, Lovable och v0. Efter fem ändringar av prompten med tilläggen ”modern”, ”premium” och ”inte som alla andra” – ingenting förändrades. Sidan såg fortfarande ut att komma från en samling Tailwind UI Templates.

Det betyder inte att Claude ”inte vet” hur man skapar något vackert. Det vet vad de flesta gör och återskapar den majoriteten. För att få ett resultat som inte är ett genomsnitt behöver agenten specifika begränsningar: vilka färger och typsnitt som ska användas, vilka avstånd som ska gälla och vilka komponenter som ska behandlas som kanoniska.

Här kommer ett designsystem in som kontext. Inte ”gör det vackert”, utan ”gör det i den här specifika stilen; här är parametrarna”.

Refero Styles överbryggar det avståndet med en färdig artefakt – en DESIGN.md-fil med parametrar från verkliga produkter.

Vad är Refero Styles?#

På startsidan för styles.refero.design står det rakt ut: ”upptäck över 2 000 AI-agentläsbara designsystem från ledande produktwebbplatser”. Katalogen innehåller varumärken som sätter den visuella standarden: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal och Duolingo. De hämtas inte manuellt – Refero-teamet kör ett skript som analyserar en webbplats faktiska CSS och markup och paketerar resultatet i strukturerad markdown. Själva biblioteket på styles.refero.design är gratis.

Nyckelordet är ”strukturerade”. Filen innehåller inga skärmbilder och ingen beskrivning som ”i minimalistisk stil”. Den består av markdown med specifika hexadecimala färger, exakta teckenstorlekar i pt, avståndsenheter och regler för komponenter. AI-agenten läser filen och arbetar med konkreta detaljer i stället för försök att beskriva smak med ord.

Refero-teamet listar de verktyg som stöds på sin ai-agents-sida: ”Cursor, Claude Code, Codex, v0 och Lovable”. DESIGN.md fungerar med andra ord som en universell artefakt – en fil som passar alla större AI-utvecklingsagenter.

Vad finns i en DESIGN.md?#

Refero-teamet beskriver filstrukturen på sin sida med design-md-mallen så här:

Filstrukturen brukar alltså se ut så här:

Skaparna framhåller också en princip som löser 80 % av AI-designproblemen:

Hexkoden #5E6AD2 väger alltså tyngre än ”som Linear”. Det exakta värdet font-size: 13px / line-height: 18px väger tyngre än ”kompakt text”. Det konkreta slår tolkningen.

DESIGN.md i kodförrådet är inte en bild för teamet. Den är en byggsten i projektets permanenta kontext: strukturerad kunskap som AI läser vid varje förfrågan.

Så skapar du en webbplats i Linears stil på 4 steg#

De här fyra stegen utgör den beskrivna ordningsföljden för att starta en ny webbplats. Inte ”fyra steg i allmänhet”, utan en specifik sekvens med en åtgärd per steg.

1. Installera Claude Code

   Den inbyggda installationskommandot med en rad är curl -fsSL https://claude.ai/install.sh | bash (den rekommenderade metoden i den officiella dokumentationen). På macOS fungerar brew install --cask claude-code; på Windows fungerar winget install Anthropic.ClaudeCode. Om det redan är installerat kontrollerar du versionen med claude --version (2.1.178+ krävs – den versionen införde behörigheter med Tool(param:value) och blockering av farliga git-kommandon i automatiskt läge). Logga in på ditt konto: claude startar guiden. Claude Code ingår i en Pro-prenumeration ($17/månad vid årsbetalning eller $20/månad vid månadsbetalning).

2. Öppna Refero Styles och välj ett varumärke

   Gå till https://styles.refero.design och öppna katalogen. Det viktigaste urvalskriteriet är hur väl det motsvarar din produkt, inte om du ”gillar utseendet”. Bygger du en SaaS-dashboard? Titta på Linear, Vercel och Notion. Bygger du en fintech-produkt? Titta på Stripe, Mercury och Column. Bygger du en produkt för medlemmar? Titta på Duolingo. Öppna ett varumärkeskort och klicka på ”Copy DESIGN.md”.

3. Lägg DESIGN.md i projektet som kontext

   Skapa filen docs/DESIGN.md i projektets rot och klistra in det kopierade innehållet. Öppna sedan CLAUDE.md och lägg till en rad: @docs/DESIGN.md. Det här är ett importdirektiv – Claude Code läser in innehållet i kontexten när en session startar. Mer om importer i CLAUDE.md finns i guiden till en instruktionsfil för Claude Code, Codex och Cursor.

4. Skapa en prompt för en specifik sida

   Säg inte ”gör det vackert”. Var specifik: ”Bygg en startsida för en SaaS-produkt för uppgiftshantering med DESIGN.md i kontexten. Struktur: hero med rubrik och underrubrik, två CTA-knappar (primär och sekundär), ett block nedanför med 3 funktioner och ikoner, och därefter ett block med kundomdömen. Använd exakt färgerna och typografin från DESIGN.md; hitta inte på egna.”

Efter det fjärde steget bygger Claude sidan. I den beskrivna erfarenheten tar en startsida i genomsnitt 8–12 minuter – och den liknar verkligen det valda varumärkets stil. Det är ingen perfekt pixelkopia, men estetiken är igenkännbar: samma typsnitt, samma palett, samma avståndsrytm och samma små beslut i knapparna.

Refero-skaparna beskriver samma princip i tre steg lite kortare på sin sida ai-agents/design-resources:

Den här ordningsföljden på fyra steg följer samma logik, med de uttryckliga tilläggen att installera Claude Code och importera filen i CLAUDE.md.

Vilken stil ska du välja för din produkt?#

Refero-skaparna ger det här rådet redan i guidens första steg: välj referens efter mer än bara varumärket – ta också hänsyn till täthet, ton och målgrupp.

Vad innebär det i praktiken? Färger, typografi, hierarki och återhållsam rörelse hämtade från Apple kan passa en SaaS-dashboard, medan generösa avstånd på en viss marknadsföringssida kanske inte gör det. Granska den specifika referensen i stället för att välja efter varumärke. Ange kompakta radhöjder, avstånd och informationstäthet uttryckligen för en bokföringsdashboard, med läsbara siffror och kontroller; kopiera inte rymlig presentationslayout oförändrad.

En enkel guide för val efter produkttyp:

Välj Linear om du fortfarande tvekar. Grunden är mångsidig: neutral palett, läsbar typografi (Inter / Söhne) och återhållsamma avstånd. En webbplats baserad på Linear ser professionell ut för 9 av 10 produkttyper.

Varför göra DESIGN.md till en del av projektets permanenta kontext?#

I den beskrivna praktiken lagras DESIGN.md bredvid CLAUDE.md i varje projekt som hanteras med AI-agenter. Filen betraktas inte som ”tillfällig för en uppgift”. Den är en permanent kanon som alla framtida sessioner använder. Om en månad kan du be Claude lägga till en ny sida i projektet – den öppnar samma DESIGN.md och bygger i samma stil. Om sex månader kan du lämna över projektet till en annan teammedlem – även hen kan köra Claude och få ett enhetligt resultat, eftersom DESIGN.md finns i kodförrådet.

För design fungerar principen så här: ett beslut fattas en gång – om palett, typografi och avståndsrytm. Därefter tar varje AI-agent det som givet.

Design finns alltså som kod (markdown är kod), inte som en Figma-fil som AI inte kan läsa. När designen är en fil i kodförrådet läser Claude Code den, Codex läser den och framtida verktyg kan läsa den. När designen finns i Figma ligger den på ett separat plan och måste översättas manuellt inför varje session.

I sidoprojekten som beskrivs användes den här strukturen:

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)
└── ...

De här tre filerna är ett sätt att organisera projektets permanenta kontext. DESIGN.md hanterar det visuella, ARCHITECTURE.md strukturen och BRAND.md rösten. Varje AI-agent med tillgång till kodförrådet får alla tre som kontext.

Vad är Refero MCP och refero_skill?#

Refero Styles är grundlagret (DESIGN.md som fil). Nästa våg består av integrationer som gör åtkomsten till biblioteket ”inbyggd” för AI-agenter.

Refero MCP (officiell). Det här är ett server-API på https://api.refero.design/mcp som Claude Code ansluter till med en bearer-token. Agenten får då tillgång till över 150 000 skärmar och över 6 000 användarflöden från verkliga produkter. Du kan installera det med en skill:

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

Efter installationen startar Claude ”design research” i början av varje session som ett obligatoriskt första steg: den undersöker vilka visuella val som passar uppgiften och föreslår vid behov tre riktningar kopplade till den valda referensen. Den 23 juni 2026 hade refero_skill-kodförrådet 67 commits och 135 stjärnor. En ny produkt under aktiv utveckling.

Den beskrivna praktiken använder ett enkelt arbetssätt: öppna webbplatsen manuellt, kopiera DESIGN.md och lägg den i en fil. MCP är användbart när arbete med designsystem blir rutin – till exempel när du hanterar flera kundprojekt och byter mellan visuella kanon dagligen. Läs mer om hur du ansluter MCP-servrar till Claude Code i guiden till NotebookLM och MCP.

Vilka fyra misstag saboterar arbetsflödet?#

De här fyra misstagen återkommer i den beskrivna erfarenheten av att arbeta med designkontext. Vart och ett verkar harmlöst, men vart och ett leder tillbaka till standardmallen för Tailwind.

Misstag 1. Prompten ”gör det modernt”. Det här är det vanligaste misstaget. Folk öppnar Claude Code och skriver: ”bygg en SaaS-webbplats åt mig, modern stil, premiumkänsla”. Resultatet blir en mörk bakgrund plus en lila accent. I träningsdatan är ordet ”modern” kopplat till alla landningssidor från 2022–2024 som byggdes från samma mall. Utan de exakta parametrarna från DESIGN.md betyder ”modern” ”genomsnittlig”.

Misstag 2. Klistra in DESIGN.md i chatten som ett meddelande. Ibland kopierar folk DESIGN.md till Claude Codes chattfönster och säger ”här är stilen, använd den”. Det fungerar en gång – fram till slutet av sessionen. Öppna en ny session (eller byt till en annan uppgift, /clear), så går kontexten förlorad. Om du vill att stilen ska bestå måste filen finnas i kodförrådet och importeras i CLAUDE.md. Läs mer om varför CLAUDE.md är den permanenta kontextens utgångspunkt i guiden till Claudes minne.

Misstag 3. Välja stil för att du ”gillar den”. En rymlig Apple-marknadsföringsreferens kan vara olämplig att kopiera oförändrad till en fastighetsdashboard med 30 objekt på skärmen. Det utesluter inte Apple-baserad typografi, palett eller hierarki: anpassa avstånd och radtäthet till uppgiften och kontrollera sedan faktiskt synlig information på målskärmen. Välj specifik referens efter täthet, ton och målgrupp, inte bara varumärke.

Misstag 4. Inte nämna DESIGN.md i själva prompten. DESIGN.md kan finnas i kodförrådet, importeras via CLAUDE.md och vara synlig för agenten. Men om prompten säger ”bygg en webbplats” kan Claude ta standardvägen utan att uttryckligen hänvisa till filen. Den här raden är användbar i varje designprompt: ”Använd exakt färgerna, typsnitten och avstånden från docs/DESIGN.md. Hitta inte på egna värden – hämta dem från filen.” Det säkerställer att agenten använder DESIGN.md i stället för att kringgå den.

Exakta tokens är hexkoder, teckenstorlekar i pt och avståndsenheter i DESIGN.md. Naturligt språk betyder ”modern”, ”premium”, ”ren” eller ”som Apple”. Exakta tokens fungerar; fria ord gör det inte.

Vad ska du göra härnäst?#

Nu har du grundflödet: Claude Code + DESIGN.md från Refero + 4 steg = en webbplats utan mall. Det täcker 70 % av behoven. De återstående 30 % gäller fall där du behöver större precision, högre hastighet eller verifiering.

Tre vägar att gå vidare när grunderna sitter:

1. Frontend Design Skill. Det här är en officiell skill för Claude Code som lägger till visuell återkoppling. Agenten tar en skärmbild av den färdigbyggda sidan med Puppeteer, granskar den med sina ”ögon” (en synmodell), jämför den med DESIGN.md och föreslår själv korrigeringar. Det här är en automatiserad loop: ”prompt → kod → skärmbild → kritik → prompt”. Användbart när sidan är komplex och du inte får till den på en enda iteration.

2. Refero MCP i produktionsläge. När du hanterar 3–5 projekt parallellt blir det omständligt att lägga till DESIGN.md manuellt för varje projekt. Refero MCP kan hitta tre lämpliga stilar utifrån en projektbeskrivning och låta dig välja. Det snabbar upp starten av ett nytt projekt från 30 minuter till 3.

3. Kombination med kontextteknik. DESIGN.md är en av kontextartefakterna. Bredvid den hittar du vanligtvis ARCHITECTURE.md (projektstruktur), BRAND.md (röst och ton) och business/audience.md (målgrupp). Alla importeras i CLAUDE.md. När Claude bygger en sida utgår den från det visuella, målgruppen och produktens struktur. Det är i grunden kontextteknik – systematiskt arbete med det du ger agenten före en förfrågan.

Praktiskt material: Ailoot-dokumentation.

Praktiskt material: Ailoot-dokumentation.

Mer material och verktyg: Ailoot.