Kom i gang med agentisk koding som designverktøy

Det vi skal gjennom

Denne guiden tar for seg hvordan du setter opp et enkelt utviklingsmiljø på maskinen din, som kompilerer kode og viser deg resultatet i nettleseren. I tillegg lærer du og hvordan du kan få mest mulig ut av å jobbe sammen med agenten Claude Code. Det innebærer å installere nødvendige verktøy for utvikling på Mac og Claude Code i seg selv. Mesteparten av det kommer til å skje i den skumle terminalen, men jeg skal forhåpentligvis gi gode nok instruksjoner til at det er overkommelig for selv de som aldri har åpnet terminalen før.

Forutsetninger

Vi kan like gjerne rive av plasteret først som sist - det er noen forutsetninger for å følge denne guiden. For enkelhets skyld kommer jeg til å gå gjennom det mest vanlige når det gjelder teknologi på den mest vanlige maskinen for designere.

Forutsetningene er derfor som følger

• Du må jobbe på Mac (Claude Code kan kun brukes på MacOS)
• Du må ha en betalt lisens på Claude ($20/mnd i skrivende stund)

Andre ting det er kjekt å vite

• Guiden kommer til å bruke React (Vite) og Tailwind som utgangspunkt, men den samme metoden vil fungere på alle frontend kodespråk.

Oppsettet

Vi starter med å installere de nødvendige pakkene for å jobbe med utvikling i denne stacken.

1. Xcode

Du kan starte med å installere Xcode hvis du ikke allerede har gjort det. Dette er en native applikasjon som leveres av Apple og kan derfor enklest installeres via Appstore.

Dette er en ganske stor applikasjon (12gb) så det vil ta litt tid. Når den er installert kan du komme tilbake hit.

2. Homebrew

Deretter skal vi installere noe som heter Homebrew, som i seg selv er et enkelt verktøy for å installere forskjellige pakker.

Allerede nå er det på tide å hoppe inn i Terminalen, så hold deg fast. Du åpner den enklest ved å åpne Spotlight (cmd + space) og søke etter “Terminal”. Når du har fått den opp ser det slik ut (litt avhengig av oppsett). Det er i bunn og grunn bare et vindu for å skrive forskjellige kommandoer.

Homebrew kan enklest installeres ved å bruke nettopp en slik kommando. Gå derfor til nettsiden https://brew.sh/ og trykk på kopier-knappen ved siden av kommandoen for installering.

Når du har gjort det kan du lime inn denne i terminalen (cmd + v) og deretter trykke enter. Du vil bli bedt om å oppgi passordet til maskinen. Skriv inn passordet og trykk enter igjen.

OBS: Terminalen er ikke så god til å gi feedback, så mens du skriver passordet vil du ikke se at det skjer noe.

Når du får denne beskjeden trykker du enter igjen for å bekrefte.

Helt på slutten av installasjonen vil det stå at du må kjøre to kommandoer for å fullføre installasjonen, kjør disse hver for seg.

Du kjører først denne.

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile

Deretter kjører du denne.

`eval "$(/opt/homebrew/bin/brew shellenv)"``

Hvis du får beskjed om å kjøre noen andre kommandoer enn de jeg har oppgitt her, kjør dem i stedet.

OBS: Her får du heller ingen feedback når du har kjørt kommandoen. Det har fungert hvis du ikke får en feilmelding.

Du kan kjøre denne for å sjekke at det har blitt installert riktig.

brew --version

Hvis den returnerer et versjonsnummer vet du at den er på plass og klar til bruk.

3. Node.js

Det kule nå er at vi kan bruke Homebrew til å installere resten av pakkene som trengs.

For å installere Node.js kjører du helt enkelt denne i terminalen.

brew install node

For å sjekke at installasjonen har fungert kan du kjøre disse to sammen.

node --version
npm --version

Hvis installasjonen har gått som forventet vil du se to versjonnummer.

4. Git (ikke et må-krav)

Hvis du bare skal prototype for din egen del trenger du kanskje ikke Git til å begynne med, men hvis du på et eller annet tidspunkt ønsker å dele koden med andre eller publisere det du har laget på det store internett kommer du garantert til å få bruk for Git.

Git kan heldigvis også ganske enkelt installeres fra Homebrew ved å kjøre denne.

brew install git

Sjekk at den er installert korrekt ved å kjøre denne.

git --version

I tillegg vil jeg anbefale Github Desktop som er en egen applikasjon fra Github som lar deg bruke Git som en applikasjon. Du kan få Claude til å gjøre det meste i Git for deg, men det kan være greit å følge med på hva som skjer og gjøre noen ting selv.

Github desktop kan lastes ned her: https://desktop.github.com/download/

5. VS Code

Du vil på et eller annet tidspunkt trenge et sted å se og redigere koden. Den mest populære gratis kodeeditoren er Visual Studio Code (VS Code), så jeg anbefaler å gå for denne.

Den kan også installeres fra Homebrew ved å kjøre denne.

brew install --cask visual-studio-code

Etter den er installert kan du kjøre denne i terminalen for å åpne mappen du står i direkte i VS Code. Dette er en veldig kjekk snarvei som jeg bruker ganske ofte.

code .

6. Claude Code

Så til selve motoren for agentisk koding. Her finnes det to jevngode alternativer til installering:

Alt 1: Last ned Claude Desktop (anbefalt)

Du kan veldig enkelt laste ned og installere Claude Desktop fra denne siden: https://claude.com/download . Det vil gi deg en solid desktop applikasjon hvor du kan gjøre både koding og andre AI-ting. Ved å installere denne vil du også få tilgang til Claude Code i terminalen, slik vi skal bruke den videre i denne guiden.

Alt 2: Installere Claude via Homebrew

Kjør denne kommandoen for å installere.

brew install --cask claude

Og denne kommandoen for å sjekke at den har blitt installert.

claude --version

Gratulerer, du har nå installert alt du trenger for å komme i gang med agentisk koding!

Forstå terminalen

For å starte ditt første prosjekt skal vi først få litt kontroll på hvordan man navigerer seg rundt i terminalen. Du har kanskje allerede sett hint av en mappestruktur når du har installert forskjellige pakker? Det er viktig å ha et forhold til hvilken mappe man befinner seg i når man kjører forskjellige kommandoer i terminalen, og Claude er intet unntak.

Terminalen forholder seg til mappestrukturen på Macen din på samme måte som du navigerer rundt i Finder. Det er i praksis kun tre korte kommandoer du trenger å kunne for å navigere deg rundt i mappene.

For å gå ut av en mappe (opp i mappestrukturen) kjører du denne.

cd ..

For å gå inn i en mappe (ned i mappestrukturen) kjører du denne.

cd mappenavnet 

Så tenker du kanskje; “men hvordan vet jeg hva mappene heter? Er det meningen jeg skal huske det?”. Da kommer vi til den siste kommandoen av de tre, nemlig kommandoen for å vise hvilke mapper som finnes i mappen du står i.

ls -l

Du kan også kjøre bare ls, men hvis du legger på -l listes det ut nedover slik at det er enklere å lese.

Lag et sted å jobbe

Jeg vil anbefale å samle alle prosjektene i en mappe på maskinen, slik at Claude har et begrenset område å jobbe i. Dette er bra både for sikkerhet og organisering.

Det enkleste er å gjøre dette i Finder. Gå til rot av brukermappen din i Finder og opprett en mappe der som heter “Projects” (eller et annet navn hvis du vil).

Hvis du fortsatt ikke har navigert noe sted i terminalen trenger du bare å kjøre denne for å navigere til denne mappen.

cd Projects 

Hvis ikke bruker du kommandoene i forrige steg til å finne den rette mappen. Målet er at du skal stå i /Projects før du gjør noe som helst med Claude.

Ditt første prosjekt

Hvis du har kommet så langt er du godt over kneika, herfra kan Claude gjøre det meste for deg. Vi skal nå opprette en helt ny applikasjon som kan kjøre lokalt på maskinen, sånn at vi kan vibbekode noen fantastiske prototyper.

Starte Claude

Nå kan du starte en ny Claude sesjon ved å kjøre denne enkle kommandoen.

claude

Første gang blir du bedt om å logge inn i Claude. Bare følg veiledningen du får for å fullføre innloggingen.

Etter du har gjort det vil terminalen din se sånn ut.

Terminalen oppfører seg ikke lenger som en terminal, men nå som en chat med Claude.

Det første du kan be den om å gjøre er å opprette et nytt prosjekt på denne måten.

Kan du sette opp et nytt React-prosjekt med Vite, Tailwind CSS og TypeScript? Organiser det på en ryddig måte med en src-mappe for komponenter. Prosjektet skal hete "Mitt første Claudeeventyr". Sjekk at det funker før du er ferdig og kjør opp frontend slik at jeg kan se.

Du vil nesten med en gang bli bedt om å svare på et spørsmål, og dette blir det mye av fremover. Claude fungerer (heldigvis) på en slik måte at man må godta alt den skal foreta seg.

Jeg vil anbefale å lese raskt gjennom alle spørsmålene og svare “Yes/No” manuelt på alt. Etterhvert som du blir mer komfortabel kan du vurdere “Yes, and allow…” på edits i prosjektet ditt.

OBS: Når det gjelder installering av pakker vil jeg anbefale å alltid godkjenne hver enkelt manuelt. Spesielt npm har i senere tid hatt problemer med at noen ukjente pakker kommer med ting du ikke vil ha på maskinen. Så hold deg til npm-pakker fra kjente kilder. Det kan derfor være lurt å gjøre et raskt google-søk for pakken Claude synes du skal installere før du trykker “Yes”.

Etter å ha trykket “Yes” en 10-20 ganger får du forhåpentligvis en beskjed om at du kan finne appen din på en localhost-url. Lim denne inn i nettleseren og du bør se noe sånt som dette.

Siden denne siden er bygget med Claude, uten noen særlige instruksjoner, vil resultatet variere veldig fra gang til gang. Det viktigste nå er likevel at du har fått en lekegrind du kan gjøre nærmest hva som helst i bare ved å fortsette å gi Claude beskjeder.

Jeg skal ikke gi noen flere instruksjoner herfra til hvordan man kan prompte seg til gull, det krever en helt egen artikkel. Nå er det din tur til å bygge det du har lyst til å bygge og utforske vibbekodingens vidunderlige verden. Bare be Claude lage ting og du er i gang.

Claude kommandoer det er kjekt å kunne

Det er noen kommandoer som kan være kjekke å kunne for å få mest ut av å bruke Claude.

Hvis du skriver / i Claude-terminal-chaten vil du få opp en liste over alle kommandoer. Her kan du bruke piltastene til å se hva som finnes, men det er særlig tre jeg vil trekke frem.

Usage

/usage 

Valutaen i Claude er tokens, og hvis man vibber mye vil tokens forsvinne fort. Denne kommandoen gir deg en oversikt over hvor mye du har igjen før tokens blir fylt på igjen, henholdsvis hver femte time og hver uke. Du har altså en pott innenfor disse tidsvinduene. Når potten er brukt opp må du vente til potten blir fylt opp igjen.

Init

/init 

Denne kommandoen bygger en CLAUDE.md-fil som beskriver prosjektet ditt og hvilke finurligheter Claude selv må ta hensyn til når den koder i prosjektet. Filen og innholdet blir opprettet automatisk når du kjører kommandoen, men den dukker opp i filstrukturen så du kan legge til egne beskjeder hvis du ønsker det. Det kan være lurt å kjøre denne med jevne mellomrom, og særlig etter at du har gjort store endringer som innebærer for eksempel nye pakker eller omskrivinger.

MCP

/mcp

MCP (Model Context Protocol) er måten Claude snakker med andre verktøy eller applikasjoner. Dette er en viktig del for å få Claude til å jobbe effektivt for deg, og at du skal slippe å klippe og lime det Claude gjør frem og tilbake mellom forskjellige tjenester. Ved å kjøre denne kommandoen får du oversikt over hvilke MCPer du har aktivert og muligheten til å deaktivere dem.

Figma MCP

Den enkleste måten å komme i gang med Figma MCP (eller en hvilken som helst annen MCP) er ved å bruke Claude Desktop appen som du forhåpentligvis nå har installert.

Du finner det under Customize (venstremeny) → Connectors → +-ikonet (oppe til høyre). Her har du også mulighet til å styre tilgangen MCPen har på et granulert nivå, slik at Claude ikke har mulighet til å gjøre ting du ikke ønsker at den skal gjøre.

Når du har koblet opp Figma kan du gå nesten direkte fra skisse til kode på et eneste prompt, noe som er helt rått og ganske revolusjonerende.

Det eneste du trenger å gjøre er å kopiere lenken til Figmaskissen (cmd + L) og lime den inn i Claude Code og be den implementere det.

Hvis du vil ha mer kontroll på tokenbruk kan du se et anslag i dev-mode i Figma. Her kan du også klippe ut et eksempelprompt, som gjør implementasjon enda enklere.

Hvis estimated tokens er veldig høyt (>15k) kan det være lurt å ta ned kompleksiteten i skissen. Ofte kan man for eksempel klare seg med mye mindre dummydata i skissen, og dette vil drastisk redusere antall token som brukes. Dummydata er uansett en ting Claude er veldig god til å generere for deg hvis du har laget eksempler på de forskjellige datapunktene som trengs.

Et konkret eksempel er hvis du har en tabell med 20 rader i skissen, men egentlig klarer deg med tre eksempler på rader. Dette vil spare deg flere tusen tokens.

Når du er fornøyd med antallet tokens trykker du på “Copy example prompt” og limer dette inn i Claude Code og trykker enter.

Noen minutter senere bør du ha en ganske bra prototype å jobbe utifra.

Skills

I agentverden finnes det et konsept som heter “Skills”. Dette er rett og slett kunnskap du kan gi til Claude for at den skal gjøre forskjellige oppgaver bedre og mer treffsikkert. Du finner en god oversikt over skills på https://skills.sh/ .

OBS: Det kan være lurt å holde seg til skills fra kjente utgivere, som er mye nedlastet, da disse pakkene (i likhet med npm) kan inneholde ting du ikke vil ha på maskinen.

Som designer er det spesielt to skills du bør installere med en gang.

Frontend-design

Den beste og mest imponerende av alle skills er frontend-design, utgitt av Antropic selv. Denne gjør Claude til en habil designer og vil med en gang gi deg mye bedre resultater på visuelle endringer. Spesielt hvis du ønsker å bruke Claude som en sparringspartner og til inspirasjon.

Du installerer den ved å kjøre kommandoen som står øverst på skill-siden, som du enkelt kopierer ved å trykke på kopi-knappen markert i rødt på bildet. Du kjøre så denne kommandoen i terminalen i den prosjektmappen du ønsker å installere den. Hvis du har startet Claude i terminalen er det enklest å åpne en ny fane (cmd + T) og kjøre kommandoen der.

Når du kjører installasjonen vil du bli bedt om å ta noen valg. Blant annet om du skal installere skillen på brukernivå eller prosjektnivå. Jeg anbefaler å installere skillen på prosjektnivå av følgende årsaker.

1. Du vil begrense nedslagsfeltet hvis denne skillen inneholder noe tull.
2. Skillen blir liggende i .claude/skills i prosjektet og kan derfor også legges i Git sammen med resten av prosjektet ditt. På denne måten kan andre dra nytte av den når dere jobber i den samme kodebasen.

Du kan også installere skills direkte fra marketplace i Claude Code ved å bruke denne kommandoen, men de samme forhåndsreglene gjelder fortsatt.

/plugin (marketplace)

Etter den er installert må du restarte Claude for at den skal virke. Trykk ctrl + C to ganger for å stenge Claude sesjonen og kjør claude for å starte opp en ny sesjon.

Du kan kjøre denne for å sjekke hvilke skills som er tilgjengelige for Claude.

/skills

Når de er korrekt installert vil Claude automatisk trekke inn skillen i sammenhenger hvor den mener den er fornuftig å bruke.

Skill-creator

Dette blir fort litt meta, men dette er en skill som er optimalisert for å lage nye skills. Denne bør brukes hver gang du tar deg selv i å forklare det samme til agenten for n-te gang.

Se på skills som en bok for matoppskrifter. Du vet sånn cirka hvordan du lager bearnaise, men du husker ikke helt blandingsforholdene. Du kan klare å finne ut blandingsforholdet ved å prøve deg frem, men det mest effektive er å ha et sted å slå opp nøyaktig hvordan du gjør det.

Det samme gjelder for agentene. De klarer gjøre seg opp en mening basert på kontekst, men det tar lang tid, koster mange tokens og det blir som regel ikke helt riktig. Enkelte ting vil du at skal skje på en spesiell måte hver eneste gang.

Når du står ovenfor en situasjon hvor du merker at agenten prøver seg frem og du etter gjentatt prompting har klart å lede agenten på rett spor, ber du den lage en skill av løsningen. Da kan den se i oppskriftsboka neste gang den møter det samme problemet.

Designsystem-skill

Et ypperlig bruksområde for skill-creator er tolkning av designsystemer, og det er derfor denne skillen er den definitivt mest nyttige for oss designere.

I Mattilsynet har vi et helt vidunderlig designsystem som er bygget på toppen av DigDir sitt. Det viser seg likevel fort at Claude ikke er den beste til å tolke hvordan systemet er bygget opp, og den bruker et hav av tokens på å lete gjennom dokumentasjonen hver gang.

En skill var den perfekte løsningen på dette problemet. Jeg ga den rett og slett lenken til designsystemet vårt, som ligger åpent, og ba den bygge en skill basert på dokumentasjonen. Den leser gjennom alt og lager en oppskrift til seg selv for hvordan den skal bruke designsystemet i fremtiden. Resultatet ble vanvittig mye høyere treffsikkerhet på bruk av komponenter og klasser.

En bonus med skill-creator er at den korrigerer skills du har laget når den finner hull og mangler. Si at den har tolket bruk av card-komponentet feil og du får den på rett kjøl. Da vil den trigge skill-creator og gjøre en oppdatering av designsystem-skillen du har laget for å sikre seg mot fremtidige feiltolkninger.

Å lage denne skillen kostet noen tusen tokens, men skills i seg selv er veldig billig i token-bruk. I tillegg vil man på sikt spare tokens der Claude tidligere måtte bruke mange for å tolke hvordan designsystemet skulle håndheves.

Superkrefter!

Jeg håper du nå sitter igjen med et inntrykk av at agentisk koding ikke er så skummelt som det høres ut. Jeg har introdusert flere designere hos oss for denne måten å jobbe på, og opplever at de som kom seg gjennom oppsettet har åpnet opp en ny superkraft som designer. Det å gå fra skisser til en fullt fungerende prototype på veldig kort tid, hvor kvaliteten på prototypen minner om et ferdig implementert produkt er veldig givende og gir store muligheter.

Er du en designer som sitter på gjerdet og lurer på om dette er noe for deg er det bare å hoppe i det. Det vil hjelpe deg både å prototype bedre og til å forstå utvikling bedre generelt. Plutselig kan du levere faktisk kode til produktet ditt også.

Kom i gang og lås opp din nye superkraft!