Hoe je een Claude-artifact omzet in een website

Inleiding

Veel mensen gebruiken Claude om websites te maken. Wanneer je het vraagt, geeft Claude de site terug als een artifact: één bestand dat je direct in de chat kunt bekijken. Maar zodra je dat artifact hebt, is de volgende stap niet vanzelfsprekend. Je moet het nog ergens hosten, een domein koppelen, ervoor zorgen dat het op mobiel werkt en uitzoeken hoe je het later kunt blijven bewerken.

Claude heeft een "Publish"-knop voor artifacts, maar het resultaat leeft op een claude.site-URL omhuld door Anthropic's UI. Dat is prima om een demo te delen, maar niet voor een echte website die je voor een bedrijf zou gebruiken.

In deze handleiding laat ik je zien hoe je een Claude-artifact omzet in een echte, gepubliceerde website met een nieuw AI-hulpmiddel genaamd Repaint. Je begint vanuit je artifact, publiceert de site en maakt bewerkingen door te chatten met AI.

Waarom het publiceren van een Claude-artifact lastig is

Claude kan code genereren, maar het is geen volledige websitebouwer. Het verwijst je naar andere platforms wanneer je vraagt hoe je op je eigen domein kunt publiceren. Meestal raadt het ontwikkelaarstools aan zoals GitHub, Netlify en Vercel, of het stelt voor om alles opnieuw te bouwen in een traditionele websitebouwer. Geen van beide is ideaal.

Ontwikkelaarstools zijn handig omdat ze de code die Claude genereert direct kunnen draaien. Het nadeel is dat elke wijziging vereist dat je specifieke codebestanden bewerkt. Voor mensen die niet kunnen programmeren betekent dit dat ze voortdurend bestanden in en uit hun gedeployde code moeten halen om eenvoudige aanpassingen met AI te doen.

De meeste mensen vermijden de complexiteit van code door een websitebouwer te gebruiken zoals WordPress, Wix of Webflow. Deze platforms maken het publiceren van wijzigingen soepeler. Het probleem is dat ze geen Claude-artifacts kunnen draaien, dus moet je alles handmatig opnieuw bouwen. En daarna moet je alles met de hand bewerken.

Daarom kun je beter een AI-websitebouwer zoals Repaint gebruiken. Het biedt je de flexibiliteit van het draaien van eigen code en het gemak van bewerken en publiceren op één plek.

Wat is Repaint?

Repaint is een AI-platform om websites te maken. Het is opgebouwd rond dezelfde chatgebaseerde werkwijze die Claude zo handig maakt. Je kunt wijzigingen aanvragen in gewoon Nederlands, het resultaat bekijken en blijven itereren tot de site er goed uit ziet.

Maar Repaint is een volledig websiteplatform, niet alleen een plek om code te genereren. Dat betekent dat het de onderdelen van het runnen van een echte website afhandelt die Claude's artifact-publishing niet doet:

• Het publiceert je site als een normale website, zonder Anthropic's UI eromheen.
• Het laat je een eigen domein koppelen, zodat de site op je echte URL kan staan.
• Het houdt de site bewerkbaar met AI, zodat je later wijzigingen kunt maken.
• Het helpt SEO-details te beheren zoals paginatitels, beschrijvingen en sitestructuur.
• Het kan uitgroeien van één artifact tot een website met meerdere pagina's.

Dat is het verschil tussen het delen van een artifact en het hebben van een echte plek om je site in de loop van de tijd te beheren.

Stap 1: Importeer code uit Claude

Wanneer Claude een website maakt, plaatst het alles in één bestand dat je in de chat kunt bekijken. Standaard is het artifact HTML, maar je kunt ook React/TSX vragen. Hoe dan ook, er is een kopieerknop bovenaan het artifact-paneel.

Om te beginnen, open je Claude-artifact en kopieer de code. Ga vervolgens naar de Repaint code-importer en plak het daar. Hiermee start het proces van het bouwen van de website. Repaint gebruikt je code om een volledige website te maken die je kunt publiceren en blijven bewerken.

Als je nog geen artifact in Claude hebt gemaakt, raad ik aan om React te vragen. Het ligt dichter bij het formaat dat Repaint gebruikt, dus is er minder kans dat kleine ontwerpdetails verloren gaan in de vertaling. HTML werkt ook, al kunnen eventuele problemen later worden opgelost door met Repaint te chatten.

Stap 2: Plan wat Repaint moet bouwen

Nadat je je code hebt geplakt, stelt Repaint een paar vragen voordat het de website bouwt. Dit geeft je de kans om te beslissen of je de Claude-versie exact wilt gebruiken, het als losse inspiratie wilt gebruiken, of het wilt omzetten in een grotere site met meer pagina's.

Plan de inhoud

Claude-artifacts zijn altijd één bestand, dus eindigen ze meestal als sites van één pagina waar de links naar secties scrollen in plaats van nieuwe pagina's te openen. Maar de meeste bedrijven hebben meer dan één pagina nodig. Dus als je artifact een one-pager is, overweeg dan om Repaint het als meerdere pagina's te laten bouwen.

Je kunt dit moment ook gebruiken om meer inhoud toe te voegen. Claude-artifacts bevatten meestal geen grote sets pagina's zoals blogposts. Wanneer je het artifact in Repaint importeert, kun je de omvang vergroten om alles toe te voegen wat je wilt.

Nieuwe pagina's krijgen dezelfde stijl als wat je al hebt.

Plan de stijl

Standaard kopieert Repaint de stijl van je origineel. Dat betekent dat dezelfde uitstraling behouden blijft: kleuren, indeling, typografie en witruimte.

Maar je hoeft de stijl niet te behouden. Als je er niet tevreden mee bent, kun je Repaint vragen je website opnieuw te ontwerpen. Repaint kan:

• Het origineel zo nauwkeurig mogelijk recreëren
• De stijl van een andere website overnemen die je leuk vindt
• Een aangepaste stijl voor je inhoud creëren
• Een stijl kiezen uit de stijlbibliotheek van Repaint
• Voor jou kiezen

Maak je er niet te druk om. Als het resultaat je niet bevalt, kun je het later vragen nieuwe versies te maken.

Bekijk het plan

Voordat er iets wordt gegenereerd, schrijft Repaint precies op wat het gaat bouwen: welke pagina's, welke inhoud en welke stijl. Bekijk het goed en breng eventuele laatste wijzigingen aan. Het is veel sneller om het plan aan te passen dan de hele site opnieuw te genereren.

Zodra je bevestigt, bouwt Repaint je nieuwe website!

Stap 3: Genereer je website

Zodra je het plan bevestigt, begint Repaint met het bouwen van je site. Je ziet voortgangsberichten terwijl het elke pagina verwerkt. Een eenvoudige startpagina kan een minuut of twee duren. Een grotere website met meer pagina's kan langer duren.

Repaint host niet alleen de code die je hebt geplakt. Het gebruikt het Claude-artifact als bronmateriaal en bouwt vervolgens de site die in je plan staat beschreven. Als je om een exacte recreatie hebt gevraagd, zal het proberen het origineel nauwkeurig na te bootsen. Als je om meer pagina's of een andere stijl hebt gevraagd, gebruikt het het artifact in plaats daarvan als uitgangspunt.

Soms kunnen details verloren gaan in de vertaling tijdens het genereren. Dit gebeurt vaker als je artifact HTML is, omdat React dichter ligt bij wat Repaint gebruikt. Als belangrijke details verloren zijn gegaan, kun je ze in de volgende stap herstellen.

Stap 4: Bewerk je website met AI

Zodra Repaint de eerste versie heeft gegenereerd, zie je deze aan de rechterkant van je scherm. Nu kun je wijzigingen aanbrengen op dezelfde manier als in Claude. Je typt wat je gewijzigd wilt hebben, Repaint past de site aan en jij bekijkt het resultaat.

Je kunt Repaint bijvoorbeeld vragen om:

• Een nieuwe pagina toe te voegen
• De kleuren of lettertypen te wijzigen
• Een contactformulier toe te voegen
• Afbeeldingen te genereren
• De tekst te herschrijven

Je kunt wijzigingen blijven aanbrengen totdat de site klaar voelt om te publiceren.

Stap 5: Publiceer je website

Wanneer de site klaar is, klik je op de Publish-knop. Repaint zet de site online en geeft je een live URL die je met iedereen kunt delen. Die ziet er ongeveer zo uit: https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

Op dit punt wordt je werk een echte website op het internet. Je kunt het openen op je telefoon, naar iemand sturen of testen in een echte browser. Het wordt ook niet omhuld door een Anthropic-UI zoals een gepubliceerd artifact wel zou zijn.

Je hoeft ook geen code te exporteren of bestanden ergens anders te deployen. Vanaf nu is Repaint de plek waar je de site bewerkt en publiceert. Als je later wijzigingen wilt aanbrengen, kun je Repaint vragen de website bij te werken en vervolgens de nieuwe versie met dezelfde knop te publiceren.

Stap 6: Verbind je domein

Wanneer je klaar bent om je eigen URL te gebruiken, ga naar Website-instellingen > Domeinen en klik op Verbind een eigen domein. Dit vereist een betaald abonnement. Je kunt de prijsdetails hier bekijken.

Je domein wordt beheerd op een platform buiten zowel Claude als Repaint. Het is geregistreerd bij een domeinprovider zoals GoDaddy, Namecheap of Cloudflare. Je hoeft het nergens naartoe te verplaatsen. Je werkt alleen de instellingen bij bij je domeinprovider, zodat het domein naar je Repaint-site wijst.

Als je dit nog nooit hebt gedaan, geen zorgen. Vraag Repaint om je er stap voor stap doorheen te leiden. Het vertelt je precies wat je moet doen.

De wijziging kan een paar uur duren voordat deze van kracht wordt. Zodra Repaint je domein als geverifieerd toont, is je website live op je eigen domein.

Conclusie

Claude maakt het eenvoudig om een eerste versie van een website in een artifact te creëren, maar het online krijgen als een echte website en het onderhouden ervan blijft lastig. Repaint biedt je een manier om dat artifact om te zetten in een echte website die je kunt publiceren, aan een domein koppelen en blijven bewerken met AI. Repaint maakt het eenvoudiger dan ooit om een Claude-artifact om te zetten in een gepubliceerde site.

Veelgestelde Vragen

Waarom niet gewoon Claude's ingebouwde artifact-publishing gebruiken?

Dat kan, maar het resultaat leeft in een door Claude gehoste sandbox, omhuld door Anthropic's UI, en je kunt het niet op je eigen domein zetten. Dat is prima om een demo te delen, maar niet wat de meeste bedrijven willen voor een echte website. Repaint geeft je een normale website met je eigen domein, je eigen branding en geen Anthropic-UI eromheen.

Hoe lang duurt het om een Claude-artifact met Repaint om te zetten in een website?

Als je artifact al klaar is, zou het maar een paar minuten moeten duren. Het delen van je code, het plannen van de site en het genereren van de website duurt meestal 2 tot 5 minuten. Daarna hangt de tijd tot publicatie af van hoeveel aanpassingen je maakt.

Hoeveel kost het om met Repaint te publiceren?

Het is gratis om je code in Repaint te importeren, een site te genereren, bewerkingen te maken en te publiceren. De belangrijkste beperkingen van het gratis abonnement zijn beperkt gebruik, geen eigen domein en een Repaint-badge op de site. Betaalde abonnementen beginnen vanaf $20 per maand bij jaarlijkse facturering, of $25 per maand bij maandelijkse facturering. Dat omvat uitgebreid gebruik, ondersteuning voor een eigen domein en verwijdert de Repaint-badge.

Waarom niet gewoon GitHub Pages, Netlify of Vercel gebruiken?

Dat kan, vooral als je vertrouwd bent met het beheren van code. Die tools zijn goed in het online plaatsen van bestanden. Maar elke betekenisvolle wijziging stuurt je weer terug naar de code, wat betekent dat je vastzit in het kopiëren van bestanden tussen Claude, je editor en je hostingtool.

Repaint is anders omdat het een volledig websiteplatform is, niet alleen een plek om bestanden te serveren. Dat betekent dat je kunt blijven bewerken met AI, wijzigingen vanaf dezelfde plek kunt publiceren, pagina's kunt beheren, SEO-instellingen kunt bijwerken, afbeeldingen kunt optimaliseren, formulieren kunt koppelen en je eigen domein kunt gebruiken. Het is gebouwd voor langetermijn-websitebeheer, niet alleen de eerste deployment.

Moet ik kunnen programmeren om problemen op te lossen?

Nee. Repaint is gemaakt voor mensen die niet kunnen programmeren. Nadat je je code uit Claude hebt geïmporteerd, hoef je nooit meer code te beheren. Als er iets niet goed lijkt, kun je het oplossen door met AI te chatten. Code kennen kan helpen als je heel specifiek wilt zijn, maar het is niet vereist.

Ziet de site er precies hetzelfde uit als het Claude-artifact?

Als je Repaint vertelt het origineel te recreëren, zou het er bijna precies hetzelfde uit moeten zien. Soms gaan er details verloren omdat Repaint de code vertaalt naar zijn eigen websiteformaat. Vertaalproblemen komen vaker voor als het artifact HTML was. Als dat gebeurt, zou je alles binnen een paar prompts moeten kunnen herstellen.

Wat gebeurt er als de AI een fout maakt?

Terwijl je updates maakt, slaat Repaint elke versie van je site op. Je kunt Repaint vragen terug te gaan, en het keert dan terug naar een eerdere versie. Of als je naar een specifiek moment in de tijd wilt teruggaan, kun je handmatig elke eerdere versie herstellen. Zo kun je vrijuit wijzigingen aanbrengen zonder het risico je site te verpesten.

Werken formulieren en knoppen na het importeren?

Ja. Contactformulieren werkten waarschijnlijk niet in je originele Claude-artifact. Maar wanneer je de site naar Repaint verplaatst, kan het het formulier omzetten in een echt contactformulier dat e-mailmeldingen verzendt wanneer je inzendingen ontvangt. Knoppen zouden moeten werken als ze naar echte pagina's of secties linken. Als een knop nergens naartoe wijst, kun je Repaint vragen het te koppelen.

Kan Repaint omgaan met afbeeldingen, iconen en andere assets uit mijn Claude-artifact?

Claude-artifacts slaan meestal geen afbeeldingsbestanden in zichzelf op. Ze linken meestal naar afbeeldingen die ergens anders worden gehost. Wanneer je je code importeert, kan Repaint kopieën van die afbeeldingen ophalen en opslaan, zodat ze permanent beschikbaar blijven voor je nieuwe site. Repaint kan ook afbeeldingen genereren als je ze nog moet toevoegen.

Kan ik SEO-instellingen, analytics en metadata toevoegen?

Ja. Je kunt aangepaste code, analytics en metadata toevoegen door het simpelweg aan Repaint te vragen. Het kan technische SEO voor je instellen, en het kan scripts en embeds van andere platforms toevoegen. Om Google Analytics toe te voegen, deel je gewoon je GA-ID.

Vervangt Repaint hosting, of heb ik nog een aparte host nodig?

Repaint is een hostingplatform. Het draait je website. Je hebt geen apart hostingplatform nodig zoals GitHub Pages, Netlify, Vercel of een andere websitebouwer.