Mithilfe von Künstlicher Intelligenz (KI) ist es möglich und rentabel geworden selbst kleinste Apps zu erstellen, die sehr spezifische Probleme lösen. Wir nennen sie liebevoll „LittleBigApps“. Rentabel deshalb, weil nun auch Nicht-Programmier:innen diese Apps mit einfacher Sprache via Chat und KI selbst programmieren können.

Also auch wir als Designer:innen.

Wie nutzen wir für uns und unsere Kunden die LittleBigApps?

Die Anwendungsfelder sind vielfältig. Natürlich zur Gestaltung und Generierung von Designs, aber auch zur Arbeitserleichterung und zum Controlling.

Controlling

Mit programmierten Google-Sheets-Integrationen, die die Kennzahlen aus unserer Zeiterfassungs-Software via API-Schnittstelle laden und dann weiterverarbeiten, optimieren wir unser Controlling. So erstellen wir passgenaue Auswertungen für uns und unsere Kunden mit maximaler Transparenz und Flexibilität.

Arbeitserleichterungen

Ein Beispiel aus unserer Praxis: FriedWald bietet Waldbestattungen an. Kunden können einen Baum in einem FriedWald kaufen und darunter beerdigt werden. Jeder Baum hat eine Nummer. Am Eingang des FriedWaldes steht eine Infotafel mit einer Karte, auf der alle Bäume inkl. Baumnummern verzeichnet sind. So kann man schnell und einfach „seinen“ Baum finden. Wir erstellen diese Karte mithilfe von Geodaten und eines Geoprogramms. Die Daten müssen in verschiedenen Formaten und Ausprägungen aus dem Geoprogramm exportiert werden – normalerweise viele händische Schritte. Mithilfe von ChatGPT haben wir uns ein Python-Script geschrieben, was diese Formate automatisch exportiert. Händische Schritte gespart, Fehlerwahrscheinlichkeit gesenkt, monotone Aufgabe beseitigt.

Generatives Design

Flexible und dynamische Brandings sind schon seit vielen Jahren im Trend. Diese umfassen Logos und Keyvisuals, die z.B. denselben gestalterischen Regeln unterliegen, aber leicht variieren. Die App zur Generierung dieser Varianten wurde bisher händisch in Processing programmiert. Heute haben wir die Möglichkeit mithilfe von aktuellen Webtechnologien diese Generatoren noch leichter zu erstellen. Genutzte Technologien: mechanic.design und p5.js.
Damit können Marken und Kunden Designs und Varianten selbst exportieren und die Gestaltung kann an variable Parameter dynamisch angepasst werden.

Ein tolles Beispiel dafür ist das Branding für die Philharmonie Luxembourg von Patrik Hübner. Über eine App wird das Logo durch Sounddateien animiert.

Welche Beispiele aus dem Web gibt es?

Das Web ist voll mit LittleBigApps, die spezifische Probleme lösen:

• Easing Wizard – Beschleunigungsfunktionen von CSS einfach einstellen
• OKLCH Color Picker & Converter – Schnell und einfach Farben umwandeln
• Waveform Renderer – Visualisierung von Sounddateien
• Liquid Logo – Ein metallischer Effekt mit dem eigenen Logo
• nnnoise – Rauschen in Grafiken erzeugen

Warum spielt die KI so eine große Rolle bei den LittleBigApps?

Ein Wort: Vibe-Coding. Vibe-Coding bezeichnet das Coden mithilfe einer KI und einfacher Sprache. Dabei sind es oft Laien und Nicht-Programmierinnen, die so Apps und Games programmieren.

• Vibe-Coding gibt mehr Menschen die Möglichkeit ihre Idee zum Produkt zu machen – schneller und kostengünstiger als bisher
• Nicht-Programmier*innen bauen Apps auf unkonventionelle Wege und schaffen damit Innovation
• Selbst das Ersetzen von kleinsten manuellen Arbeitsschritten wird durch die effiziente Erstellung via KI sinnvoll
• Spielerische Auseinandersetzung mit Code und Produkten erlauben viel schnellere Iterationszyklen, die verrückte Experimente möglich machen

Welche KI eignet sich für das „Vibe-Coding“?

Jede KI. Denn letztendlich bedeutet Vibe-Coding ja nur, dass über das Chat-Interface beschrieben wird, was man gerne hätte. Den Rest macht mal besser, mal schlechter, die KI. Trotzdem gibt es bereits erste Anbieter, die auf bestimmte Anwendungsfälle spezialisiert sind.

Lovable.dev (Link)

Lovable spezialisiert sich auf die Erstellung von ganzen Programmen und Webapps. Dabei übernimmt die KI die Erstellung aller Dateien, Voraussetzungen und Implementierungen. Das Ergebnis kann sofort getestet und geteilt werden. Zudem kann der Code über GitHub exportiert und auf eigenen Servern betrieben werden.
Wir testeten Lovable und hatten bereits einen konkreten Use-Case: Eine Kundin möchte Bilder auf einem markenkonformen Farbverlauf platzieren und in der Webseite einbinden. Innerhalb kurzer Zeit vibe-codeten wir mit Lovable einen einfachen Bild-Generator, mit dem wir Bilder auf einem Verlauf platzieren und im Format WebP (perfekt für den Einsatz im Web) exportieren konnten. Die Kundin ist nun befähigt diese Grafiken schnell und einfach selbst zu erzeugen.

Dabei hat Lovable antizipiert was wir erreichen wollten und sogar eigene Ideen implementiert, die nicht explizit Teil unseres Prompts waren.

Cursor (Link)

Cursor erinnert mehr an eine Entwicklungsumgebung und nutzt das Claude-Modell von Anthropic. Vom Funktionsumfang ähnlich zu Lovable, allerdings zum jetzigen Zeitpunkt weniger spezialisiert auf (Web-)Apps als Lovable. Die Lernkurve ist steiler als bei Lovable, dafür fühlen sich Profi-Programmierer schneller zuhause. Dafür gibt es mehrere Modi, vom „Agenten“, der wirklich alles programmiert, hin zum „Chat“ der mehr als Sparring-Partner dient.

Windsurf.ai (Link)

Die direkte Konkurrenz zu Cursor. Ersten Erfahrungsberichten zufolge soll Windsurf sogar noch antizipativer und in bestimmten Anwendungsgebieten besser sein.

ChatGPT und Claude.ai

Die Klassiker unter den KI’s ChatGPT und Claude.ai bieten ebenfalls die Möglichkeit LittleBigApps zu coden. Allerdings meist nur einzelne Dateien und weniger gesamtübergreifend als z.B. Lovable. Es handelt sich hierbei um generellere Ki’s, die ein breites Anwendungsspektrum abdecken. Zudem lohnt es sich beide Anbieter parallel zu nutzen. In manchen Fällen hatten wir mit ChatGPT bessere Erfahrungen gemacht, in anderen mit Claude.ai (unabhängig welche Programmiersprache benötigt wird).

Werden „echte“ Programmierer:innen überflüssig?

Nein, KI wird erfahrene Programmierer:innen nicht ersetzen. Im Gegenteil: Fachkräfte, die komplexe Anwendungen planen und orchestrieren, werden in Zukunft noch gefragter werden. Bei sicherheitskritischen oder sehr komplexen Anwendungen braucht es ebenfalls auf jeden Fall den Profi, denn hier sollte nicht blind der KI vertraut werden. Zum Einen weil viele der KI-Modelle in den Vereinigten Staaten oder auf anderen externen Servern liegen und zum Anderen, weil besonders die Wartbarkeit kritischer Apps langfristig eine große Rolle spielt. Und dafür macht die KI bei jedem Prompt dann doch ggf. zu viel bisherig geschrieben Code "kaputt".

„Vibe-Coding“ ist keine Garantie für schnelle Erfolge. Erfahrung in User Experience und Programmierkenntnisse helfen die KI wieder auf die richtige Fährte zu führen, sollte sie sich verlaufen. In unserem Beispiel mit den Bildern auf den Verläufen, war z.B. die Darstellung des Verlaufs in den exportierten Bildern schlecht. Also haben wir selber Ideen entwickelt, wie die KI das Problem lösen könnte. Durch diese menschlichen Impulse konnte die KI dann das Problem lösen.

Checkliste: Wann macht eine LittleBigApp Sinn?

Immer dann, wenn folgende Dinge im Fokus stehen:

• Zeit sparen: Auch wenn die LittleBigApp nur 5 Minuten spart, bei wiederkehrenden Prozessen entstehen schnell mehrere Stunden Ersparnis.
• Schnelligkeit: Mit einer LittleBigApp kann ich spezielle Grafiken schnell und eigenständig erstellen
• Markenkonforme Gestaltung: Wir legen die Parameter an, der Kunde befüllt nur die Inhalte und erhält markenkonformes Design
• Wenn keine sicherheitskritischen Use-Cases vorliegen