Fyra tangenttryck som stänger loopen mellan Claude Design och koden

Vi använder Claude Design för att skissa och styla prototyper med komponenter, och Claude Code för att implementera dem i kodbasen. Det fungerar bra — ända fram till punkten där komponenten faktiskt hamnar i projektet.

Där tar loopen slut. Claude Code vet vad den byggde. Claude Design vet vad den ritade. Ingen av dem vet hur det ser ut när komponenten sitter i din riktiga layout, med dina globala stilar, ditt riktiga innehåll och resten av sidan runt omkring.

Designfönstret är blint för resultatet

En komponent som ser ren ut isolerad blir ofta något annat i projektet. Rubriken ärver en line-height från ett globalt stilark. Kortet hamnar i ett grid som pressar ihop det. Ett tomt läge som var två rader i skissen är sex rader med riktig text.

Fortsätter du iterera i designfönstret utan att visa hur det blev, designar du vidare på en bild som inte längre stämmer. Lösningen är enklare än man tror: ta en skärmdump av det som faktiskt körs och klistra in den i designfönstret.

Fyra tangenttryck i Chrome

Med appen igång lokalt räcker det med det här:

CTRL + SHIFT + I                              öppna DevTools
CTRL + SHIFT + P                            öppna kommandomenyn
screenshot                                        skriv för att filtrera menyn
Välj Capture full size screenshot     välj det här alternativet

Bilden hamnar i din nedladdningsmapp och kan dras rakt in i Claude Design-fönstret. På macOS heter samma sak CMD + OPT + I och CMD + SHIFT + P.

Varför "full size" spelar roll

Den vanliga skärmdumpen fångar bara det som syns i vyporten. Full size screenshot fångar hela sidan — hela vägen ner genom scrollen, med footer, långa listor och allt som ligger under vikningen.

Det är precis den kontexten som saknas i designfönstret. En komponent bedöms sällan i isolation. Den bedöms i sitt sammanhang: avståndet till sektionen ovanför, rytmen mot resten av sidan, hur den beter sig när innehållet blir längre än någon tänkt sig.

Så ser loopen ut hos oss

1. Skissa och styla prototypen i Claude Design.
2. Låt Claude Code hämta designfilerna och implementera dem i projektet.
3. Kör appen lokalt och ta en full size screenshot.
4. Klistra in bilden i Claude Design och beskriv vad som ska justeras.

Steg fyra är det som gör en enkelriktad överlämning till en dialog. I stället för att beskriva i ord vad som blev fel visar du det. "Kortet blev för högt" är en gissning. En bild på kortet är ett faktum.

Ett par saker som gör bilderna bättre

• CTRL + SHIFT + M växlar device toolbar. Ta en bild i mobilvy också — det är där de flesta layoutproblemen sitter.
• Stäng cookie-rutor, inloggningsbanners och dev-overlays innan du fotar. Brus i bilden blir brus i samtalet.
• Fota med riktigt innehåll, inte lorem ipsum. Långa produktnamn och tomma listor är designproblem, och de syns bara med riktig data.
• Har du både ljust och mörkt läge: ta en bild av varje. Kontrastproblem upptäcks inte i beskrivande text.

Varför det funkar

Det här är inget avancerat trick. Det är bara att stänga en feedback-loop som annars står öppen. AI-assisterad utveckling blir bra när båda sidorna tittar på samma sak, och den billigaste vägen dit är en bild av det som körs.

Designen är inte klar när den är ritad. Den är klar när den ser rätt ut i webbläsaren — och det är den bilden som ska tillbaka in i samtalet.