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

Ellei sinulla ole valmista suunnittelutiedostoa, nopein tapa muokata sovelluksesi ulkoasua on etsiä jokin mieluisa esimerkki ja näyttää se Claude Codelle. Tässä luvussa käydään läpi, miten tämä tehdään vaihe vaiheelta.

### Kuinka välittää se Claude Codelle

Kun olet löytänyt haluamasi suunnittelun:
1. Kopioi tai ota kuvakaappaus kuvasta
2. Liitä se suoraan Claude Code -keskusteluun
3. Lisää mukaan tarkka kehotus

Hyvin toimiva kehotus:

`
"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."
`

On tärkeää olla tarkka siitä, mitä haluat säilyttää ennallaan, aivan kuten siitä, mitä haluat muuttaa. Jos et mainitse rakenteen säilyttämistä, Claude Code saattaa muokata enemmän kuin oli tarkoitus.

### Mallin valinta suunnitteluun

Kun teet ulkoasumuutoksia, vaihda malliksi Opus käyttämällä Claude Coden pudotusvalikkoa. Opus tulkitsee visuaalista inspiraatiota ja muuntaa sen koodiksi paremmin. Useimpiin muihin tehtäviin Sonnet on oikea valinta, mutta suunnittelussa Opus on suositeltava.

### Varaudu iterointiin

Ensimmäinen versio vie sinut pitkälle, mutta se ei aina ole täydellinen. Se on täysin normaalia. Tarkastele tulosta, tunnista yksi asia, jonka haluat muuttaa, ja lähetä tarkentava pyyntö, jossa keskityt juuri siihen asiaan.

Sano: "Vaihda otsikon väri syvänsiniseksi. Älä muuta mitään muuta."

Sano: "Tee taustasta yksivärinen tummanharmaa liukuvärin sijaan."

Sano: "Tee lähetä-painikkeesta pyöreämpi ja hieman suurempi."

Mikä on suositeltu tapa muuttaa sovelluksesi ulkoasua Claude Codella?

Rakenna ja julkaise oikea sovellus vain yhdessä viikonlopussa käyttämällä moderneja tekoälytyökaluja ja yksinkertaista, käytännöllistä työnkulkua hyödyntäen Claude Codea koodin suunnitteluun, generointiin ja viimeistelyyn, hallinnoiden projektiasi GitHubilla ja julkaisten valmiin sovelluksen verkkoon Vercelin avulla. Aloitat ideasta ja muutat sen nopeasti selkeäksi projektisuunnitelmaksi, jonka jälkeen etenet vaiheittain toimivan sovelluksen rakentamiseen keskittyen ydintoimintoihin, yksinkertaiseen arkkitehtuuriin ja nopeaan iterointiin tarpeettoman monimutkaisuuden sijaan, samalla oppien työskentelemään tehokkaasti tekoälyn kanssa kirjoittamalla parempia kehotteita, korjaamalla virheitä ja parantamalla ominaisuuksia. Lopputuloksena on toimiva sovellus, siisti GitHub-projekti ja toistettava järjestelmä, jonka avulla voit muuttaa tulevat ideat oikeiksi tuotteiksi nopeammin.

Ymmärrä tekoälyavusteisen kehityksen perusteet, asenna kehitysympäristösi ja tutustu Claude Codeen ennen ensimmäisen sovelluksesi aloittamista.

Muunna ideasi selkeäksi, yksinkertaiseksi suunnitelmaksi ja määrittele sovelluksesi pienin versio, joka tuottaa todellista arvoa.

Siirry nollasta toimivaan sovellukseen generoimalla koodia tekoälyllä, perustamalla projekti ja ymmärtämällä, mitä on luotu.

Paranna sovellustasi lisäämällä ominaisuuksia, hiomalla suunnittelua ja oppimalla korjaamaan ongelmia tehokkaasti.

Julkaise projektisi, tee siitä saavutettava verkossa ja varmista, että kaikki toimii käyttämällä GitHubia ja Verceliä.

Sovelluksen Suunnittelun Parantaminen

Kuinka välittää se Claude Codelle

Mallin valinta suunnitteluun

Varaudu iterointiin