# Fyra tangenttryck som stänger loopen mellan Claude Design och koden - Författare: [Jonas Odencrants](https://paperphyte.com/konsulter/jonas-odencrants), [Paperphyte](https://paperphyte.com) - Publicerad: 2026-08-15 - Kategori: AI-assisterad utveckling - Etiketter: Claude Design, Claude Code, AI-assisterad utveckling, DevTools, Frontend, Arbetssätt - Källa: Claude Design ritar, Claude Code implementerar — men designfönstret får aldrig se hur det faktiskt blev. Fyra tangenttryck i Chrome DevTools stänger loopen: en skärmdump av hela sidan, tillbaka in i designsamtalet. 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. --- Det här är Markdown-versionen av ett inlägg i [Paperphytes anteckningsbok](https://paperphyte.com/anteckningsbok). Originalet finns på . © Paperphyte AB. Ange källan med länk när du citerar eller sammanfattar texten. Frågor om innehållet? [Kontakta Paperphyte](https://paperphyte.com/kontakt).