03-11-2023
Het eindresultaat
In een vorige blogpost ben ik begonnen met het maken van een volledig softwareproduct met de hulp van AI. Ik liet zien hoe je ideeën voor de naam van het product kunt brainstormen met AI, en hoe je een eerste aanzet voor de grafische vormgeving doet.
Het concept is eenvoudig: in de tool Decobrain kun je foto's van je interieur uploaden, en die laten visualiseren in een andere interieurstijl. Van de nieuwe foto's kun je een moodboard maken, en die downloaden naar je computer.
In dit tweede deel ga ik in op het verder daadwerkelijk maken van de landingspagina. Er moeten goede teksten worden geschreven, alle interieurstijlen moeten worden bedacht en de HTML code moet worden geschreven.
Voor het bepalen van de inhoud van de landingspagina gebruik ik ChatGPT. Daarbij maak ik gebruik van een prompt waarbij ik de AI een persona laat aannemen, om tot betere resultaten te komen. Ik leg kort uit wat voor tool ik aan het maken ben, en vraag de AI om technieken uit de marketing- en psychologie in te zetten om tot goede teksten te komen. Als laatste vraag ik om specifiek een titel en een paragraaf te schrijven.
Zoals je merkt maak ik een vrij specifieke en uitgebreide prompt. Dit helpt om tot betere resultaten te komen, volgens de best practices van OpenAI.
“Je bent een creatieve copywriter. Ik heb tekst nodig voor de landingspagina van mijn AI tool waarmee je foto's van je interieur kan uploaden en ze kan laten redesignen en zo een moodboard kan maken van je droominterieur. Gebruik beproefde technieken uit de marketing en psychologie om de beste teksten te schrijven die het ook nog eens goed doen voor SEO. Schrijf een titel voor de landingspagina en een paragraaf die de gebruiker moet verleiden te starten.”
De eerste suggestie is vaak niet het meest bruikbaar. Je hebt dan een startpunt waarop je feedback kunt geven. Door het ‘gesprek’ met ChatGPT aan te gaan kun je de tekst verfijnen. Als je vervolgens de juiste toon hebt gevonden kun je vervolgens vragen om meer pagina-elementen te bedenken en daar ook de bijbehorende teksten voor te schrijven.
Een andere vorm van content die ik nodig heb voor Decobrain zijn alle verschillende interieurstijlen. Het idee is dat je een foto van je woonkamer kan uploaden, en die dan kan visualiseren in een industriële stijl. Of een Scandinavisch design. Of een landelijke stijl. En ga zo maar door. Ik ken zelf echter geen tientallen interieurstijlen, en ook hier komt AI van pas.
Je kunt ChatGPT een reeks voor je laten afmaken. Dat zie je in het screenshot hieronder. Door dus zelf een aantal suggesties te geven stuur je de AI in “de juiste richting” en kun je daarna heel veel alternatieven laten maken.
Om uiteindelijk een foto via AI te laten generen heb ik een prompt nodig. Een voorbeeld van een prompt waarmee je een Scandinavische woonkamer kunt genereren is: “ interior design, scandinavian style, scandinavian design, white style, living room, modular furniture with cotton textiles, wooden floor, low ceiling, large steel windows viewing a city, carpet on the floor, minimalism, minimal, clean, tiny style, accent bright color, air, eclectic trends, gray, simple and functional”.
Nu heb ik voor Decobrain straks 10 verschillende ruimtes (keuken, woonkamer, badkamer etcetera) en 30 verschillende interieurstijlen. Er zijn dus zo’n 300 prompts nodig. Die kan ik net zo laten genereren als hoe ik de lijst met verschillende stijlen heb laten bedenken. Die kan ChatGPT zonder problemen genereren, door het voorbeeld te geven en de andere interieurstijlen te delen.
Standaard komt het antwoord als tekst. Alleen bij het maken van een webpagina is het handiger om de gegevens gestructureerd te hebben. Ik wil ze bijvoorbeeld in JSON-formaat, zodat ik ze later via programmeercode makkelijk kan inladen. Dat kan heel simpel, door een zeer minimaal voorbeeld te geven kan ChatGPT het gewenste formaat herkennen en het toepassen op de gegevens.
Nu hebben we een idee voor welke onderdelen op de landingspagina passen, en ChatGPT kan helpen met het formuleren van de teksten hiervoor. Dit kunnen we nu gaan omvormen naar een daadwerkelijke internetpagina.
Mijn aanpak voor het maken van (stukjes) voor een webpagina met ChatGPT is als volgt. Ik maak altijd gebruik van een CSS framework, zoals Tailwind CSS of Bootstrap. Dat zorgt ervoor dat de AI alleen maar HTML-code hoeft te schrijven. Het totale aantal regels code voor een vormgegeven webpagina is daarmee korter dan wanneer je niet zo’n framework zou gebruiken. Hoe minder de AI hoeft te schrijven, hoe sneller het werkt en hoe makkelijker je kan bijsturen.
Voor het Decobrain-concept laat ik niet de hele layout in één keer maken. Een landingspagina bestaat in feite uit een reeks rijen met een specifieke inhoud. Bovenaan heb je een menubalk met een logo en wat knoppen. Daaronder komt dan een rij met een grote titel, een introductie-paragraaf en daarnaast een foto. Daaronder kan dan weer een rij met voorbeeldfoto’s volgen.
Het fijnst werkt het om ChatGPT stukje voor stukje de code te laten schrijven. In de afbeelding hierboven zie je hoe de website in lagen is opgedeeld. Je komt hiermee dus in een iteratief proces waarmee samen met ChatGPT steeds een stukje uitbreiding van de pagina wordt geprogrammeerd, en je de tool ook gebruikt om te brainstormen over de teksten die je kunt gebruiken.
Ook hier gebruik ik weer een persona, en geef ik heel specifieke uitleg over hoe ik wil dat het menu eruit komt te zien en hoe het moet werken.
Het resultaat kopieer je steeds naar de webpagina om te kijken hoe het er echt uitziet. Vervolgens kun je ChatGPT uiteraard feedback geven, om bijvoorbeeld andere kleuren toe te passen of een andere uitlijning te proberen. Meestal geeft de eerste poging niet je eindresultaat maar kun je wel snel itereren.
Tot zover deze blogpost. In het volgende, en laatste deel, ga ik in op diverse manieren hoe je AI kunt inzetten bij het programmeren. Hoe je het kunt gebruiken om een externe dienst (om de afbeeldingen om te zetten) aan te roepen en hoe je een koppeling kunt maken met betalingsdienstverlener Stripe.
De belangrijkste punten die je kunt meenemen uit dit verhaal:
Ben jij zoekend wat A.I., zoals ChatGPT, betekent voor jouw organisatie? Met mijn workshops en presentaties maak ik AI makkelijk te begrijpen en te gebruiken.
Bekijk mijn aanbod
Ik ben Michel Brinkhuis. Al jaren hou ik me bezig met technologie, vooral met kunstmatige intelligentie, ofwel AI. Ik ben afgestudeerd op het opsporen van fraude met AI. Na ervaring op te hebben gedaan bij een groot softwarebedrijf, ben ik voor mezelf begonnen. Als ondernemer maak ik nu diensten waarbij AI een grote rol speelt. Met de kennis die ik zo opdoe, help ik daarnaast bedrijven om zelf AI te gaan gebruiken.
Ik geloof dat AI-tools zoals ChatGPT veel werk anders gaan maken. Misschien zie je dat nu nog niet, maar de mogelijkheden zijn groot. Wil je weten hoe AI jouw werk kan veranderen? Of hoe ChatGPT jou kan helpen? Ik laat het je graag zien. Met een workshop of presentatie help ik je op weg.
Stuur een bericht via mijn LinkedIn of vul het formulier onderaan de hoofdpagina in, en ik neem snel contact met je op.
