Claude Code - En bil som rymmer både designers, produktägare och utvecklare
Vi deltog på Lydia Hallies Frontend Masters-workshop om Claude Code. Trots att den var riktad till utvecklare fick vi bekräftade att gränsen mellan designer, PM och utvecklare blir mer suddas ut när AI-verktygen blir tillgängliga för alla.
Förra veckan deltog vi i Frontend Masters Deep Dive-workshoppen om Claude Code, ledd av Lydia Hallie från Anthropic. Claude Code är en AI-assistent som med hjälp av språkmodeller som Claude Opus läser filer, föreslår ändringar, håller reda på agenter, kan använda skills och kör kommandon. Anthropic har också en enklare desktop-app, Cowork, för den som vill testa utan terminal, där de relativt nyligen lagt till utökat stöd för Claude Code.
Workshopen var tydligt riktad till utvecklare. “Comfortable in a terminal and with git. Node.js or Python set up locally.”
Workshopen var jättebra, hands on, och gav möjlighet att ställa frågor direkt till Lydia som var metodisk och pedagogisk. Vi tyckte båda två att den höll hela vägen. Det säger något. Rollerna förändras. Designer, PM eller utvecklare kan jobba i varandras utrymmen utan att byta jobb. Det kräver nyfikenhet och samarbete, inte att man bara lär sig “koda”.
Tidigt i opensourcevärlden pratades det mycket om demokratisering av kod. Känslan är att språkmodellerna tillsammans med opensource nu verkligen har skapat den demokratiseringen. Vi har gått hela vägen från professorer i vita rockar som berättade hur hålen skulle stansas, till att alla nu kan beskriva vad de vill ha och få det gjort.
Hanna och jag har själva jobbat mycket med AI driven design, speciell med Claude Code i ungefär ett år nu. Även om Hanna inte har en bakgrund som utvecklare så hänger hon med bra. Och just därför var det så värdefullt att få en genomgång av vad man faktiskt kan göra för att få till ett effektivare arbetsflöde och vad som finns att hämta. Den stora vinsten: vet man inte vad som går att göra är det svårt att ens ställa frågan.
Det är skalet, inte modellen
Det första Lydia sa var: “Claude Code är inte AI-modellen. Det är skalet runt modellen.”
Modellen är motorn: Opus, Sonnet, Haiku, GPT, Gemini. Skalet är bilen. Permissions, kontext, regler, arbetsflöden. Alla har tillgång till samma motorer nu (förutom kanske Claude Mythos då…). Skillnaden är vad man byggt runt dem. Vilken bil vill du åka i?
Så här ser skalet ut i praktiken
Lydia hann visa ett smakprov. Det här är några av delarna vi tog med oss eller fick bekräftade från workshoppen:
Kontext, kontext, kontext - inte för att tjata, men kontext är viktigt. Det handlar om vilka möjligheter du ger språkmodellen att förstå vad du vill att den ska göra. Väldigt likt det vi jobbar med som UX-designers när vi ger en användare rätt mängd information vid rätt tillfälle för att kunna göra det de vill i ett system eller användargränssnitt.
CLAUDE.md - en enkel textfil i projektet som AI:n läser in i kontexten nästan det första den gör varje session. Claude kan skapa en åt dig automatiskt, så du har en grund att utgå från. Sen fyller du på själv med det som är specifikt för dig, ditt projekt eller ditt team. För en designer kan det vara: “Använd alltid våra design-tokens, aldrig hårdkodade färger. Följ vårt designsystem i Figma. Skriv UX-copy i vi-form, undvik utropstecken eller talstreck. Vår tone of voice är direkt och konkret.” Håll den uppdaterad, en överarbeta den inte, kom ihåg att den läses in i alla sessioner och tar därav dyrbar plats i ditt kontext.
Permissions - vad AI:n får göra fritt, vad som kräver godkännande, vad den måste visa som plan innan något händer. “Får ändra färger och spacing fritt. Måste fråga innan den rör komponentbiblioteket. Måste visa plan innan något publiceras.” Går att ställa in med /permissions och minskar manuell övervakning av återkommande kommandon som är säkra i din miljö.
Olika lägen - Claude Code har stöd för olika lägen, utnyttja dessa!
Plan mode - perfekt att jobba med planeringsläget i en session parallellt medan Claude jobbar med samma branch i en annan session. När Claude är klar i den genomförande sessionen och du har sparat/committat så kan du direkt dra igång nästa plan i den förberedda planeringssessionen.
Autoläge - Claude Code har stöd för ett autoläge där Claude Opus utvärderar de kommandon som körs och bedömer om de är säkra att genomföra. Säkrare än att köra utan restriktioner, och gör det möjligt att parallellisera mer och låta parallella sessioner utforska olika designinriktningar.
Git Worktrees - ytterligare ett sätt att jobba mer parallellt, med flera sessioner mot olika kopior av samma git branch. Inbyggt stöd i Claude Code, men lite överkurs — Lydia sa att hon själv inte använder det primärt.
Skills - återkommande arbetsflöden sparade som text. “Så här granskar vi design-tokens. Så här kör vi tillgänglighetstest enligt WCAG 2.2. Så här gör vi brand review.” Skriven av en designer, körd av en utvecklare. Eller tvärtom.
Hooks - regler som triggas automatiskt i Claude Codes livscykel. Enklaste exemplet är en terminal som Cmux som skickar en notis till användaren när en session behöver input. Speciellt bra när man jobbar med andra saker samtidigt och vill bli påmind att checka in när Claude behöver handpåläggning eller feedback.
MCP-servrar - koppla in era egna verktyg och datakällor. Figma så Claude kan läsa designs direkt. Linear för uppgifter. Notion för designdokumentation. Era interna komponent-API:er.
Subagents - flera AI-agenter med olika roller som jobbar parallellt. En gör (eller förbereder för) user research, en bygger wireframes, en granskar tillgänglighet.
Plugins - paketera ert teams CLAUDE.md, skills och hooks som en installerbar enhet. Hela ert designsystems regler, granskningsflöden och guidelines i ett kommando.
Du kan köra Claude Code utan något av det här. Men med lite koll på skalet, bilen ni sitter i, slipper du upprepa samma instruktioner, AI:n håller sig inom era ramar, och småjobb som annars dött i backloggen blir gjorda. Det som annars suttit i en persons huvud blir något hela teamet kan plocka upp.
Att skalet, skills, miljö, det du satt upp, verkligen spelar roll fick vi bekräftat på ett oväntat sätt: Lydia hade bytt dator inför workshopen, vilket gjorde att hon hade problem att genomföra vissa moment kring att sätta upp en MCP-server. Men vi upplevde det bara positivt. Saker blev mer verkliga och det gav mer utrymme för deltagarna att ställa frågor som vi var mer intresserade av.
Designers och utvecklare på samma mark
I workshopen ändrade Claude Code en knappfärg från ljusblå till mörkblå. Tre rader CSS. En diff. Klar. Det är designarbete, men det hände i utvecklarens verktyg. Och det kunde lika gärna ha startats av en designer.
Gränszonen blir arbetsbar, inte upplöst. Designers blir inte utvecklare. Utvecklare blir inte designers. De djupa hantverken finns kvar. Men mellanrummet, CSS-tweaks, layoutjusteringar, flow-prototyper, blir gemensam mark.
Det är inte en framtidsspaning. Det är ett arbetssätt som redan finns, och det funkar bäst när hela teamet förstår bilen som vi åker runt i tillsammans.
Vill ni utforska hur ert team kan börja jobba så här?
Vi hjälper team att hitta rätt ingång. En workshop, en pilotsession eller ett samtal om var ni skulle börja. Ingen kodbakgrund krävs. Hör av er så pratar vi.