Lliben Logo Lliben

Hinweis: AI-Tools entwickeln sich extrem schnell. Dieser Guide beschreibt, was für mich zu dem Zeitpunkt funktioniert hat – und kann in ein paar Monaten teilweise veraltet sein. Ich update ihn, wenn sich der Workflow spürbar verändert.

TL;DR

  • Ich bin Data Analyst ohne Dev-Background und habe eine komplette Chrome Screenshot Extension + Website mit AI gebaut.
  • Ich habe hauptsächlich Gemini fürs Implementieren genutzt und ChatGPT für Second-Opinion Debugging und Übersetzungen.
  • Die größte Lektion: Architektur + Cleanup Milestones sind wichtiger als riesige Prompts.

Data Analyst, kein Dev-Background — ich habe mit AI eine komplette Chrome Extension gebaut (Erfahrungen)

Ich bin Data Analyst von Beruf und verstehe nichts von Coding. Ich kann in CSS den Radius oder die Font-Size ändern, in HTML ein fehlendes Anführungszeichen ergänzen – und das war’s. Ich habe keine Ahnung, was JavaScript eigentlich ist oder warum es so funktioniert, wie es funktioniert.

Für echte Software-Entwickler klingt der Prozess vermutlich banal. Für mich – als jemand ohne Dev-Erfahrung – ist es trotzdem interessant, zurückzuschauen. Es hat fast ein Jahr gedauert.

Alles in der Extension, der Website und auch das, was du hier liest, wurde von AI entwickelt oder zumindest von AI reviewed. Du findest wahrscheinlich trotzdem Grammatikfehler – aber ohne AI wären es deutlich mehr gewesen.

Worum geht es hier?

Ich habe eine komplette Chrome Screenshot Extension gebaut. Sie unterstützt Visible-Part Capture, Full-Page Capture, Selected-Area Capture und Element-Picker Capture – mit Padding und Delay. Dazu gibt es eine Editor-Seite (Lliben Capture), in der du zuschneiden, annotieren und exportieren kannst (Copy, PDF, PNG, JPG) oder direkt drucken.

Sie hat vier Hauptkomponenten:

  1. Popup
  2. Settings
  3. Viewer/Editor Seite (Lliben Capture — öffnet sich nach dem Screenshot)
  4. Website

Hier sind ein paar Screenshots aus dem Projekt:

Lliben Popup mit Capture-Modi und Quick Actions

Lliben Einstellungen mit Capture- und Export-Konfiguration

Lliben Capture Editor mit Annotation- und Export-Tools

Tech Stack

  1. Google AI Studio
  2. ChatGPT
  3. Visual Studio Code
  4. GitHub (Website-Edits laufen über GitHub)
  5. Cloudflare Workers & Pages (GitHub-Edits werden deployed und final kompiliert)
  6. Resend (Kontakt- und Feedback-Formulare)
  7. Apple Email (günstiger Storage + Custom Domain – aber du brauchst das Apple-Ökosystem)
  8. Stripe (Payment)

E-Mail und Payments waren dafür nicht unbedingt nötig. Ich hätte auch Gmail oder Outlook nutzen können. Aber ich wollte eine „richtige“ Struktur – so, wie ein Unternehmen es hätte: alles an einem Platz, inklusive Monetarisierung.

Ich glaube nicht, dass mich das über Nacht finanziell unabhängig macht. Aber ich will es so weit bringen, bis ich es selbst anschaue und ehrlich sagen kann: „Jetzt ist es perfekt.“

Wie es angefangen hat

Ich habe früh im Jahr angefangen. Ich habe es mindestens 200-mal (leider kein Witz) von Null versucht und aufgegeben. Rückblickend war es ein riesiger Faktor, dass ich die Tools nicht kannte. Ich erinnere mich noch daran, wie ich googeln musste, wie man in VS Code Theme und Font-Size ändert.

Irgendwann im Juni/Juli habe ich neu gestartet – aber diesmal hatte ich die Basis und musste nicht mehr über Tools, Ordnerstruktur oder Builds nachdenken.

Gemini

Ungefähr 90% habe ich mit Gemini gebaut und 10% mit ChatGPT. Der Website-Code und die Features sind komplett von Gemini – Übersetzungen habe ich dann mit ChatGPT gemacht.

Gemini funktioniert extrem gut, aber es ist fast unmöglich, es vom Coden abzuhalten. Selbst wenn ich „wir brainstormen, bitte keine Code-Änderung“ schreibe, macht es es trotzdem. Ich habe viele Varianten probiert und Regeln in Instructions gepackt, aber es passiert trotzdem. Das war mein größter Frustpunkt mit Gemini.

ChatGPT

Wenn ich mit Gemini nicht weiterkam, bin ich zu ChatGPT gewechselt, um Ursachen zu brainstormen. Die Empfehlungen waren oft richtig gut. Wenn nichts geholfen hat, habe ich Feature-Code reinkopiert und um Review oder Rewrite gebeten (mit gleichen Variablennamen), dann mehrere Versionen getestet.

Manchmal habe ich ChatGPT-Code wieder zurück zu Gemini genommen und gefragt, welche Strategie dahinter steckt und ob es besser ist. Manchmal hing ich wochenlang an einem Problem – aber am Ende konnte ich jeden Bug so lösen.

Der größte Flaw, den ich bei ChatGPT gesehen habe, ist SVG. Es funktioniert einfach nicht gut und kommt nicht mal ansatzweise an Gemini ran, wenn es um korrekte SVG Icons geht.

Claude

Ich bin nicht wirklich zu einem Level gekommen, wo ich es intensiv testen konnte. Bei den Versuchen hat es zu viel Code produziert und alles unnötig kompliziert gemacht. Ich gehe ab und zu zurück, wenn nichts anderes funktioniert – aber oft komme ich mit einem Problem rein und gehe mit 100 neuen wieder raus.

Was für mich wichtig war

  1. Context Awareness / riesige Token Limits sind weniger wichtig als man denkt: Der Context ist das Maximum an Text (Tokens), das das Modell gleichzeitig handhaben kann (Input + Kontext + Output). 90% des Codes kam von Gemini 2.5 Pro mit über 1 Mio Tokens Context. Für dieses Projekt hat das gereicht. Für mich war es viel besser, eine kleine Feature-Iteration nach der anderen zu machen statt 2–3 Features parallel.
  2. Core Architektur ist das Wichtigste: Wenn du die Architektur nicht grob verstehst, wirst du manche Bugs nie stabil fixen. Und selbst wenn du sie fixst, wirst du sie später wieder sehen – schon nach einer kleinen Änderung.
  3. Mindestens eine Sprache selbst schreiben: Für Extension und Website habe ich alles in einer Sprache selbst geschrieben und erst danach übersetzen lassen. AI schreibt für mich oft wie „American Marketing“: zu viel, zu lang.
  4. Maximal 2 Sprachen am Anfang: Wenn du Code änderst, werden diese Dateien oft mit geändert. Je mehr Sprachen, desto langsamer und aufwändiger werden Updates. Später ist es aber kaum zu vermeiden.
  5. Mehrere Modelle nutzen.
  6. Code immer wieder reviewen und aufräumen: Nach Milestones: Comments raus, Dead Code löschen, leere Files entfernen.
  7. Use Cases abfragen und Verhalten definieren: Das hilft dir, Logikprobleme zu finden. Ich hatte lange Probleme, Full-Page Capture schnell zu halten. Ich habe gemerkt, dass während des Captures gestitcht wurde. Ich habe das Stitching in die Viewer/Editor Seite verschoben – danach war es viel schneller.
  8. Public Libraries nutzen, wenn es Sinn macht: Für PDF-Export/Print im A4-Format habe ich jsPDF genutzt. Das hat super funktioniert und Zeit gespart.

Ein letzter Punkt

Viele AI-Plattformen wie Cursor oder Antigravity (oder wie sie alle heißen) sind am Ende Visual Studio Code mit einem anderen Skin. Warum also nicht direkt VS Code nutzen und Lock-in vermeiden?

Was ich noch nicht getestet habe

Das Einzige, was ich noch nicht „richtig“ getestet habe, ist, ob Payments wirklich live funktionieren. Stripe läuft im Sandbox-Setup gut. Aber es fühlt sich billig an, Freunde/Familie um Spenden zu bitten.

Wenn du Developer bist

Wenn du ein erfahrener Developer bist: Ich freue mich über Feedback zur Extension, zu Features oder auch zum Website-Design. Das ist mein erstes Projekt, das ich live gebracht habe. Egal wie kritisch – ich bin dankbar für Feedback.

Extension: Chrome Web Store – Lliben

Website: https://lliben.com/

Abschließende Gedanken

Der Abstand zwischen Idee und Umsetzung ist unglaublich klein geworden.

Als Data Analyst ist es verrückt zu sehen, wie schnell AI im Coding vorankommt – wie weit es schon ist und wie weit es noch gehen wird.

Einerseits kann jeder mit einer Idee tatsächlich etwas bauen. Andererseits: Was passiert mit erfahrenen Developern, deren „Bread and butter“ das Schreiben von Code ist?

Ich weiß nicht, ob das gut oder schlecht ist.

Ohne AI hätte ich mich nie getraut, diese Idee überhaupt anzufassen.

Also… kann ich mich jetzt „Software Developer“ nennen?