Figma-designin muuttaminen toimivaksi koodiksi on pitkään ollut frontend-kehityksen hitain vaihe. Suunnittelijan ja kehittäjän välinen kuilu täyttyy usein väärinkäsityksistä, puuttuvista reunatapauksista ja käsin kirjoitetusta rutiinikoodista.
Tämä aikakausi on ohi. Moderni vibe-koodaus – jossa kehittäjä toimii enemmän arkkitehtina ja ohjaajana kuin rivien kirjoittajana – mahdollistaa käyttöliittymien rakentamisen minuuteissa.
Tässä oppaassa käymme läpi tarkan, tuotantovalmiin työnkulun, jolla muutat Figma-designit puhtaaksi React- ja Tailwind-koodiksi käyttämällä v0-alustaa, Cursor-tekoälyä ja Claude 3.7 Sonnet -mallia.
---
Työnkulun arkkitehtuuri: Kuvasta tuotantoon
Älä yritä siirtää monimutkaista Figma-tiedostoa suoraan koodieditoriin yhdellä kertaa. Parhaat tulokset saavutetaan vaiheittaisella putkella, jossa jokainen työkalu hoitaa oman vahvuusalueensa.
[ Figma Design ]
│
▼ (Kuvakaappaukset & Tokenit)
[ v0 (Vercel) ] ───> Generoi visuaalisen raakaversion (React + Tailwind)
│
▼ (Koodin kopiointi)
[ Cursor + Claude 3.7 Sonnet ] ───> Jalostaa arkkitehtuurin, tilanhallinnan ja integraatiot
│
▼
[ Valmis Käyttöliittymä ]
Tämä kolmivaiheinen putki varmistaa, että visuaalinen laatu säilyy, mutta koodin arkkitehtuuri ei muutu hallitsemattomaksi spagetiksi.
---
Vaihe 1: Figma-designin valmistelu tekoälyä varten
Tekoäly ei osaa lukea ajatuksiasi. Jos Figma-tiedostosi on sekasotku nimeämättömiä tasoja, myös generoitava koodi kärsii. Figma koodiksi -prosessi alkaa valmistelulla.
1. Puhdista layout ja käytä Auto Layoutia
Varmista, että tärkeimmät elementit käyttävät Figman Auto Layoutia. Tämä pakottaa designin noudattamaan flexbox- ja grid-logiikkaa, jonka Figma to Tailwind -kääntäjät ymmärtävät suoraan.
2. Vie design-tokenit talteen
Älä luota siihen, että tekoäly arvaa brändivärisi kuvasta. Kopioi Figman Dev Mode -tilasta keskeiset arvot:
- Värikoodit (HEX/RGB)
- Fonttikoot ja -painot
- Varjot (box-shadow) ja pyöristykset (border-radius)
3. Ota tarkat kuvakaappaukset komponenteista
Älä ota kuvakaappausta koko 4K-näytön kokoisesta dashboardista. Paloittele käyttöliittymä loogisiin osiin (esim. navigointipalkki, sivupalkki, datataulukko, kortit) ja ota jokaisesta erillinen, tarkka kuvakaappaus.
---
Vaihe 2: Ensimmäinen vedos v0-palvelulla
Vercelin v0 on markkinoiden tehokkain työkalu visuaalisen raakaversion luomiseen. Se on erikoistunut tuottamaan puhdasta Tailwind-pohjaista React-koodia annetun kuvan perusteella.
1. Syötä kuva v0-palveluun: Lataa Figmasta ottamasi kuvakaappaus v0:aan.
2. Anna kontekstiprompti: Älä vain pyydä "tee tämä". Käytä tarkkaa ohjeistusta.
v0-Prompt-malli:
Rakenna React-komponentti tämän kuvan perusteella käyttäen Tailwind CSS -tyylejä ja lucide-react-kuvakkeita.
- Käytä semanttisia HTML-elementtejä.
- Varmista, että komponentti on täysin responsiivinen (mobiili -> työpöytä).
- Käytä seuraavia väritokeneita: Ensisijainen: #1E3A8A, Tausta: #F3F4F6.
- Älä kirjoita monimutkaista tilaa (state), keskity vain visuaaliseen tarkkuuteen ja asetteluun.
Kun v0 generoi komponentin, tarkista sen ulkoasu. Voit pyytää korjauksia suoraan chatissa (esim. "Tee mobiilivalikosta hampurilaistyylinen"). Kun visuaalinen ilme on 90-prosenttisesti kohdallaan, kopioi koodi.
---
Vaihe 3: Koodin jalostus Cursorissa ja Claude 3.7 Sonnetilla
Nyt siirrytään varsinaiseen ohjelmointiin. Cursor tekoäly yhdistettynä Claude 3.7 Sonnet -malliin on tällä hetkellä tehokkain yhdistelmä koodin jalostamiseen, sillä Claude 3.7:n parannettu päättelykyky (Reasoning) osaa ratkaista monimutkaiset tilanhallinnan ja komponenttien pilkkomisen haasteet ilman, että koodi rikkoutuu.
Projektin kansiorakenne
Ennen kuin liität koodia, varmista, että projektisi noudattaa selkeää rakennetta. Pyydä Cursoria luomaan seuraava arkkitehtuuri:
src/
├── components/
│ ├── ui/ # Atomaariset komponentit (painikkeet, syötteet)
│ └── dashboard/ # Suuremmat toiminnalliset kokonaisuudet
├── hooks/ # Custom hookit tilanhallintaan ja API-kutsuihin
├── types/ # TypeScript-tyypitykset
└── App.tsx
Cursor Composerin hyödyntäminen
Avaa Cursor Composer (Cmd + I tai Ctrl + I) ja valitse malliksi Claude 3.7 Sonnet. Ota käyttöön "Reasoning"-tila (ajatteluviive), jotta malli analysoi koodin arkkitehtuuria syvällisemmin ennen vastaamista.
Syötä Composeriin v0-palvelusta saatu koodi ja käytä seuraavaa järjestelmäohjetta jalostukseen.
Järjestelmäohje (System Prompt) Cursorille:
Roolisi on kokenut frontend-arkkitehti. Tehtäväsi on refaktoroida tämä v0:sta tuotu monoliittinen React-komponentti tuotantovalmiiksi koodiksi.
Noudata näitä sääntöjä:
1. Pilko monoliitti pienempiin, uudelleenkäytettäviin komponentteihin 'components/'-kansioon.
2. Erota esitystapa (UI) ja logiikka. Luo tarvittaessa custom hookit tilanhallintaa varten.
3. Käytä TypeScriptiä tiukasti. Määrittele rajapinnat (interface) kaikille propseille.
4. Varmista, että Figma to Tailwind -käännös säilyttää pikselintarkan ulkoasun, mutta käyttää projektin omia Tailwind-konfiguraation mukaisia luokkia.
5. Älä poista tai muuta olemassa olevia Tailwind-animaatioita tai siirtymiä.
---
Vaihe 4: Interaktiivisuuden ja tilanhallinnan lisääminen
Kun tekoälyohjelmointi on luonut puhtaan komponenttirakenteen, on aika herättää käyttöliittymä henkiin. Claude 3.7 Sonnet loistaa monimutkaisten tilojen, kuten lomakkeiden validoinnin, suodatusten ja dynaamisten listojen rakentamisessa.
Esimerkki: Suodatustoiminnallisuuden rakentaminen
Jos kyseessä on datataulukko tai tuoteluettelo, älä kirjoita suodatuslogiikkaa käsin. Pyydä Cursoria luomaan dynaaminen tilanhallinta.
Työnkulku Cursorissa:
1. Valitse komponenttitiedosto (esim. ProductGrid.tsx).
2. Avaa Cursor Chat (Cmd + L).
3. Anna tarkka toiminnallinen prompti:
"Luo tälle tuoteristikolle dynaaminen haku- ja suodatusjärjestelmä. Käyttäjä voi hakea nimen perusteella ja suodattaa kategorian sekä hintaluokan mukaan. Toteuta tämä käyttämällä useMemo-hookia suorituskyvyn varmistamiseksi. Älä muuta komponentin Tailwind-tyylejä."
Claude 3.7 analysoi olemassa olevan koodin ja lisää tarvittavat tilamuuttujat (useState) sekä suodatuslogiikan rikkomatta visuaalista ilmettä, jonka loit aiemmin Figman pohjalta.
---
Vibe-koodarin tarkistuslista tuotantoon siirryttäessä
Ennen kuin pushaat koodin gitiin, varmista laatu tämän tarkistuslistan avulla. Voit ajaa tämän listan suoraan Cursorin terminal-ikkunassa tai chatissa:
- [ ] Responsiivisuus: Toimiiko layout mobiilissa, tabletissa ja desktopissa? (Tarkista Tailwindin
sm:,md:,lg:-etuliitteet). - [ ] Saavutettavuus (a11y): Onko painikkeilla ja linkeillä selkeät
aria-label-määritteet? Ovatko värikontrastit riittävät? - [ ] Suorituskyky: Onko raskaat listat ja suodatukset optimoitu (
useMemo,useCallback)? - [ ] Kuvakkeet ja resurssit: Ovatko kaikki kuvakkeet yhtenäisiä (esim. pelkkää Lucide-Reactia) ja kuvat optimoituja?
---
Seuraava askel: Rakenna ensimmäinen komponenttisi tänään
Älä jää jumiin vanhoihin työtapoihin, joissa jokainen div-elementti kirjoitetaan käsin. Ota seuraava Figma-projektisi, leikkaa siitä keskeinen käyttöliittymäkomponentti kuvakaappaukseksi, aja se v0-palvelun läpi ja anna Cursorin sekä Claude 3.7 Sonnetin hoitaa rutiinityö.
Säästät tunteja aikaa, jonka voit käyttää sovelluksesi ydinlogiikan, tietoturvan ja käyttökokemuksen hiomiseen.