Claude Design, så designar du sajten innan du kodar.
En kort genomgång av Anthropics nya designläge. Frågorna Claude ställer, varianterna, exporten. Och hur du gör handoff till Cloud Code utan friktion.
En sajt, en pitch, en mobilapp, eller bara en känsla.
Claude Design tar dig från en screenshot eller en idé till en interaktiv prototyp. Sen exporterar du, eller gör handoff till Cloud Code och bygger på riktigt.
Vad är Claude Design?
Anthropic släppte Claude Design en fredag eftermiddag. Det är ett designläge, inte ett byggverktyg. Du designar det du vill ha, sen kodar du, eller skickar designen vidare till Cloud Code.
"Det är inte att bygga appar. Det är att bygga, alltså designa det man vill sen använda när man kodar."
Vad du kan starta i Claude Design
Webb & mobil
Landningssidor, sales pages, dashboards, mobilappsskärmar. Antingen High Fidelity eller Wireframe.
Slide decks
Vanliga PowerPoint-style presentationer. Ett separat spår att utforska när du sett vad prototypläget gör.
Från template
Du måste först ha sparat ett eget projekt som template, sen kan du återanvända det som startpunkt.
High Fidelity vs Wireframe
När du behöver tänka först
Mer likt Figma eller Google Stitch i andan. Bra när idén inte är spikad och du vill diskutera struktur, inte färg.
När du vill se det riktiga
Här får du färdiga komponenter, riktiga färger, animationer, klickbar känsla. Snabbaste vägen från idé till "wow, det här går att skicka iväg."
Designsteget separat från kodningssteget gör att vibecodade projekt slutar se likadana ut.
Workflow, från befintlig sajt till ny design
Det enklaste sättet att börja: ta en lång screenshot av en sajt du redan har, släpp in den i Claude Design, beskriv vad du vill. Här är stegen i ordning.
Ta en lång scrollad screenshot
Capture hela sajten som en enda lång bild, top till botten. På Mac: Shift+Cmd+5 → Capture entire page i Safari, eller motsvarande i Chrome via dev-verktyget. Spara som PNG.
Öppna Claude Design och skapa ett nytt projekt
Gå till home, klicka New project, namnge det. Konkret namn (t.ex. "mindsmith remake") slår "test 47" varje dag.
Välj High Fidelity
Wireframe finns också, men för en remake av en befintlig sajt vill du se färg, typografi och animation direkt. High Fidelity.
Klicka Add a screenshot och dra in bilden
Den långa screenshoten du tog. Du kan även välja Codebase eller importera från Figma, men screenshot är snabbast när du har en levande sajt.
Skriv vad du vill ha gjort
En prompt som funkar: "det här är en webbsida som jag har skapat med Cloud Code, jag skulle vilja att du gjorde om den så att den känns lite mer modern och estetisk. Den riktar sig till småföretagare, chefer och mellanchefer. Gör världens snyggaste a million dollar website."
Klicka Create
Nu går Claude in i discovery-läge. Den ställer ~10 frågor innan den börjar bygga. Det är ungefär det här som händer i nästa modul.
När Claude frågar om kortbeskrivning av företaget, peka på sajtens egen URL också. Det funkar bra och sparar minuter på copy-skrivning.
De 10 frågorna Claude ställer i discovery.
När du klickar Create börjar Claude inte bygga direkt. Den ställer en sekvens frågor för att förstå estetiken, känslan, sektionerna. Här är allihop, med alternativen och hur du kan tänka kring dem.
Företagsnamn & kortbeskrivning
Vad heter projektet, vad gör ni, för vem? Komplettera med URL om sajten redan finns.
Estetisk riktning
Fem alternativ. Välj en:
- Editorial & sofistikerad (serif)
- Varm & mänsklig, mjuka toner
- Bold & självsäker
- Tech minimalism
- Ljus & optimistisk
Färgriktning
Fem alternativ. Decide for me är giltigt om du inte är säker:
- Mörk navy, raffinerat
- Mörkt, nästan svart med accent
- Ljust med mörka sektioner
- Helt ljust och luftigt
- Varma jordnära toner (cream, terracotta)
Hero section, känsla
- Stor typografi
- Minimalistisk
- Stor live-demo
- Stor animerad AI-agent-visualisering
Bygger du AI-tjänster är "animerad AI-agent" ett naturligt val. Annars: testa minimalist eller live-demo.
Animationsmängd
- Subtilt
- Medel
- Mycket
Det finns inget rätt eller fel. "Mycket" är roligare att titta på, "subtilt" konverterar bättre.
Typografi
- Modern sans rubriker
- Display-serif för drama
Display-serif ger drama och editorial-känsla. Modern sans rubriker ger snabbare och mer techig ton.
Vilka sektioner ska vi behålla?
Claude listar de sektioner den hittade i din screenshot. Du kryssar i vilka som ska följa med. Behåll alla första gången, så kan du jämföra direkt mot originalet.
Lägga till något nytt?
- Social proof & testimonials med ansikten
- Interaktiv produktdemo
- Caseexempel med resultat
- Jämförelse mot DIY
- Prisnivåer
- Inget nytt, bara snyggare version
Vill du kunna växla mellan varianter?
Ja eller nej, sen vad som ska variera, färgtema, typografi, eller båda. Säg ja. Det är där hela charmen finns.
Referenssajter du älskar?
Frivillig fråga. Hoppa över om du vill ge Claude fritt spelrum. Har du en sajt du vet att du gillar, klistra in URL:en så sparar du tid.
Stuck på någon fråga? Skriv "decide for me". Claude tar ett rimligt val åt dig och kör vidare. Du kan ändå se resultatet och ändra via Tweaks-panelen efteråt.
Vad du får, och hur du itererar.
När du klickat continue jobbar Claude i ungefär 7–8 minuter. Sen är du i en levande prototyp där allt går att tweaka. Det här är delen där människan vinner mot Figma. För du behöver inte trycka på något verktyg, du bara skriver.
Build-sekvensen Claude visar
- Hämtar innehåll från sajten du pekat på
- Etablerar designstrategi
- Bygger hero, problem, features, testimonials, FAQ, footer, call-to-action
- Lägger till tweaks och animationer
- Byter över till engelska någonstans i mitten. "Now I will write the main HTML file." Det är okej.
Tweaks-panelen, fyra färgteman direkt
Här bor variantmagin. När du sa ja till varianter byggs paneldelen automatiskt och du kan klicka mellan teman utan att Claude bygger om allt. Fyra vanliga teman:
När du växlar tema, kontrollera kontrasten. I ljusa teman som Ivory händer det att en sektion blir vit text på vit bakgrund. Visuell handgranskning är fortfarande obligatorisk.
Iterera med screenshot: descender-fixet
En vanlig issue: g, j och y klipps av i rubriker. Så här löser du det:
"AI agenter" klipps av
Descenders (de bokstäver som hänger nedanför baslinjen) syns inte. Det är en CSS-bugg som kommer från line-height + overflow.
"Kan du fixa descenders?"
Ta en skärmbild av problemet, dra in den i Claude Design och skriv: "i rubrikerna AI agenter klipps g, j av lite. Kan du fixa det?" Claude resonerar med sig själv en stund, men löser det.
"Actually, I bet this is a CSS ordering issue with inline block." Du kan läsa Claudes tänk-loop live. Det är roligt och ger dig en känsla för hur den arbetar. Men det är också en signal: bråka inte om CSS-detaljer som du själv kan fixa snabbt. Är det viktigt: lös det här. Annars: vidare.
Export, sex sätt att ta ut sidan.
När du är nöjd: zooma in på export-menyn. Här är dina alternativ, vad de är bra för, och vilka du faktiskt kommer använda.
| Format | När du väljer det | Nästa steg |
|---|---|---|
| ZIP-projekt | När du vill köra hand-off till Cloud Code via en lokal fil. Får hela strukturen lokalt. | Öppna i Cloud Code Desktop, säg "vad ska jag göra nu?" |
| Hand off to Cloud Code | Direktlänk in i Cloud Code utan ZIP-mellansteg. Snabbast om du redan jobbar i ett befintligt projekt. | Cloud Code öppnar och hämtar designen. |
| Vanlig HTML | Snabb statisk export. Inline CSS, bra för en quick demo eller en pitch där du bara behöver visa. | Lägg på Vercel eller skicka som fil. |
| När du ska visa designen för någon som inte ska klicka, kund, chef, partner. | Mejla. | |
| PowerPoint | För presentationsmöte. Du får en deck där varje sektion blir en slide. | Öppna i Keynote eller PowerPoint. |
| Canva | Mindre testat alternativ. Bra om du vill ändra layout grafiskt eller dela med icke-kodare. | Öppna i Canva, redigera vidare. |
För riktiga projekt: ZIP eller Hand off to Cloud Code. För demo eller pitch: HTML eller PDF. PowerPoint/Canva är trevligt-att-veta-att-de-finns.
Handoff till Cloud Code, det riktiga jobbet.
Det här är receptet i komprimerad form. En hel arbetsdag i designsteget kokt ner till en halvtimme.
Skapa ett nytt projekt i Cloud Code Desktop
Inte ditt riktiga projekt, ett separat sandbox. Du vill kunna iterera utan att riskera produktionsfilerna.
Lägg in ZIP:en eller klistra in hand-off-länken
Cloud Code hämtar filerna. Du ser hur den läser HTML, CSS, ev. komponentstruktur.
Skriv: "Hej, jag har gjort det här. Vad ska jag göra nu?"
Det räcker. Cloud Code förstår att du vill att den ska sätta upp projektet, lägga upp filerna, göra eventuella small fixes.
Iterera
"Ta bort det här. Lägg till en kontakt-mejl. Den missade någon adress." Du jobbar i naturligt språk. Räkna med några rundor innan du är nöjd.
När du är nöjd: packa ner till ny ZIP
Be Cloud Code zippa det färdiga projektet. Eller exportera mappstrukturen.
Kopiera in i ditt riktiga projekt
Lägg över ZIP:en i ditt befintliga repo. Cloud Code där installerar, sätter upp, gör i ordning. Refresh, och din nya design lever på dev-miljön.
"Det tog en halvtimme för oss att ta en skärmbild på en webbsida, ge den till Cloud Design, svara på frågorna, och bam-parabam, ha en helt ny design."
När lönar det sig? Reflektion.
Det här är delen där det är värt att stanna upp. Inte alla projekt mår bra av designsteget separat. Här är när det är värt det.
Vibecodade sajter som ser likadana ut
Du har skapat fem småprojekt med Cloud Code och de börjar smälta ihop visuellt. Designsteget bryter mönstret, du får en distinkt look per projekt utan att lära dig Figma.
Kund vill se "det riktiga" innan beslut
PDF eller PowerPoint från Claude Design räcker oftast. Du sparar dagar av prototyparbete och kan beslutsfatta snabbare.
Du har en sajt som är "blek"
En sajt kan ha färg och form, och ändå kännas platt. Designsteget med "Decide for me" på flera frågor ger ofta en utgångspunkt du inte hade tänkt på själv.
Strikt brand med eget designsystem
Om du redan har ett moget designsystem som ligger i din Cloud Code-miljö (en brand-fil med färger, typsnitt, komponenter) är det ofta snabbare att bara peka på den direkt och hoppa över designsteget. Claude Design lyser bäst när stilen är öppen.
"Designen kanske inte riktigt är det man vill ha. Många saker blir väldigt lika. Att ha det här verktyget och kunna börja hantera designfrågorna på ett lättare sätt. Jag tror jag kommer använda den ganska mycket."
Tre frågor, testa att du fattat.
Vad är skillnaden mellan Claude Design och Cloud Code?
I Tweaks-panelen, varför ska du alltid kontrollera kontrasten manuellt?
Vad gör du efter att Cloud Code Desktop fixat designen i sandbox-projektet?
Bra jobbat. Du tog dig igenom hela mini-kursen.
Nästa gång du startar ett projekt: ge Claude Design 30 minuter och se vad du får. Det är oftare en bra utgångspunkt än ett blankt papper.
Vill du tänka mer kring vibe coding, AI och Claude?
Om du gillade tonen i den här kursen kommer du att gilla mitt veckobrev. Jag skickar ut ett mejl varje onsdag eftermiddag, kort, lågmält, på svenska. Det är samma anda: en sak åt gången, ärligt om vad som funkar och vad som inte gör det.
- En personlig reflektion (om AI och om att vara människa samtidigt)
- En konkret AI-insikt (något jag testat i veckan, ofta i Claude Code)
- En 10-minuters mikroövning du kan göra direkt
Onsdagar. Under 5 minuters läsning. Inga skräpmejl. Du kan när som helst avregistrera dig.