zur Übersicht

Replace me if you can (2)

Lesedauer ca. 5 Minuten
29.08.2024

Letzte Woche haben wir gezeigt, wie sich unsere Design-Xpertin Tina in unserem kleinen Experiment geschlagen hat. Ziel war es, eine funktionsfähige Webanwendung (Mood-Tracker) für mobile Zwecke inkl. Front- und Backend sowie Design mithilfe von KI-Tools zu entwickeln. Im aktuellen Beitrag widmen wir uns dem Vorgehen sowie dem Ergebnis unseres Backend-Xperten Danny. Dabei beleuchten wir die Stärken und Schwächen von KI-Tools wie ChatGPT, v0 von Vercel und GitHub Copilot Workspace.

Backend-Xperte wird zum Designer

Danny begann mit der Konzeptentwicklung für die Anwendung mithilfe von ChatGPT. Dabei nutzte er auch Custom-GPTs, die speziell auf User Experience Design zugeschnitten sind, um grundlegende Layouts und zentrale Funktionalitäten der Mood-Tracking-App zu definieren.

v0

Nachdem das Konzept finalisiert war, holte sich unser Backend-Xperte Unterstützung von v0 für die Designerstellung und das Frontend. Das KI-Tool v0 wurde von Vercel entwickelt und ist in der Lage, aus Text- und Bildbeschreibungen lauffähigen Frontend Code zu generieren. Danny fütterte das Tool mit Prompts in natürlicher Sprache, die verschiedene Layouts und deren Funktionsweisen beschrieben.

Mit zusätzlichen Eingaben verfeinerte Danny das angestrebte Design, bis v0 an seine Grenzen stieß und auch weitere Iterationen nicht die gewünschten Ergebnisse lieferten. Die Lösung? GitHub Copilot Workspace.


v0-version1 Iteration 1 (Quelle: v0)


v0-version11 Iteration 11 (Quelle: v0)


GitHub Copilot Workspace

GitHub Copilot Workspace ist eine KI-gestützte Entwicklungsumgebung. Sie ermöglicht Entwickelnden, Projekte von der Idee bis zur Umsetzung in natürlicher Sprache zu planen und zu realisieren. Im Vergleich zu GitHub Copilot bietet das Tool eine Task-orientierte, kollaborative Umgebung. Diese verbessert die Zusammenarbeit durch Echtzeit-Kooperation mit der KI, sowie spezifikationsbasierte Planung und Ausführung.

Als die Grenzen von v0 erreicht waren, hat unser Backend-Xperte den von v0 generierten Code daher als Repository in GitHub angelegt um mit Copilot Workspace die Entwicklung fortzusetzen. „Bestimmte Anpassungen erfordern direkten Eingriff in den Code, da die Möglichkeiten, Prototypen mit Tools wie bspw. v0 zu erstellen, irgendwann ausgeschöpft sind“, so Danny. Da er als Backend-Xperte über begrenzte Frontend-Kenntnisse verfügt, war für ihn Copilot Workspace besonders hilfreich. Insbesondere das Programmieren in natürlicher Sprache erleichterte ihm die Arbeit im Frontend erheblich.

Für eine Session mit Copilot Workspace wählt man zuerst das entsprechende Repository aus und startet dann mit dem Prompting. Zu Beginn definiert man eine Aufgabe und beschreibt diese in möglichst klaren Worten. Nach der Erstellung eines gut geschnittenen Tasks und der dazugehörigen Spezifikation liefert der Copilot Workspace Vorschläge zur Implementierung der Funktion in natürlicher Sprache. Basierend auf dem Code aus dem Repository und der Aufgabe sind die Vorschläge von Copilot Workspace meist hochwertig, aber es gibt trotzdem die Möglichkeit die Vorschläge von zu bearbeiten, zu ergänzen, oder mit Unterpunkten zu versehen. Das fördert das Zusammenspiel zwischen KI und Entwickelnden und hilft Missverständnisse in der Umsetzung zu vermeiden.

Unser Backend-Xperte rät, die Aufgaben kleinzuhalten, obwohl das Tool auch größere Aufgaben gut bewältigen kann. Es ist wichtig, zusammengehörige Aufgaben zu bündeln und nicht verschiedene Aufgaben in einer Anfrage zu kombinieren. Die Nachvollziehbarkeit bleibt am besten erhalten, wenn man modular vorgeht. Copilot Workplace hat jedoch auch seine Grenzen und macht Fehler, die korrigiert werden müssen, weshalb ein technisches Grundverständnis erforderlich ist.

Bei der Arbeit am Backend hat Danny manches eigenständig umgesetzt, jedoch auch vermehrt auf ChatGPT und GitHub Copilot Workspace zurückgegriffen.


github-workspace-multiselect Multiselect (Quelle: GitHub Copilot Workspace)


result-multiselect Multiselect Result (Quelle: GitHub Copilot Workspace)


Im Verlauf der Umsetzung stieß unser Backend-Xperte auf verschiedene Herausforderungen, insbesondere bei der korrekten Darstellung von Mood-Tracking-Grafiken (z. B. wurden von v0 hartnäckig Monate statt Tage verwendet). Diese konnten durch manuelle Anpassungen und die iterative Verfeinerung im Copilot Workspace überwunden werden. Die endgültigen Verbesserungen im Design wurden letztlich durch gezielte Code-Anpassungen im GitHub Copilot Workspace erzielt.

Trotz der Unterstützung durch die KI-Tools waren technisches Verständnis und manuelle Anpassung notwendig, um ein zufriedenstellendes Ergebnis zu erzielen. Unser Backend-Xperte konnte durch die Nutzung von ChatGPT, v0 und GitHub Copilot Workspace eine funktionale und nutzungsfreundliche Oberfläche mit Einschränkungen schaffen.

Durch die Kombination dieser Tools sowie der eigenen Expertise und mehrmaligen Iterationen konnte Danny ein Mood-Tracking-Journal entwickeln, das die zuvor gestellten Anforderungen an das Produkt in großen Teilen erfüllt.

Webanwendung „Ups & Downs“


Ups-and-downs-starting-page Starting Page


Ups-and-downs-statistics Statistics


Fazit und Ausblick

Das Experiment zeigte deutlich die Stärken der verschiedenen Ansätze: Tinas Design bestach durch seine einladende Gestaltung und klare Ausrichtung auf die Bedürfnisse der Nutzenden, während Dannys Anwendung durch ihren größeren funktionalen Umfang überzeugte. Beide Xperten gewannen wertvolle Einblicke in die Potenziale und Einschränkungen der genutzten KI-Tools.

Es wurde deutlich, dass KI-Lösungen derzeit noch nicht ausgereift genug sind, um menschliche Expertise vollständig zu ersetzen. Während die Tools insbesondere bei User Research, Konzeption und Branding nützlich sind, bleibt die Validierung und Verfeinerung der KI-generierten Ergebnisse durch den Menschen unerlässlich. Besonders im Rapid Prototyping konnten die KI-Tools Prozesse deutlich beschleunigen. Technisches Verständnis jedoch, vor allem beim Coden, ist weiterhin notwendig, um spezifische Anforderungen erfolgreich umzusetzen. Nichtsdestotrotz ist davon auszugehen, dass KI-Tools zukünftig vermehrt in Design- sowie Codingprozesse integriert werden, da sie in beiden Bereichen die Qualität und Quantität des Outputs merklich steigern.

An diesem Punkt kommen auch ganz schnell ethische Fragestellungen ins Spiel. Bisher ist es so, dass KI-generierte Ergebnisse auf umfangreichen Datensätzen basieren, die das Wissen vieler Menschen widerspiegeln. Immer wieder kommt es zu Protesten bestimmter Berufsgruppen, da ihr Know-how ungefragt und unvergütet zum Training der Maschinen genutzt wurde und wird. Auf der anderen Seite steht die Frage, inwieweit KI menschliche Arbeit ersetzen sollte und darf. In diesem Bereich existieren verschiedene Ansätze wie bspw. Human-Centered AI und auch auf der Ebene der Gesetzgebung gibt es Bestrebungen, hier klare Regelungen zu schaffen. Wie bereits in vorherigen Blogbeiträgen und Interviews mit unseren Xperten möchten wir den positiven Nutzen von KI hervorheben. Es ist wichtig, die Technologie nicht als Gegner, sondern als Partner zu begreifen. Niemand kann die Zukunft vorhersagen und dennoch glauben wir, dass der menschliche Austausch und die Zusammenarbeit weiterhin wichtig sein werden.

Angesichts der rasanten Fortschritte im KI-Bereich planen wir, dieses Experiment regelmäßig zu wiederholen und die interdisziplinäre Zusammenarbeit unserer Teams weiter zu intensivieren. Wer im Wettbewerb bestehen will, muss seine Mitarbeitenden für die Zukunft rüsten.