Summary  
This chapter explains how to supply a UI design reference image and a precise prompt to an AI code assistant so it can automatically restyle an app’s interface—preserving its structure and features while updating its look.

General domain of usage  
Web application UI design

Med mindre du allerede har en designfil klar, er den raskeste måten å endre utseendet på appen din å finne noe du liker og vise det til Claude Code. Dette kapittelet viser deg nøyaktig hvordan du gjør det.

### Hvordan sende det til Claude Code

Når du har funnet et design du liker:
1. Kopier eller ta et skjermbilde av bildet
2. Lim det direkte inn i Claude Code-chatten
3. Legg til en spesifikk prompt sammen med bildet

En prompt som fungerer godt:

`
"Take the styling and colours of this UI design and implement it into my app. Keep the structure and functionalities exactly the same. Only change the design style."
`

Det er like viktig å være spesifikk på hva som skal beholdes, som å beskrive hva du ønsker å endre. Hvis du ikke sier at strukturen skal være den samme, kan Claude Code endre mer enn du hadde tenkt.

### Hvilken modell bør brukes for design

Når du jobber med designendringer, bytt til Opus-modellen ved å bruke nedtrekksmenyen i Claude Code. Opus tolker visuell inspirasjon bedre og oversetter det til kode. For de fleste andre oppgaver er Sonnet det riktige valget, men for design er det verdt å bruke Opus.

### Forvent flere iterasjoner

Første forsøk vil ta deg det meste av veien. Det vil ikke alltid være perfekt. Det er helt greit. Se på resultatet, identifiser én ting du ønsker å justere, og send en oppfølgingsprompt som er spesifikk for akkurat det.

Si: "Endre overskriftsfargen til dyp blå. Ikke endre noe annet."

Si: "Gjør bakgrunnen til ensfarget mørk grå i stedet for gradient."

Si: "Gjør send-knappen mer avrundet og øk størrelsen litt."

Hva er den anbefalte måten å endre appens design på ved bruk av Claude Code?

Bygg og lanser en ekte app på bare én helg ved hjelp av moderne AI-verktøy og en enkel, praktisk arbeidsflyt, bruk Claude Code til å planlegge, generere og forbedre koden din, administrer prosjektet ditt med GitHub, og distribuer den ferdige appen din på nettet med Vercel. Du starter med en idé og gjør den raskt om til en tydelig prosjektplan, deretter går du steg for steg videre til å bygge en fungerende applikasjon, med fokus på kjernefunksjoner, enkel arkitektur og rask iterasjon i stedet for unødvendig kompleksitet, samtidig som du lærer å jobbe effektivt med AI ved å skrive bedre forespørsler, rette feil og forbedre funksjoner, og avslutter med en live app, et ryddig GitHub-prosjekt og et repeterbart system for å gjøre fremtidige ideer om til ekte produkter raskere.

Forstå det grunnleggende innen AI-assistert utvikling, sett opp ditt miljø, og bli kjent med Claude Code før du starter din første app.

Gjør ideen din om til en tydelig, enkel plan og definer den minste versjonen av appen din som gir reell verdi.

Gå fra ingenting til en fungerende app ved å generere kode med KI, sette opp prosjektet og forstå hva som ble opprettet.

Forbedre appen din ved å legge til funksjoner, forbedre designet og lære hvordan du løser problemer effektivt.

Publiser prosjektet ditt, gjør det tilgjengelig på nettet, og sørg for at alt fungerer ved hjelp av GitHub og Vercel.

Forbedre Appens Design

Hvordan sende det til Claude Code

Hvilken modell bør brukes for design

Forvent flere iterasjoner