AI-avusteisen UI-koodauksen perusteet

Opit UI-koodausta hyödyntäen AI-työkaluja.

Kesto

4 viikkoa

Tämä moduuli sisältyy koulutusohjelmaan Product Builder.

Moduulin kuvaus

AI-työkalujen myötä ohjelmointia osaamattoman UX/UI-suunnittelijan tai tuoteomistajan on mahdollista oppia muokkaamaan käyttöliittymän ulkoasua koodaamalla. Kehitystiimin toiminta tehostuu, kun UX-suunnittelija voi vastata sovelluksen ulkoasun tuottavista komponenteista, ja ohjelmoijat voivat keskittyä sovelluksen toimintalogiikan ja backendin rakentamiseen. Tässä moduulissa opit suunnittelemaan ja toteuttamaan uudelleenkäytettäviä UI-komponentteja moderneilla frontend-teknologioilla. Kurssilla keskitytään AI-avusteiseen koodaukseen, jota on mahdollista oppia nopeasti ilman aiempaa ohjelmointiosaamista. Esimerkeissä käytettävät teknologiat ovat React, TypeScript ja Tailwind CSS.

Mitä opit

AI-avusteisen koodauseditorin käyttö lokaaliympäristössä
Githubin käyttö koodin versionhallinnassa
Työskentely ohjelmoijana osana kehitystiimiä
UI-prototyypin toteutus AI-avusteisesti
Uudelleenkäytettävien UI-komponenttien toteutus
Käytännön harjoituksia ja esimerkkejä

Moduulin sisältö

Johdanto AI-avusteiseen koodaukseen

Parhaat AI-työkalut koodauksessa (Cursor, v0, etc.)
Johdanto Github versionhallintaan
Githubin ja lokaaliympäristön käyttöönotto

UI-komponenttien toteutus

Uudelleenkäytettävyyden perusteet
Komponenttien ulkoasun määrittely
React-komponenttien toteutus käytännössä, pohjana Shadcn UI:n komponentit

UI-komponettien käyttö projektissa

Uusien UI-näkymien tuottaminen komponenttien avulla
Protoilu dummy datalla vs. oikeiden datalähteiden (API) käyttäminen

Storybook-komponenttikirjasto

Johdanto Storybookiin
UI-kirjaston luominen koodattujen komponenttien pohjalta
UI-kirjaston käyttöönotto React-projektiin

Kouluttajat

Juha-Antti Huusko

Lead Product Designer

Hei! Minulla on noin 20 vuoden työkokemus digitaalisesta palvelumuotoilusta, käyttäjätutkimuksesta ja UX/UI-suunnittelusta. Tällä hetkellä työskentelen hybridi-roolissa AI-koodaavana UX-tuoteomistajana B2B-ohjelmistojen kehityksen parissa. Aiemmin olen työskennellyt mm. UX-suunnittelijana Nokiassa, palvelumuotoilijana Keskossa ja User Experience & Design -tiimin vetäjänä Torissa. UX/UI-suunnittelua olen tehnyt mm. verkkokauppoihin, SaaS-tuotteisiin, yritysten sisäisiin ohjelmistoihin, mobiilisovelluksiin ja eri alojen startup -yrityksille.

LinkedIn profiili

UX DesignUI DesignPalvelumuotoiluKäyttäjätutkimusMobiilisovelluksetVerkkokaupat