Über WebDev Tools

Ja, ich weiß. Die zehntausendste Toolsammlung im Internet. Wer braucht die schon? Aber ich kann euch beruhigen: Dieses Projekt war nie geplant. Es ist ein Unfall, ein Produkt purer Prokrastination, aber auch eine Lektion im Umgang mit künstlicher Intelligenz.

Alles begann ganz harmlos auf meinem Desktop.

Am Anfang war das Skript.

Wie viele Entwickler hatte auch ich diverse Eigenbau-Tools auf meinem Localhost gebunkert. Kleine Skripte für alltägliche Ärgernisse: eine Em/Px-Umrechnung hier, ein kleiner Helfer dort. Dinge, für die ich zu faul war, um jedes Mal die gleichen Websites zu suchen. Mit Lesezeichen stehe ich nämlich auf absolutem Kriegsfuß.

Diese Helferlein taten brav ihren Dienst. Doch dann fügte ich zwei weitere hinzu und mein Webentwickler-Instinkt schlug gnadenlos zu: Ich begann, die Dinger zu verknüpfen. Ein Menü musste her. Ein bisschen Styling. Und plötzlich war ich mittendrin in allem, was einem so einfällt, wenn man sich erfolgreich von der eigentlichen Arbeit ablenken möchte. Aus der simplen Sammlung wurde ein ausgewachsenes Projekt. Ich musste es einfach "pimpen", bis eine richtige kleine Website mit allem Drum und Dran vor mir stand.

„KI, übernimm mal!“ – war das eine Schnapsidee?

Irgendwann kam mir der Gedanke: Es sind ja nur einfache Skripte. Lass das doch mal die KI erledigen! Als treuer Nutzer von VS Code habe ich das Projekt direkt mit Claude Code (Sonnet) aufgesetzt.

Doch bevor die KI freie Hand bekam, mussten klare Leitplanken her. Ich definierte also zuallererst einen festen Techstack. Aus diesem leitete ich eine CLAUDE.md (strikt limitiert auf maximal 60 Zeilen – kurze Befehlswege sind bei KIs das A und O) sowie eine .claude/comments/review.md ab. Genauso überlebenswichtig für den eigenen Geldbeutel sind eine konsequente .claudeignore und eine gezielt angepasste .claude/settings.local.json, um beim Coden massiv Tokens zu sparen.

Das Ergebnis war überraschend: eine erstaunlich gute, modular erweiterbare Webanwendung. Aber natürlich lief nicht alles reibungslos. Man muss eine KI permanent davon abhalten, zu übertreiben. Mein wichtigstes Kommando wurde schnell: „Nein, wir brauchen keinen Paketmanager! Und jetzt hör auf, mir schon wieder ein Framework vorschlagen zu wollen!” Am Ende kam aber tatsächlich ein brauchbares Grundgerüst heraus.

Die Tücken des „Vibe Coding“

Das Projekt nahm Fahrt auf und ich lernte schnell einige harte Lektionen über die Zusammenarbeit mit meinen digitalen Kollegen.

• Die Framework-Frage: KIs lieben Tailwind. Nach einigen manuellen Anpassungen, bei denen mein Geduldsfaden gefährlich dünn wurde, riss er schließlich. Ich bin daraufhin auf Bootstrap umgestiegen, um die Sache pragmatisch zu Ende zu bringen. Manchmal ist „fertig“ einfach besser als „perfekt“ (oder Tailwind).


• Ohne Git? Ohne mich! Aus Gewohnheit habe ich direkt ein Repo angelegt. Zum Glück! Ich merkte schnell, dass dieses planlose „Vibe Coding“ ohne Versionskontrolle in einer massiven Zeitverschwendung endet.


• KI-Logik vs. Realität: KIs machen sich das Leben manchmal zu leicht – oder zu kompliziert. Zwar hat sich Claude hier massiv verbessert und analysiert Code mittlerweile deutlich fundierter statt blind zu spekulieren. Wenn man jedoch nicht präzise vorgibt, wohin die Reise gehen soll, neigen KIs immer noch zu eigenwilligen Skript-Lösungen, die in einer Sackgasse enden. Ohne ein beherztes „git reset --hard” hätte ich das Projekt wohl trotzdem mehr als einmal komplett neu starten müssen.


• KI-Ping-Pong beim Code-Review: Bei der Qualitätssicherung habe ich auf ein System aus „Checks and Balances” gesetzt. Über den Befehl /review triggere ich Claudes interne Prüfung, die strikt nach den Vorgaben in meiner review.md arbeitet. Ergänzend dazu habe ich externe Reviews von ChatGPT und Gemini durchführen lassen und die Ergebnisse abschließend mit Claude Opus diskutiert. Dieses „KI-Review für das KI-Review“ ist zwar ziemlich meta, aber extrem nützlich, um verschiedene Denkweisen gegenzuprüfen und logische Lücken zu schließen.

Bonusrunde: KI als Übersetzer?

Nachdem die Funktionalität stand, waren die Übersetzungen an der Reihe. Hier zeigte die KI ihre philosophische Seite: Claude Sonnet 4.5 wies mich ungefragt darauf hin, dass es bei Sprachen wie Hindi, Chinesisch oder Japanisch nicht nur um Vokabeln, sondern auch um kulturelle Eigenheiten und Höflichkeitsformen geht. Das war ein erfrischendes Maß an Selbstreflexion.

In der Praxis wurde es dann aber doch pragmatisch: Für die eigentliche Batch-Übersetzung der statischen Inhalte war mir Claude zu „verkopft” und zu kompliziert. Bei Gemini und ChatGPT schwankte die Ausführungsqualität zu stark. Am Ende habe ich alles von DeepL übersetzen lassen. Auch hier gilt: Das richtige Tool für den richtigen Job!

Vom Intranet ins wilde Web

Nachdem die Toolsammlung fertiggestellt war und sogar mehrere Sprachen unterstützte, leistete sie eine ganze Weile gute Dienste in unserem Firmennetzwerk. Irgendwann dachte ich mir: Warum eigentlich nicht teilen?

Also habe ich aufgeräumt und die Seite öffentlich gemacht. Und weil das Ganze ja ohnehin aus einem „Unfall“ entstanden ist, liegt der Code komplett offen. Wer mitbasteln will oder einen Fehler findet: Das Git-Repo findet ihr hier: https://github.com/RamonKaes/WebDev-Tools.

Ja, sorry. Jetzt ist sie also da, die 10.000ste Toolsammlung. Die 10.000ste Toolsammlung. Aber hey, immerhin hat sie eine gute Entstehungsgeschichte!

Viel Spaß damit!

Ramon