Lliben Logo Lliben

Let op: AI‑tools veranderen extreem snel. Deze gids beschrijft wat voor mij werkte toen ik dit schreef; delen kunnen over een paar maanden verouderd zijn. Ik update wanneer de workflow echt verandert.

In het kort

  • Ik ben data-analist zonder dev-achtergrond en bouwde een Chrome screenshot-extensie + website met AI.
  • Ik gebruikte vooral Gemini voor implementatie en ChatGPT voor “second opinion” debugging en vertalingen.
  • Grootste les: architectuur + opruim‑milestones zijn belangrijker dan gigantische prompts.

Data-analist, geen dev-achtergrond — gebouwd met AI

Ik ben data-analist en begrijp niets van code. Ik kan radius en font-size in CSS aanpassen, een sluitend aanhalingsteken in HTML toevoegen… en dat is het. Ik weet niet wat JavaScript is of waarom het werkt.

Voor echte developers klinkt dit proces misschien triviaal. Voor mij, zonder software‑ervaring, was het interessant om terug te kijken. Het duurde bijna een jaar.

Alles in de extensie, de website en wat je hieronder leest is door AI ontwikkeld of gereviewd. Je vindt waarschijnlijk nog fouten, maar zonder AI waren het er veel meer geweest.

Waar gaat het over?

Ik bouwde een Chrome screenshot extensie. Het ondersteunt: zichtbaar deel, hele pagina (lange screenshot), geselecteerd gebied en element picker, met padding en timer. Er is een editor (Lliben Capture) waar je kunt croppen, annoteren en exporteren (Kopiëren, PDF, PNG, JPG) of printen.

Vier onderdelen:

  1. Popup
  2. Instellingen
  3. Weergave/editor (Lliben Capture — opent na het vastleggen)
  4. Website

Screenshots uit het project:

Lliben popup met capture-modi en quick actions

Lliben instellingen met capture/export configuratie

Lliben Capture editor met annotatie- en exporttools

Techstack

  1. Google AI Studio
  2. ChatGPT
  3. Visual Studio Code
  4. GitHub (website edits via GitHub)
  5. Cloudflare Workers & Pages (deploy + build)
  6. Resend (contact/terugkoppeling)
  7. Apple Email (domein + opslag, maar Apple ecosysteem)
  8. Stripe (betalingen)

E‑mail en betalingen waren niet noodzakelijk, maar ik wilde een complete “bedrijfstructuur”.

Hoe het begon

Ik begon vroeg in het jaar. Ik startte minstens 200 keer opnieuw (geen grap) en gaf op. Niet bekend zijn met dev‑tools speelde enorm mee. Ik moest zelfs googlen hoe je het thema en font-size in VS Code verandert.

In juni/juli begon ik opnieuw. Ik had een basis en hoefde niet meer te vechten met tools en builds.

Gemini

Ongeveer 90% schreef ik met Gemini en 10% met ChatGPT. De website‑code en features zijn vooral Gemini, vertalingen deed ik met ChatGPT.

Gemini werkt heel goed, maar het is bijna onmogelijk om het te laten stoppen met code schrijven. Zelfs als ik “we brainstormen, geen code changes” zeg, doet het toch. Dat was mijn grootste frustratie.

ChatGPT

Als ik vastliep met Gemini, gebruikte ik ChatGPT om oorzaken te verkennen en oplossingen te brainstormen. Soms vroeg ik om een review of rewrite met dezelfde variabelen, en testte ik meerdere versies.

Het grootste zwakke punt van ChatGPT dat ik zag, is SVG. Het komt niet in de buurt van Gemini voor correcte SVG‑icons.

Claude

Ik heb Claude niet genoeg kunnen testen. Het produceerde vaak te veel code en maakte dingen complexer dan nodig. Soms ga ik terug als niets anders werkt, maar vaak eindig ik met meer problemen.

Wat voor mij belangrijk was

  1. Grote context/tokens zijn minder belangrijk dan je denkt: beter één feature per keer.
  2. Architectuur is het belangrijkst: als je die niet begrijpt, blijven bugs terugkomen.
  3. Schrijf minstens één taal zelf: AI schrijft vaak te “marketing”.
  4. Begin met maximaal 2 talen: meer talen = tragere iteraties.
  5. Gebruik meerdere modellen.
  6. Ruim code vaak op: na milestones, verwijder dead code en lege files.
  7. Definieer use cases en gedrag: ik verplaatste het samenvoegen naar de weergave/editor en het werd veel sneller.
  8. Gebruik bestaande libraries: voor PDF/A4 gebruikte ik jsPDF.

Nog één ding

Veel AI‑coding tools zijn uiteindelijk VS Code met een andere skin. Waarom niet direct VS Code gebruiken en lock‑in vermijden?

Wat ik nog niet getest heb

Ik heb betalingen in productie nog niet echt getest. Stripe werkt in sandbox, maar het voelt raar om vrienden/familie om donaties te vragen.

Als je developer bent

Als je ervaren bent, hoor ik graag terugkoppeling over de extensie, functies of het design. Dit is mijn eerste complete project live.

Extensie: Chrome Web Store – Lliben

Website: https://lliben.com/

Tot slot

De afstand tussen idee en implementatie is klein geworden.

Als data-analist is het bizar hoe snel AI in coding vooruitgaat.

Aan de ene kant kan iedereen met een idee iets bouwen. Aan de andere kant: wat gebeurt er met ervaren developers?

Ik weet niet of dat goed of slecht is.

Zonder AI had ik het nooit aangedurfd.

Dus… mag ik mezelf developer noemen?