Claude Code -oppaat suomeksi
Näissä oppaissa näytän, miten tein omat projektini Claude Codella.
- Näin rakensin 3D-sivuston Claude Codella
- Niissä on oikeat luvut ja oikeat virheet.
- Oppaat ovat ilmaisia, eikä rekisteröitymistä tarvita.
Varaa ilmainen kartoitus · Soita 040 961 2120
Lue lisää
Näissä oppaissa näytän, miten tein omat projektini Claude Codella. Ensimmäinen kertoo, miten tämä 3D-sivusto rakennettiin.
Mitä nämä oppaat ovat?
Oppaat ovat suomenkielisiä kuvauksia projekteista, jotka olen oikeasti tehnyt Claude Codella. Jokaisessa kerron vaihe vaiheelta, mitä rakennettiin, millä työkaluilla, missä järjestyksessä ja mikä meni pieleen. Mukana ovat referenssit, ensimmäinen versio, palautteeni ja korjaukset sekä ne virheet, jotka veivät eniten aikaa.
Oppaat kirjoitetaan muistiinpanoista, jotka syntyvät työn aikana: suunnitelmat, mittaukset, palautteeni ja korjaukset. Siksi niissä on oikeat luvut, kuten ruutuajat millisekunteina, ja oikeat virheet.
Lue opas
Näin rakensin 3D-sivuston Claude Codella
Three.js, React Three Fiber, fontista pursotetut kirjaimet, valovirtashaderi, levykaruselli, painovoima, iPhone ja prerender. Lopussa työtapa: orkestroija, subagentit ja worktreet.
Mikä on Claude Code?
Claude Code on Anthropicin tekoälytyökalu ohjelmointiin. Se toimii terminaalissa projektikansion sisällä: lukee tiedostot, kirjoittaa ja muokkaa koodia, ajaa komentoja ja testejä ja tekee git-commitit. Minä kerron, mitä haluan, ja annan referenssit ja palautteen. Claude Code tekee työn ja näyttää tuloksen, jonka tarkistan.
Isommissa töissä Claude Code jakaa työn subagenteille, jotka tekevät osia rinnakkain. Skillit ovat ohjepaketteja, joilla saman työn saa toistettua. Esimerkiksi angle-3d-skilli (repo 3d-kone) sisältää tämän sivuston tekniikat ja sivupohjan.
Miten Claude Code otetaan käyttöön?
Tarvitset Claude-tilin, jolla Claude Code toimii, ja terminaalin. Minulla Claude Code on asennettu npm:llä komennolla npm install -g @anthropic-ai/claude-code, mikä vaatii Node.js:n. Sen jälkeen avaat terminaalin projektikansiossa, kirjoitat claude ja kerrot omin sanoin, mitä haluat tehdä. Ensimmäisellä kerralla se pyytää kirjautumaan.
Anthropicin asennusohjeessa on muitakin tapoja asentaa. Käytän Claude Codea Macilla ja Windowsilla, ja sama työtapa toimii molemmissa.
Ensimmäiseksi pyynnöksi käy esimerkiksi "lue tämä projekti ja kerro, mitä se tekee". Pyydä sen jälkeen yksi pieni muutos ja katso, mitä Claude Code muutti, ennen kuin hyväksyt sen.
Aloita pienestä projektista, jossa git on käytössä. Silloin näet jokaisen muutoksen ja huonon voi perua. Claude Code kysyy luvan ennen kuin se muokkaa tiedostoja tai ajaa komentoja, ja asetuksiin voi kirjoittaa, mitkä komennot saa ajaa kysymättä.
Mikä on CLAUDE.md ja mihin sitä tarvitaan?
CLAUDE.md on tekstitiedosto, jonka Claude Code lukee jokaisen keskustelun alussa. Siihen kirjoitetaan asiat, jotka muuten pitäisi toistaa joka kerta: millä kielellä puhutaan, miten projekti käynnistetään, mihin ei saa koskea ja millä tyylillä tekstiä kirjoitetaan. Projektikansion CLAUDE.md koskee sitä projektia ja kotihakemiston .claude-kansiossa oleva kaikkia.
Omassa CLAUDE.md:ssäni lukee esimerkiksi, että kommunikoidaan suomeksi, vastaukset ovat lyhyitä ja konkreettisia ja tietyt kuluneet sanat ovat teksteissä kiellettyjä. Siellä lukee myös, mistä muistiinpanoni löytyvät ja mitkä niistä luetaan ennen kuin työ alkaa.
Pidä tiedosto lyhyenä, koska se luetaan joka keskustelussa. Kun huomaat korjaavasi samaa asiaa toista kertaa, kirjoita se CLAUDE.md:hen.
Pitkä työ ei mahdu yhteen keskusteluun. Kun keskustelu käy pitkäksi, Claude kirjoittaa muistiinpanoihini handoff-tiedoston: mitä tehtiin, mitä jäi auki ja mistä jatketaan. Uusi keskustelu aloittaa siitä.
Mitä subagentit ja worktreet tarkoittavat?
Subagentti on Claude Coden apulainen, joka saa yhden rajatun tehtävän ja tekee sen omassa keskustelussaan. Pääsessio jakaa työn ja kokoaa tulokset. Git worktree on saman repon toinen työkansio omalla haarallaan. Kun jokainen agentti tekee työnsä omassa worktreessään, rinnakkaiset muutokset eivät sotke toisiaan eivätkä pääkansiota, jossa oma kehityspalvelin pyörii.
Tämän sivuston 3D-sivut tehtiin omissa worktreeissään. Alasivuissa riitti tiedostojako: sisältöagentit kirjoittivat sivujen tekstit datatiedostoiksi, ja toinen agentti rakensi samaan aikaan sivupohjan, joka näyttää ne. Tarkastaja luki tekstit lähteitä vasten, ja korjaaja korjasi löydökset.
Rinnakkaisissa töissä jokainen agentti commitoi työnsä usein, koska jos session pysäyttää kesken, commitoimaton työ katoaa.
Kenelle oppaat on kirjoitettu?
Yrittäjälle, joka haluaa nähdä, miten nettisivu tai tekoälyjärjestelmä oikeasti tehdään, ennen kuin ostaa sellaisen. Kehittäjälle ja aloittelijalle, joka haluaa kokeilla Claude Codea suomeksi oikealla projektilla. Oppaat voi lukea ilman koodaustaitoa. Jos haluat toistaa vaiheet itse, terminaalin ja gitin perusteet auttavat.
Mitä oppaita on suunnitteilla?
- Claude Code -skillit Mikä skill on, miten angle-3d-skilli tehtiin ja miten sillä kopioidaan 3D-sivusto uudelle brändille yhdellä config-tiedostolla.
- Tekoälyvastaajan rakentaminen Miten puhelimeen vastaava tekoäly rakennetaan Claude Codella. Kirjoitan oppaan, kun oma projekti on niin pitkällä, että siitä voi kertoa rehellisesti.
Maksavatko oppaat jotain?
Eivät. Oppaat ovat ilmaisia, eikä niiden lukemiseen tarvita rekisteröitymistä tai sähköpostiosoitetta. Ne kuuluvat Anglé Labsin lupaukseen: aina jotain ilmaista kaupan päälle. Jos haluat, että sama työ tehdään valmiiksi sun yritykselle, varaa ilmainen kartoitus, niin katsotaan yhdessä, mistä kannattaa aloittaa. Hinta selviää kartoituksessa.
Usein kysyttyä
Kuka oppaat kirjoittaa?
Kim Anglé eli minä. Rakennan Anglé Labsissa yrittäjille nettisivuja, videoita ja järjestelmiä Helsingistä käsin. Oppaat kertovat omista projekteistani, kuten tästä sivustosta.
Missä järjestyksessä oppaat kannattaa lukea?
Jos Claude Code on uusi, lue ensin tämän sivun osiot käyttöönotosta, CLAUDE.md:stä ja subagenteista. Sen jälkeen 3D-sivuston opas näyttää, miten ne toimivat oikeassa projektissa.
Onko oppaissa koodia, jota voi kopioida?
Oppaissa on yksittäisiä korjauksia ja asetuksia, kuten camera.updateMatrixWorld(), mutta ei koko sivuston koodia. Koko 3D-sivupohja on angle-3d-skillissä (repo 3d-kone), joka on vielä yksityinen.
Tuleeko oppaita lisää?
Uusi opas tulee, kun seuraava projekti on niin pitkällä, että siitä voi kertoa rehellisesti. Suunnitellut aiheet ovat tällä sivulla kohdassa Mitä oppaita on suunnitteilla.
Voiko oppaista kysyä lisää?
Voi. Soita Kimille 040 961 2120 tai lähetä sähköpostia osoitteeseen kim@anglelabs.fi. Anglé Labs Communityn Discord on tulossa, ja siitä kerrotaan Community-sivulla.
Haluatko, että sivu tehdään sulle?
Oppaasta näet, miten työ tehdään. Jos haluat sen valmiina, soita mulle tai varaa ilmainen kartoitus.