Hoe je een v0-website herbouwt met AI

Inleiding

v0 is een populair browsergebaseerd AI-codetool van het ontwikkelaarsplatform Vercel. Het kan in enkele minuten een eenvoudige website maken, maar het is niet primair ontworpen voor webdesign. Het is een volledig app-bouwplatform dat is gemaakt voor het ontwerpen van applicatie-UI's en productiecode-workflows. Voor mensen die niet kunnen programmeren, is het doorgaans overdreven en overweldigend.

In plaats van je website in v0 af te maken, kun je migreren naar een ander tool dat websitevriendelijker is. In deze handleiding laat ik je zien hoe je je website afmaakt in een AI-platform genaamd Repaint.

Waarom Repaint

Repaint is een AI-platform geoptimaliseerd voor het bouwen van websites. Het kernidee lijkt op dat van v0: je beschrijft wat je wil en de AI bouwt het. Maar Repaint is ontworpen om eenvoudiger te zijn en zich te richten op webdesign. Een paar manieren waarop het zich onderscheidt:

• Het is minder technisch. v0 praat regelmatig over codebestanden, git diffs, componenten, productie-deployments en repositories. Repaint communiceert in gewone taal, zodat je minder technisch jargon hoeft te leren.
• Het bouwt sites efficiënter. Repaint kan grotere sites bouwen met minder gebruik. Het gebruikt efficiënte parallelle processen en kiest automatisch goedkopere AI-modellen voor eenvoudige taken, omdat de meeste updates niet de dure AI-modellen nodig hebben die v0 gebruikt voor complexe app-bouw.
• Het is beter in het importeren van content. Repaint heeft speciale tools om content en stijlen uit bestaande websites te halen, zodat je een site kunt overnemen zonder alles handmatig over te zetten.

Hoe migreren weg van v0 werkt

Er zijn twee manieren om je site in Repaint te zetten: je code importeren, of je live URL delen. Je code exporteren uit v0 en uploaden naar Repaint komt het dichtst bij het origineel, omdat Repaint werkt vanuit de echte broncode. Maar als je je site toch opnieuw gaat ontwerpen, is het eenvoudiger om gewoon je live v0-URL te plakken.

Hoe dan ook, je eindigt met een volledige website die je kunt bewerken door met AI te chatten. Zodra je tevreden bent, kun je rechtstreeks vanuit Repaint publiceren en een eigen domein koppelen.

Stap 1: Importeer je content

Er zijn twee manieren om je content in Repaint te importeren:

1. Exporteer je code uit v0 en importeer die in Repaint
2. Deel de URL van de live website

Je code exporteren is gratis in v0, en het geeft Repaint de meest nauwkeurige kopie van het origineel. Als Repaint in plaats daarvan herbouwt vanaf een URL, kan het licht afwijken van het origineel. Maar als je toch van plan bent de site opnieuw te ontwerpen, is het exporteren van de code overdreven en is het eenvoudiger om gewoon je live URL te delen.

Importeren als code

Je code exporteren in v0 gaat snel als je weet waar je moet kijken:

1. Open je website in v0
2. Open het menu met het beletselteken (…) rechtsboven
3. Klik op Download Zip om je codebestanden te downloaden
4. Ga naar Repaint en maak je account aan
5. Upload de .zip en verstuur

Importeren vanaf een URL

Repaint kan elke openbaar toegankelijke website op internet opnieuw ontwerpen. Hiervoor moet je v0-site gepubliceerd zijn. v0 heeft een Publiceer-knop rechtsboven waarmee je site live gaat op een URL zoals https://custom-company-website-iybvfowln-repaint.vercel.app.

Publiceer eerst je site in v0. Vervolgens:

1. Bezoek je website en kopieer de gepubliceerde URL
2. Ga naar Repaint, plak de URL en verstuur
3. Maak je Repaint-account aan

Beide paden starten het websitebouwproces. Repaint scant je site, kopieert tekst en afbeeldingen en maakt screenshots van elke pagina om het ontwerp te begrijpen. Vanaf dat punt hoef je alleen maar met Repaint te praten om het proces af te ronden.

Stap 2: Plan je nieuwe website

Repaint kan het origineel kopiëren, het volledig opnieuw ontwerpen, of iets daartussenin. Voordat het je website begint te bouwen, stelt het je een paar vragen om te begrijpen wat je zoekt.

Omdat je toch al herbouwt, is het een goed moment om met de stijl te experimenteren om te zien of er nog iets anders is dat je wil proberen. Je kunt Repaint stijlvoorbeelden laten genereren waaruit je kunt kiezen, zodat je niet vastzit aan de eerste stijl die je krijgt.

Content importeren

Als je meer informatie hebt om toe te voegen, deel die dan nu. Repaint kan informatie gebruiken van andere websites, Google-bedrijven, PDF's of andere bestanden, en afbeeldingen. Hoe meer het leert voordat het de site bouwt, hoe minder je later hoeft bij te schaven.

Als je meerdere bronsites hebt, zoals een oudere website naast de v0-site, geef Repaint dan beide. Het kan de oude website gebruiken voor informatie om over te zetten, en de nieuwe als stijlgids. Bij twijfel kun je beter veel informatie delen en Repaint laten uitzoeken hoe het die gebruikt.

Zodra jij en Repaint het eens zijn over het plan, bouwt het je nieuwe website!

Stap 3: Genereer je website

Repaint doet er doorgaans een paar minuten over om de eerste versie van je website te bouwen. De exacte duur varieert, afhankelijk van hoeveel content het moet migreren en hoe groot de nieuwe website is. Een grote site met tientallen pagina's kan langer dan tien minuten duren.

Als het klaar is, opent Repaint automatisch een voorbeeld van je nieuwe website. De eerste versie heeft meestal wat ruwe plekken: tekst die is afgesneden, afbeeldingen op de verkeerde plek of spatiëring die niet helemaal klopt. Dat is normaal. Je kunt alles wat niet op zijn plaats staat oplossen door met de AI te chatten.

Als je v0-project is verbonden met een database zoals Supabase of Upstash, wordt dat niet automatisch overgezet. Repaint bouwt alleen het visuele deel van de website dat mensen zien, niet complexe backend-functionaliteit. Dat is geen probleem voor de meeste marketingwebsites, want die gebruiken geen database. Maar als je een complexe app hebt gebouwd in v0, zou migreren waarschijnlijk de onderliggende logica verbreken.

Stap 4: Aanpassingen maken

Na het genereren van je site kunnen er een paar eigenaardigheden zijn om op te lossen. Repaint vertaalt je website naar zijn eigen formaat, dus het is mogelijk dat sommige details verloren gaan in de vertaling. Of als Repaint je v0-site opnieuw heeft ontworpen, is er gewoon veel nieuwe content om te beoordelen.

De bewerkingsworkflow is dezelfde als bij v0. Je kunt alles op je website wijzigen door met AI te chatten. "Voeg meer kleur toe aan het ontwerp." "Vervang de hero-afbeelding door een moderne wolkenkrabber." "Verklein het lettertype van de koppen." Als je nieuwe afbeeldingen nodig hebt, kan Repaint die direct voor je genereren.

Begin met het beoordelen van de visuele stijl. Zorg ervoor dat de kleuren, lettertypen en lay-outs er allemaal goed uitzien. Je visuele stijl legt patronen vast die de AI van nature zal gebruiken voor alle nieuwe content die het maakt, dus het vroeg bijschaven is sneller dan het bijschaven nadat je tientallen pagina's hebt uitgebouwd.

Zodra je tevreden bent met de stijl, kun je de content doorwerken en controleren of de tekst klopt, afbeeldingen op de juiste plek staan, links werken en alles er goed uitziet op mobiel.

SEO-content controleren

Als je v0-site zoekverkeer ontving, is het de moeite waard om tijdens je migratie aandacht aan SEO te besteden. We hebben een complete handleiding voor SEO bij websiteherontwerp als je er meer over wil weten. Op hoofdlijnen wil je gewoon zorgen dat de nieuwe website dezelfde pagina-URL's heeft, en dezelfde content daarop.

Google bouwt rankings op voor individuele pagina's op je website, gekoppeld aan hun URL's. Als je naar een nieuw platform verhuist en die URL's veranderen of verdwijnen, behandelt Google ze als nieuwe pagina's zonder geschiedenis, en verlies je het verkeer dat ze genereerden. En als je de content verandert, kan Google besluiten dat de nieuwe versies niet langer relevant zijn voor zoekopdrachten en stoppen met ze te ranken.

Je kunt Repaint vragen om de URL's op je nieuwe site te vergelijken met die op de oude om te zien of er verschillen zijn. Als je de code rechtstreeks hebt geïmporteerd, is er waarschijnlijk niets veranderd. Maar als er iets is gewijzigd of ontbreekt, kan Repaint helpen het op te lossen zolang je het vraagt.

Als je site er goed uitziet en de content klopt, ben je klaar om te publiceren.

Stap 5: Je website publiceren

Als je klaar bent om je nieuwe website te publiceren, open je je Repaint-project en klik je rechtsboven op Publiceren. Je site gaat live op een Repaint-URL die je met iedereen kunt delen. Die ziet er vergelijkbaar uit als je v0-URL, zo: https://careful-tiger-5jd92kjd.sites.repaint.com

Op dit punt heb je twee live websites: één op Repaint en één op v0. Als je een eigen domein hebt, wijst dat nog steeds naar je v0-site, dus voor je bezoekers is er nog niets veranderd. Als je klaar bent voor de overstap, kun je je domein overdragen.

Stap 6: Domein overdragen

Als je klaar bent om officieel over te stappen, hoef je alleen je domein naar de nieuwe Repaint-website te laten wijzen. Om dit in Repaint te doen, vertel je de AI eenvoudigweg om je domein te koppelen. Het geeft je DNS-records om toe te voegen. Dit vereist een betaald abonnement; je kunt de prijsdetails hier bekijken.

Je domein is mogelijk geregistreerd bij Vercel, of bij een andere DNS-dienst zoals GoDaddy, Namecheap of Cloudflare. Hoe dan ook, je domein moet op dat platform blijven. Het staat los van je website en je hoeft het niet te verplaatsen om het te koppelen aan je nieuwe website. Je hoeft alleen de instellingen bij te werken zodat je domein naar je nieuwe Repaint-site wijst in plaats van naar de v0-site.

Geen zorgen als je nog nooit DNS-instellingen hebt beheerd. Repaint kan je er stap voor stap doorheen leiden. Het kan je aangepaste instructies geven op basis van je provider. DNS-wijzigingen kunnen 20 minuten of langer duren voordat ze van kracht worden. Zodra je de DNS-records hebt ingesteld, kun je Repaint je live records laten controleren om te zien of het succesvol is doorgevoerd. Zodra het bevestigt dat alles correct is ingesteld, ben je klaar.

Nadat je je domein hebt overgedragen, heb je geen betaald v0-abonnement meer nodig voor hosting. Je kunt je v0-abonnement op elk moment opzeggen.

Conclusie

v0 is een geweldige manier om applicatie-UI's te prototypen voor geavanceerde software, maar het is overdreven voor het bouwen van een website. Repaint biedt je een websitevriendelijkere plek om het naartoe te brengen, de pagina's bij te schaven, de tekst en visuals te verbeteren en te publiceren wanneer je er klaar voor bent. Je kunt migreren door je v0-code te exporteren of je live URL te delen, en daarna blijven bewerken door met AI te chatten in plaats van de onderliggende code te beheren. En omdat je v0-site de hele tijd live blijft, is er weinig risico aan het uitproberen van Repaint voordat je overstapt.

Veelgestelde Vragen

Waarom overstappen van v0 als Repaint ook een AI-bouwer is?

Ze lijken op elkaar, en beide laten je beschrijven wat je wil en dat bouwen. Het verschil zit in de focus. v0 is meer code-georiënteerd en gebouwd voor complexe apps, terwijl Repaint meer website-georiënteerd is: eenvoudigere taal, efficiënter bouwen van meerdere pagina's en betere tools voor het importeren van content uit bestaande sites.

Is v0 te technisch voor het bouwen van een website?

Het is geen harde barrière; je hoeft niet te kunnen programmeren om v0 te gebruiken. Het houdt de code en database verborgen, zodat ze makkelijk te negeren zijn. De interface is op zich niet ontzettend overweldigend. De echte uitdaging is dat de taal in de AI-chat en de UI-knoppen erg technisch is. De AI praat over codebestanden, git diffs, componenten, productie-deployments en repositories. Als je gewoon een eenvoudige website maakt, kan dat overweldigend zijn. Repaint houdt het gesprek eenvoudig en gericht op de website zelf.

Loop ik in Repaint niet gewoon tegen dezelfde gebruikslimieten aan als in v0?

Repaint heeft ook gebruikslimieten, maar je komt verder op zowel het gratis abonnement als betaalde abonnementen. Repaint's AI-agent is over het algemeen efficiënter voor het bewerken van websites, en het gebruikt goedkopere AI-modellen voor eenvoudigere taken. Je kunt meer doen voor minder. Het werkt ook op een wekelijks tegoed in plaats van een maandelijks creditlimiet, wat royaler is binnen een maand.

Verbruikt migreren mijn v0-tokens?

Nee. Importeren vanaf je live URL bezoekt gewoon je gepubliceerde site zoals elke bezoeker dat zou doen, waardoor het nooit je v0-account raakt. Je code exporteren is ook gratis, want je downloadt alleen bestanden die je al hebt. De migratie draait op het gebruikstegoed van Repaint, niet dat van v0.

Wat gebeurt er met mijn v0-site tijdens de migratie? Kan ik beide houden?

Er gebeurt niets met je v0-site. De twee staan volledig los van elkaar, dus je v0-project blijft live en onaangeroerd terwijl je de nieuwe bouwt. Zodra je tevreden bent met de Repaint-versie, kun je je domein daarnaar laten wijzen. Als je liever bij v0 blijft, hoef je niets te doen.

Wat als mijn v0-project een volledige app is met een database?

Dan is Repaint waarschijnlijk niet de juiste keuze. Het bouwt de visuele site die mensen zien, niet de infrastructuur erachter, zoals de databaseverbinding. Als je project een echte app is met die functionaliteit, zou migreren betekenen dat je die onderdelen achterlaat.

Kan Repaint mijn v0-ontwerp exact evenaren?

Dat hangt af van hoe je importeert. Als je je code exporteert, werkt Repaint vanuit het origineel en kan het er heel dichtbij komen. Als je importeert vanaf je live URL, herbouwt het het ontwerp op basis van wat het kan zien. Het lijkt duidelijk op je site, maar het is meer kans dat het op een paar plaatsen afwijkt. Hoe dan ook, je kunt alles fijn afstellen door met de AI te chatten.

Hoe lang duurt de migratie?

De eerste build duurt meestal een paar minuten, hoewel grotere sites met veel pagina's tien minuten of langer kunnen duren. Daarna hangt de tijd tot publicatie af van hoeveel aanpassingen je wil maken. De meeste sites kunnen binnen een paar uur worden gemigreerd en bijgeschaafd.

Hoeveel kost het om van v0 naar Repaint te migreren?

Het importeren van je site, het bewerken ervan en publiceren naar een sites.repaint.com-adres is gratis. Het gratis abonnement dekt het bouwen en lanceren van een eenvoudige site, met een wekelijks bewerkingstegoed en een Repaint-badge. Betaalde abonnementen beginnen vanaf $20/maand bij jaarlijkse facturering, of $25/maand bij maandelijkse facturering, wat je een groter gebruikslimiet geeft, de badge verwijdert en je een eigen domein laat koppelen. Je kunt het volledige overzicht zien op de prijspagina.

Kan ik eerst één pagina migreren om het uit te proberen?

Ja. Je kunt één pagina importeren om te zien hoe die eruitkomt voordat je je aan de hele site verbindt. Zodra je tevreden bent met wat je ziet, kun je Repaint vragen de rest uit te bouwen.

Verlies ik mijn zoekrankings wanneer ik migreer?

Niet als je je URL's en content consistent houdt. Google koppelt rankings aan individuele pagina-URL's, dus het doel is dat je nieuwe site dezelfde URL's en grotendeels dezelfde content gebruikt. Je kunt Repaint vragen je nieuwe URL's te vergelijken met het origineel en eventuele gaten op te lossen. Er is meer te vinden in onze handleiding over het behouden van SEO wanneer je een site importeert.

Wat gebeurt er als de AI een fout maakt? Kan ik wijzigingen ongedaan maken?

Ja. Repaint slaat elke keer dat je een wijziging maakt een versie van je site op. Als er iets verkeerd uitkomt, kun je het vragen terug te gaan, of de versiegeschiedenis openen en zelf een eerdere versie herstellen. Niets is permanent, dus het is veilig om te experimenteren.