Ausprobiert: ein Webprojekt im Terminal mit KI erstellen

Ein Screenshot aus dem Terminal

Ich habe heute zum ersten Mal mit Claude.Code gearbeitet. Es handelt sich dabei um ein KI-Sprachmodell spezialisiert aufs Coding, das im Terminal verwendet wird. Spoiler vorab: Es ist ziemlich cool, und zugleich auch sehr ambivalent in Hinblick auf gute Nutzung! Mir ging es dabei nicht so sehr um dieses konkrete Tool, sondern um ein grundsätzliches Verständnis, in welche Richtung KI-Tools gerade weiter entwickelt werden.

Was war meine Idee?

Meine Idee war es, ein Online-Tool zu gestalten, das Menschen nutzen können, um in ein Formular sechs Linkempfehlungen mitsamt Beschreibungen einzugeben. Daraus sollte dann ein Zine zum Download als PDF (= ein faltbares Heftchen) erstellt werden. Dieses könnte man dann falten, schneiden und teilen!

Der Hintergrund für das Projekt war meine Einschätzung, dass in einer KI-geprägten Zeit immer mehr Internet-Erkundung direkt über KI-Sprachmodelle läuft. Da finde ich es einen relevanten Gegentrend, dazu zu ermutigen und zu inspirieren, interessante Websites auch direkt zu besuchen. Hinzu kommt zweitens die soziale Kuratierungskomponente: Mit solch einem Zine wird eine Liste mit Links nicht algorithmisch (und damit tendenziell intransparent) erstellt, sondern von einer Person, die mir vielleicht das Zine auch direkt selbst in die Hand drückt.

Was brauchte ich dazu?

Ich habe ein grobes Verständnis vom Aufbau von Websites. Somit konnte ich mir überlegen, dass ich das Projekt als statische Website umsetzen wollte, bei der Nutzer*innen ihre Angaben in ein Formular eingeben, diese dann im Browser gespeichert werden und daraus dann ein PDF generiert wird. Ich kannte außerdem von früheren Zine-Projekten die Technik, dass man Print-Design festlegen kann, um Online-Inhalte korrekt auf ein PDF anzuordnen. Außerdem hatte ich eine recht genaue Vorstellung davon, wie die Website am Ende aussehen sollte.

Mein erster Schritt war, dass ich für mich überlegt habe, wie die Seite am Ende genutzt werden soll:

  • Auf der index.html Seite gibt es eine kurze Beschreibung – und weiterführende Links zu einem Beispiel, einer Faltanleitung und dem Hintergrund des Projekts. Außerdem den großen Link zum Erstellen eines Zines. Außerdem soll (auf diese und auch auf weitere Seiten) ein Footer mit Credits, Impressum und Datenschutz.
  • Die Zine-Erstellen Seite ist dann besonders relevant. Hier muss das Formular beschrieben werden, was Nutzer*innen eingeben können.
  • Nach Absenden sollten sie zu einer Ergebnis-Seite kommen, auf der sie das erstellte Zine als PDF und Online herunterladen können.

Mir war klar, dass ich neben diesen sichtbaren HTML-Seiten eine CSS-Design-Datei und eine Datei mit den Javascript-Funktionen benötigen werde. Genau beschrieben habe ich außerdem den gewünschten Aufbau der PDF Datei.

Zusätzlich hatte ich Anforderungen an den Datenschutz: Ich wollte z.B. keine Einbindung von Google Fonts, sondern eine lokale Installation.

Wie nutzte ich dazu Claude Code?

Claude Code ist denkbar einfach zu installieren: Man gibt den Befehl des Anbieters im Terminal ein und kurze Zeit später kann man starten. Zunächst muss man sich dann über eine API-Schnittstelle oder einen Claude.AI-Account mit dem Modell verbinden. Danach richtet man auf dem verwendeten Rechner einen Ordner für das zukünftige Programm an, steuert diesen im Terminal an (= cd mein-cooles-projekt) und aktiviert Claude mit dem Befehl ‚claude‘. Anschließend kann man im Terminal chatten, wie man das auch ansonsten von einem KI-Sprachmodell gewohnt ist.

Es gibt aber zwei wichtige Unterschiede:

  1. Vom Terminal aus kann das Tool direkt im angegebenen Rechner arbeiten. Dort entsteht also direkt das Projekt und ich kann jederzeit auch in die Dateien reingehen und darin schreiben.
  2. Ich kann gezielt zur Nutzung von Online-Ressourcen auffordern. Hier ist sehr transparent, dass ich jedes Mal gefragt werde, ob Claude einen bestimmten Inhalt abrufen oder auch herunterladen darf.

Praktisch fand ich auch, dass Chats deutlich maschineller und strukturierter sind, als mit dem vielen ‚Bla Bla‘ eines klassischen Sprachmodells.

Ich habe somit damit gestartet, dass ich die obige Beschreibung sinngemäß geteilt habe. Es wurden Rückfragen gestellt. Und dann eine erste Version entwickelt.

Ich hatte inzwischen einen Webspace und eine Domain auf linkheftchen.de, was ich mir als sehr passenden Namen für das Projekt überlegt hatte, eingerichtet. Die erstellten Dateien konnte ich dort dann direkt hochladen und eine erste Version ausprobieren.

Wie ging die Erstellung weiter?

Nach der Erstellung einer ersten Version ging es ans Testen und Ausprobieren. Ich stieß direkt auf viele Fehler:

  • Man konnte viel zu lange Texte ins Formular eingeben.
  • Die Printregeln funktionierten nicht.
  • Die Erklärungen waren nicht logisch.

Ich startete damit, dass ich gewünschte Funktionsänderungen ins Terminal eingab, woraufhin Claude an den Dateien in meinem Ordner weiter schrieb. Ich konnte dann immer wieder hochladen und weiter testen und weitere Fehler melden und beschreiben.

Der nächste Schritt war dann die genauere Ausgestaltung: Hier öffnete ich eine erstellte HTML-Seite nach der anderen und ging die Texte durch und korrigierte/ veränderte/ erweiterte sie, so dass sie zu mir und meinem Anliegen passen. Etwas nervig fand ich, dass Claude Code alle Umlaute ausschreibt (also: oe statt ö). Das lässt sich bestimmt aber irgendwo einstellen.

In diesem Prozess fielen mir dann noch weitere Ideen ein. Zum Beispiel überlegte ich, dass man heruntergeladene Online-Versionen auch zum Remix hochladen könnte. Hier fand ich es dann wirklich beeindruckend, wie schnell so etwas immer direkt an den jeweils richtigen Stellen ergänzt wurde.

Was ist mein Fazit?

Das ‚Vibe-Coding‘, was natürlich kein wirkliches Programmieren ist und für nachhaltige Projekte ganz sicher keine Lösung ist, hat mir sehr viel Freude gemacht. Es ist ziemlich beeindruckend, wie schnell und gut eine Idee sich in Realität verwandeln kann, an dem ich ansonsten sehr, sehr lange gefrickelt hätte. Allerdings gilt auch hier: Die erste Version stand schon nach einer guten halben Stunde; das Testen und Ausarbeiten nahm dann durchaus nochmals 6 weitere Stunden in Anspruch.

Netzpolitisch und auch sozial betrachtet ist solch ein Vorgehen natürlich sehr ambivalent:

  • Netzpolitisch werden Online-Ressourcen, die Communities oder Einzelpersonen erstellen, die darauf angewiesen sind, dass Menschen ihre Websites besuchen, einfach so extrahiert. Ich habe das für mich so gelöst, dass ich eine Credits-Seite eingerichtet habe und auch selbst für das verwendete DoodleCSS spenden werde. Ich habe dieses Designtool auch bewusst angesteuert und kannte es von früheren Projekten. (Außerdem ist das von mir entwickelte Projekt insgesamt auch selbst der Versuch eines Gegentrends zu solch einer Extraktionslogik).
  • Sozial gilt spätestens bei solchen Projekten, dass ‚KI‘ doch einiges an Geld kostet. Ich habe ziemlich viele Tokens investiert. Wahrscheinlich wird die Erstellung mich rund 20-30 Euro gekostet haben. Wenn man einen Claude Account hat, dann würde man wahrscheinlich mit der Pro-Version nicht hinkommen, sondern sich die Max Version für 90 Euro/ Monat kaufen müssen. Das ist für viele nicht einfach finanzierbar.

Sehr cool finde ich trotz alledem, dass ich ein ziemlich tolles Werkzeug zur Umsetzung von Ideen gefunden habe. (Und ich freue mich darüber, dass mir daran deutlich wird, dass es zukünftig wohl immer mehr darum gehen wird, gute Ideen zu haben!). Für die netzpolitische und soziale Dimension finde ich, dass ich mit meiner Orientierung an gemeinwohlorientierter Digitalpädagogik ein relevantes Thema aufgemacht habe.

Wenn du das Ergebnis ausprobieren willst, dann wünsche ich dir viel Freude.

Update 7. Februar: Mein Ausprobieren ging direkt weiter. Hier beschrieben.


Beitrag weiternutzen und teilen

Dieser Beitrag steht unter der Lizenz CC BY 4.0 und kann somit gerne offen weitergenutzt und geteilt werden. Hier kannst du dir den Beitragslink und/oder den Lizenzhinweis kopieren. Wenn du den Beitragslink in das Suchfeld im Fediverse (z.B. bei Mastodon) eingibst, wird er dir dort angezeigt und du kannst ihn kommentieren.


Erschienen in der Kategorie:
Reaktionen im Fediverse
Ein Kommentar
Anregungen zum Weiterlesen