Google AI Studio

Geef dezelfde briefing aan Google AI Studio, Lovable en Bolt. Google's output ziet er verzorgd uit. De andere twee zien er gebouwd uit. Dat komt omdat Google's modellen meer designpatronen hebben opgeslagen.

Daardoor werkt het goed voor alles waarbij uitstraling telt. portfolio's, productpagina's, presentaties voor klanten, evenementensites.

Er is wel een verschil. Lovable geeft je binnen seconden een URL. Google AI Studio geeft je een map met bestanden die je zelf ergens moet neerzetten. Deze cursus behandelt allebei: bouwen én deployen.

Maak dit

Open Google AI Studio. Beschrijf een landingspagina die je echt zou gebruiken. Vergelijk de visuele kwaliteit met wat je uit andere tools haalt. Het verschil zie je meteen.

Beschrijf je pagina met visuele richting. Niet alleen wat er moet staan, maar ook hoe het eruit moet zien. "Donkere achtergrond, strakke sans-serif typografie, oranje accenten, veel witruimte, een fullwidth hero section." Google AI Studio genereert de code. Download de bestanden. Je ziet: een index.html-bestand (de structuur en inhoud van de pagina), een style.css-bestand (hoe het eruitziet), en misschien een script.js-bestand (interacties). Je hoeft de code zelf niet te begrijpen. Wat je moet weten, is wat de bestanden doen. Zoals je weet dat een presentatie dia's en notities heeft, zonder dat je snapt hoe het PowerPoint-formaat werkt. Open het HTML-bestand in een browser. Je pagina staat er gewoon. Mooi. Werkend. Op jouw computer.

Maak dit

Bouw een landingspagina voor iets echts. Je freelancewerk, een zijproject, een evenement. Beschrijf de inhoud én de visuele stijl. Download het resultaat. Open het in je browser.

Optie 1. Netlify Drop. Het simpelst. Ga naar app.netlify.com/drop. Sleep je map op de pagina. Je site staat live met een URL binnen 30 seconden. Gratis.

Optie 2. GitHub Pages. Maak een GitHub-account aan. Upload je bestanden. Zet Pages aan in de instellingen. Gratis, en je krijgt er versiegeschiedenis bij.

Optie 3. Vercel. Serieuzer, en de moeite waard. Koppel aan GitHub. Vercel deployt automatisch zodra je bestanden bijwerkt. De gratis laag is ruim voldoende voor de meeste projecten. Als je later met Assisted Coding aan de slag gaat, werk je al in de juiste omgeving.

Begin met Netlify Drop. Het kost 30 seconden. Ga naar Vercel zodra je automatisch deployen of een eigen domein wilt.

Maak dit

Neem de pagina van les 2. Open app.netlify.com/drop. Sleep je map naar het venster. Je pagina staat online. Deel de URL. Dat was het.

Grote aanpassingen doe je in Google AI Studio. pas de prompt aan en genereer opnieuw. Dat is sneller dan handmatig sleutelen als de structuur moet veranderen. Kleine aanpassingen doe je rechtstreeks in het HTML-bestand. Open het in een teksteditor, gebruik Ctrl+F (Cmd+F op Mac) om de juiste tekst te vinden en pas hem aan. Opslaan, opnieuw uploaden naar Netlify, klaar. Een koptekst aanpassen. zoek hem op in de HTML en verander de tekst tussen de tags. Een kleur aanpassen: zoek de hexcode en vervang hem door een andere. Een afbeelding aanpassen: vervang het bestand of verander de URL. Dit soort aanpassingen kost je hooguit dertig seconden. Je hoeft niet te kunnen programmeren. Zoeken, vervangen, opslaan.

Maak dit

Open het HTML-bestand van je pagina, zoek een koptekst en verander de tekst. Sla op, upload opnieuw en zie je aanpassing live verschijnen. Dat is code bewerken.

Gebruik Google AI Studio voor single-page sites, portfolio's, eventpagina's, productpagina's en presentatiesites. Kortom: alles waarbij het ontwerp het werk doet en je weinig interactie nodig hebt.

Schakel over naar Lovable als je meerdere pagina's hebt, formulieren met logica wilt bouwen, of de interface moet reageren op wat gebruikers doen.

Ga naar Base44 zodra je data wilt opslaan, gebruikers wilt beheren of informatie over tijd wilt bijhouden.

De brug naar VS Code. Google AI Studio levert schone HTML/CSS. Die code open je in VS Code en bouw je verder uit met Claude Code. Zo wordt je afgewerkte pagina het startpunt van een groter project.

Maak dit

Kijk naar wat je als volgende moet bouwen. Past het precies in wat Google AI Studio goed doet? Dan bouw je het hier. Zo niet, dan weet je welke tool je wél moet hebben.

Pagina 1. je persoonlijke pagina. Wie je bent, wat je doet, hoe je te bereiken bent. Strak, zelfverzekerd, professioneel. Pagina 2. een projectpagina. Eén stuk werk waar je trots op bent. Visueel, beschrijvend, met een heldere verhaallijn. Pagina 3. iets creatiefs. Een eventpagina, een concept, een portfoliostuk. Toon wat je kan. Deploy alle drie naar Netlify. Je hebt nu drie live URL's om te delen. Het zit in de briefing: hoe je een designrichting omschrijft, referenties aanreikt, typografie en kleur specificeert. Die pagina's laten twee dingen zien. je smaak én je vermogen om AI te sturen. Dat telt.

Maak dit

Bouw er gewoon drie. Vandaag. Elk een halfuur. Zet ze live. Link ernaar vanuit je LinkedIn. Je hebt een portfolio zonder designer of developer neergezet.