Näin muutat Claude-artefaktin verkkosivustoksi

Johdanto

Moni käyttää Claudea verkkosivustojen tekemiseen. Kun pyydät sivustoa, Claude palauttaa sen artefaktina: yksittäisenä tiedostona, jonka voit esikatsella suoraan chatissa. Mutta kun artefakti on valmis, seuraava askel ei ole ilmeinen. Sivusto pitää vielä saada johonkin julkaistuksi, verkkotunnus yhdistettyä, mobiililaitteilla toimivaksi ja keksiä, miten sitä voi muokata jatkossa.

Claudessa on artefakteille "Publish"-painike, mutta tulos elää claude.site-osoitteessa Anthropicin käyttöliittymän sisällä. Se sopii demon jakamiseen, mutta ei oikeaksi verkkosivustoksi, jota käytettäisiin liiketoiminnassa.

Tässä oppaassa näytän, miten muutat Claude-artefaktin oikeaksi, julkaistuksi verkkosivustoksi Repaint-nimisellä uudella tekoälytyökalulla. Se antaa sinun aloittaa artefaktistasi, julkaista sivuston ja tehdä muokkauksia juttelemalla tekoälyn kanssa.

Miksi Claude-artefaktin julkaiseminen on vaikeaa

Claude osaa luoda koodia, mutta se ei ole täysiverinen sivustonrakentaja. Se ohjaa sinut muille alustoille, kun kysyt, miten sivuston voi julkaista omalla verkkotunnuksellaan. Yleensä se suosittelee kehittäjätyökaluja, kuten GitHub, Netlify ja Vercel, tai ehdottaa rakentamista perinteisellä sivustonrakentajalla. Kumpikaan ei ole ihanteellinen.

Kehittäjätyökalut ovat mukavia, koska ne voivat suoraan ajaa Claudella luotua koodia. Haittapuoli on, että jokainen muutos vaatii tiettyjen koodi­tiedostojen muokkaamista. Niille, jotka eivät koodaa, tämä tarkoittaa tiedostojen jatkuvaa siirtämistä edestakaisin julkaistun koodin välillä vain yksinkertaisten muokkausten tekemiseksi tekoälyllä.

Useimmat välttävät koodin monimutkaisuutta käyttämällä sivustonrakentajaa, kuten WordPress, Wix tai Webflow. Nämä alustat tekevät muokkausten julkaisemisesta sujuvampaa. Ongelma on, että ne eivät voi ajaa Claude-artefakteja, joten kaikki täytyy rakentaa käsin uudelleen. Sen jälkeen kaikki muokkaukset täytyy tehdä jatkossa käsin.

Siksi kannattaa käyttää tekoälypohjaista sivustonrakentajaa kuten Repaintia. Se antaa sinulle mukautetun koodin ajamisen joustavuuden ja muokkaamisen sekä julkaisemisen samassa paikassa.

Mikä on Repaint?

Repaint on tekoälyalusta verkkosivustojen luomiseen. Se on rakennettu saman chat-pohjaisen työnkulun ympärille, joka tekee Claudesta hyödyllisen. Voit pyytää muutoksia tavallisella kielellä, tarkastella tulosta ja jatkaa iterointia, kunnes sivusto näyttää oikealta.

Mutta Repaint on täysi sivustoalusta, ei vain paikka koodin luomiseen. Se tarkoittaa, että se hoitaa ne oikean sivuston pyörittämisen osat, joita Claude-artefaktien julkaiseminen ei hoida:

• Se julkaisee sivustosi normaalina verkkosivustona, ilman Anthropicin käyttöliittymää sen ympärillä.
• Se antaa sinun yhdistää mukautetun verkkotunnuksen, jotta sivusto voi elää oikeassa URL-osoitteessasi.
• Se pitää sivuston muokattavissa tekoälyllä, joten voit tehdä muutoksia myöhemmin.
• Se auttaa hallitsemaan SEO-yksityiskohtia, kuten sivujen otsikoita, kuvauksia ja sivuston rakennetta.
• Se voi kasvaa yksittäisestä artefaktista monisivuiseksi sivustoksi.

Siinä on ero artefaktin jakamisen ja sellaisen paikan välillä, jossa voit hallita sivustoasi ajan myötä.

Vaihe 1: Tuo koodi Claudesta

Kun Claude tekee verkkosivuston, se laittaa kaiken yksittäiseen tiedostoon, jonka voit esikatsella chatissa. Oletuksena artefakti on HTML, mutta voit pyytää sen sijaan React/TSX-muotoa. Joka tapauksessa artefaktipaneelin yläosassa on kopiointipainike.

Aloita avaamalla Claude-artefaktisi ja kopioimalla koodi. Mene sitten Repaintin koodin tuontiin ja liitä se sinne. Tämä käynnistää sivuston rakentamisprosessin. Repaint käyttää koodiasi luodakseen täyden verkkosivuston, jonka voit julkaista ja jota voit jatkaa muokkaamaan.

Jos et ole vielä tehnyt artefaktia Claudessa, suosittelen pyytämään Reactia. Se on lähempänä muotoa, jota Repaint käyttää, joten pienten suunnitteluyksityiskohtien katoamisen mahdollisuus käännöksessä on pienempi. HTML toimii myös, vaikka mahdolliset ongelmat voi korjata myöhemmin juttelemalla Repaintin kanssa.

Vaihe 2: Suunnittele, mitä Repaintin pitäisi rakentaa

Kun olet liittänyt koodin, Repaint esittää muutaman kysymyksen ennen kuin se rakentaa sivuston. Tämä antaa sinulle mahdollisuuden päättää, haluatko käyttää Claude-versiota sellaisenaan, käyttää sitä löyhänä inspiraationa vai muuttaa se suuremmaksi sivustoksi, jossa on enemmän sivuja.

Suunnittele sisältö

Claude-artefaktit ovat aina yksittäisiä tiedostoja, joten ne päätyvät yleensä yksisivuisiksi sivustoiksi, joissa linkit vierittävät osioihin uusien sivujen avaamisen sijaan. Mutta useimmat yritykset tarvitsevat enemmän kuin yhden sivun. Joten jos artefaktisi on yhden sivun versio, kannattaa harkita, että Repaint rakentaa sen useana sivuna.

Voit myös käyttää tämän hetken lisätäksesi sisältöä. Claude-artefakteissa ei yleensä ole suuria sivukokonaisuuksia kuten blogipostauksia. Kun tuot artefaktin Repaintiin, voit laajentaa laajuutta sisältämään kaiken haluamasi.

Mahdolliset uudet sivut sopivat olemassa olevaan tyyliisi.

Suunnittele tyyli

Oletuksena Repaint kopioi tyylin alkuperäisestäsi. Se tarkoittaa, että se säilyttää saman ilmeen: värit, asettelun, typografian ja välistyksen.

Mutta sinun ei tarvitse pitää tyyliä. Jos et ole tyytyväinen siihen, voit pyytää Repaintia suunnittelemaan sivustosi uudelleen. Repaint voi:

• Luoda alkuperäisen mahdollisimman tarkasti uudelleen
• Sovittaa toisen pitämäsi sivuston tyyliin
• Luoda mukautetun tyylin sisällöllesi
• Valita tyylin Repaintin tyylikirjastosta
• Valita puolestasi

Älä stressaa siitä liikaa. Jos et pidä siitä, mitä se tekee, voit pyytää sitä tekemään uusia versioita myöhemmin.

Tarkista suunnitelma

Ennen kuin mitään luodaan, Repaint kirjoittaa täsmälleen sen, mitä se aikoo rakentaa: mitkä sivut, mikä sisältö ja mikä tyyli. Käy se läpi ja tee viimeiset muutokset. Suunnitelman korjaaminen on paljon nopeampaa kuin koko sivuston uudelleenluominen.

Kun vahvistat, Repaint rakentaa uuden sivustosi!

Vaihe 3: Luo sivustosi

Kun vahvistat suunnitelman, Repaint alkaa rakentaa sivustoasi. Näet edistymisviestejä, kun se käy läpi jokaisen sivun. Yksinkertainen etusivu saattaa valmistua minuutissa tai kahdessa. Suurempi sivusto, jossa on enemmän sivuja, voi kestää kauemmin.

Repaint ei pelkästään isännöi liittämääsi koodia. Se käyttää Claude-artefaktia lähdemateriaalina ja rakentaa sitten suunnitelmassasi kuvatun sivuston. Jos pyysit tarkkaa uudelleenluontia, se yrittää vastata alkuperäistä mahdollisimman tarkasti. Jos pyysit lisää sivuja tai eri tyyliä, se käyttää artefaktia lähtökohtana.

Joskus yksityiskohtia voi kadota käännöksessä luomisen aikana. Sitä tapahtuu useammin, jos artefaktisi on HTML, koska React on lähempänä Repaintin käyttämää muotoa. Jos tärkeitä yksityiskohtia katoaa, voit korjata ne seuraavassa vaiheessa.

Vaihe 4: Muokkaa sivustoa tekoälyllä

Kun Repaint on luonut ensimmäisen version, näet sen näytön oikealla puolella. Nyt voit tehdä muutoksia samalla tavalla kuin Claudessa. Kirjoitat, mitä haluat muuttaa, Repaint päivittää sivuston, ja sitten tarkastelet tulosta.

Voit esimerkiksi pyytää Repaintia:

• Lisäämään uuden sivun
• Muuttamaan värejä tai fontteja
• Lisäämään yhteydenottolomakkeen
• Luomaan kuvia
• Kirjoittamaan tekstin uudelleen

Voit jatkaa muutosten tekemistä, kunnes sivusto tuntuu valmiilta julkaistavaksi.

Vaihe 5: Julkaise sivustosi

Kun sivusto on valmis, napsauta Julkaise-painiketta. Repaint laittaa sivuston verkkoon ja antaa sinulle live-URL-osoitteen, jonka voit jakaa kenelle tahansa. Se näyttää suunnilleen tältä: https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

Tässä vaiheessa työstäsi tulee oikea verkkosivusto internetissä. Voit avata sen puhelimellasi, lähettää sen jollekulle tai testata sitä oikeassa selaimessa. Se ei myöskään ole minkään Anthropicin käyttöliittymän sisällä, kuten julkaistu artefakti olisi.

Sinun ei myöskään tarvitse viedä koodia tai julkaista tiedostoja muualle. Tästä lähtien Repaint on paikka, jossa muokkaat ja julkaiset sivustoa. Jos haluat tehdä muutoksia myöhemmin, voit pyytää Repaintia päivittämään sivuston ja julkaista sitten uuden version samalla painikkeella.

Vaihe 6: Yhdistä verkkotunnuksesi

Kun olet valmis käyttämään omaa URL-osoitettasi, mene kohtaan Sivuston asetukset > Verkkotunnukset ja napsauta Yhdistä mukautettu verkkotunnus. Tämä vaatii maksullisen tilauksen. Voit nähdä hintatiedot täältä.

Verkkotunnustasi hallitaan Clauden ja Repaintin ulkopuolisella alustalla. Se on rekisteröity verkkotunnustoimittajalle, kuten GoDaddy, Namecheap tai Cloudflare. Sinun ei tarvitse siirtää sitä mihinkään. Päivität vain asetukset verkkotunnustoimittajallasi siten, että verkkotunnus osoittaa Repaint-sivustoosi.

Jos et ole koskaan tehnyt tätä aiemmin, älä huoli. Pyydä Repaintia opastamaan sinua. Se kertoo tarkalleen, mitä tehdä, vaihe vaiheelta.

Muutos voi kestää muutaman tunnin tulla voimaan. Kun Repaint näyttää verkkotunnuksesi vahvistetuksi, sivustosi on live-tilassa omalla verkkotunnuksellasi.

Yhteenveto

Claudella on helppoa luoda ensimmäinen versio verkkosivustosta artefaktin sisällä, mutta sen saaminen verkkoon oikeana verkkosivustona ja sen ylläpitäminen on edelleen vaikeaa. Repaint antaa sinulle tavan muuttaa tuo artefakti oikeaksi verkkosivustoksi, jonka voit julkaista, yhdistää verkkotunnukseen ja jota voit jatkaa muokkaamaan tekoälyllä. Repaint tekee Claude-artefaktin muuttamisesta julkaistuksi sivustoksi helpompaa kuin koskaan.

Usein kysytyt kysymykset

Miksi en käyttäisi vain Clauden sisäänrakennettua artefaktien julkaisua?

Voit, mutta tulos elää Clauden ylläpitämässä hiekkalaatikossa Anthropicin käyttöliittymän sisällä, etkä voi laittaa sitä omalle verkkotunnuksellesi. Se sopii demon jakamiseen, mutta ei ole sitä, mitä useimmat yritykset haluavat oikealta verkkosivustolta. Repaint antaa sinulle normaalin verkkosivuston omalla verkkotunnuksellasi, omalla brändäyksellä ja ilman Anthropicin käyttöliittymää sen ympärillä.

Kuinka kauan Claude-artefaktin muuttaminen verkkosivustoksi Repaintilla kestää?

Jos artefaktisi on jo valmis, sen pitäisi viedä vain muutama minuutti. Koodin jakaminen, sivuston suunnittelu ja sivuston luominen kestää yleensä 2–5 minuuttia. Sen jälkeen julkaisuun kuluva aika riippuu siitä, kuinka monta säätöä teet.

Paljonko julkaisu Repaintilla maksaa?

Koodin tuonti Repaintiin, sivuston luominen, muokkausten tekeminen ja julkaiseminen on ilmaista. Ilmaistason tärkeimmät rajoitukset ovat rajallinen käyttö, ei mukautettua verkkotunnusta ja Repaint-merkki sivustolla. Maksulliset suunnitelmat alkavat 20 $/kuukausi vuosittain laskutettuna tai 25 $/kuukausi kuukausittain laskutettuna. Niihin sisältyy laajennettu käyttö, mukautetun verkkotunnuksen tuki ja Repaint-merkin poistaminen.

Miksi en käyttäisi vain GitHub Pagesia, Netlifyä tai Verceliä?

Voit, varsinkin jos sinulla on mukava hallita koodia. Nuo työkalut ovat hyviä tiedostojen laittamisessa verkkoon. Mutta jokainen merkityksellinen muutos lähettää sinut takaisin koodiin, mikä tarkoittaa, että jäät kopioimaan tiedostoja Clauden, editorisi ja isännöintityökalusi välillä.

Repaint on erilainen, koska se on täysi sivustoalusta, ei vain paikka tiedostojen tarjoamiseen. Se tarkoittaa, että voit jatkaa muokkaamista tekoälyllä, julkaista muutoksia samasta paikasta, hallita sivuja, päivittää SEO-asetuksia, optimoida kuvia, yhdistää lomakkeita ja käyttää mukautettua verkkotunnustasi. Se on rakennettu pitkän aikavälin sivustonhallintaan, ei vain ensimmäiseen julkaisuun.

Tarvitseeko minun osata koodata korjatakseni ongelmia?

Ei. Repaint on tehty ihmisille, jotka eivät koodaa. Kun olet tuonut koodisi Claudesta, sinun ei tarvitse enää koskaan hallita koodia. Jos jokin näyttää väärältä, voit korjata sen juttelemalla tekoälyn kanssa. Koodin osaaminen voi auttaa, jos haluat olla hyvin täsmällinen, mutta se ei ole pakollista.

Näyttääkö sivusto täsmälleen Claude-artefaktilta?

Jos pyydät Repaintia luomaan alkuperäisen uudelleen, sen pitäisi näyttää melkein täsmälleen samalta. Joskus jotkin yksityiskohdat katoavat, koska Repaint kääntää koodin omaksi sivustoformaatikseen. Käännösongelmat ovat yleisempiä, jos artefakti oli HTML. Jos näin käy, pitäisi pystyä korjaamaan kaikki muutamalla kehotteella.

Mitä tapahtuu, jos tekoäly tekee virheen?

Kun teet päivityksiä, Repaint tallentaa jokaisen sivustosi version. Voit pyytää Repaintia palaamaan taaksepäin, ja se palautuu aiempaan versioon. Tai jos haluat palata tiettyyn ajankohtaan, voit palauttaa minkä tahansa aiemman version manuaalisesti. Voit siis tehdä muutoksia vapaasti ilman riskiä sivustosi pilaamisesta.

Toimivatko lomakkeet ja painikkeet tuonnin jälkeen?

Kyllä. Yhteydenottolomakkeet eivät todennäköisesti toimineet alkuperäisessä Claude-artefaktissasi. Mutta kun siirrät sivuston Repaintiin, se voi muuttaa lomakkeen oikeaksi yhteydenottolomakkeeksi, joka lähettää sähköposti-ilmoituksia, kun saat lähetyksiä. Painikkeiden pitäisi toimia, jos ne linkittävät oikeisiin sivuihin tai osioihin. Jos painike osoittaa ei mihinkään, voit pyytää Repaintia yhdistämään sen.

Voiko Repaint käsitellä kuvia, ikoneja ja muita resursseja Claude-artefaktistani?

Claude-artefaktit eivät yleensä tallenna kuvatiedostoja sisäänsä. Ne yleensä linkittävät muualla isännöityihin kuviin. Kun tuot koodisi, Repaint voi hakea ja tallentaa kopiot näistä kuvista, jotta ne pysyvät pysyvästi saatavilla uudelle sivustollesi. Repaint voi myös luoda kuvia, jos sinun täytyy vielä lisätä niitä.

Voinko lisätä SEO-asetuksia, analytiikkaa ja metatietoja?

Kyllä. Voit lisätä mukautettua koodia, analytiikkaa ja metatietoja vain pyytämällä Repaintia. Se voi määrittää tekniset SEO-asetukset puolestasi, ja se voi lisätä skriptejä ja upotuksia muilta alustoilta. Lisätäksesi Google Analyticsin, jaa vain GA-tunnuksesi.

Korvaako Repaint isännöinnin, vai tarvitsenko silti erillisen isännän?

Repaint on isännöintialusta. Se pyörittää verkkosivustoasi. Sinun ei tarvitse erillistä isännöintialustaa kuten GitHub Pages, Netlify, Vercel tai toista sivustonrakentajaa.