Schritt 1: Von «menschlichen» Anforderungen zu AI-Prompts
Der Prozess begann klassisch menschlich. Die Business-Analystinnen formulierten zunächst die fachlichen Anforderungen an das Tool. Diese wurden in logische Funktionsbereiche gruppiert:
- Allgemeine Übersicht: Darstellung der Tools wahlweise als Liste oder als Radar.
- Detailansicht: Ein Bereich für weitere Informationen zu jedem Tool.
- Tool-Verwaltung: Funktionen zum Hinzufügen neuer Tools und Verwalten von Keywords.
- Prompt-Library: Ein integrierter Bereich, um bewährte Prompts mit dem Team zu teilen, inklusive Angaben zur Kompatibilität mit verschiedenen AI-Tools.
Um diese Anforderungen für AI-Design-Tools nutzbar zu machen, wurde ChatGPT als «Übersetzer» eingesetzt. Die Anweisung bestand darin, die fachlichen Vorgaben so umzuformulieren, dass sie als strukturierte Prompts für UI-Design-Tools fungieren konnten. Ziel war es, durch präzises Prompt-Engineering eine optimale Ausgangslage für die visuelle Generierung zu schaffen.
Schritt 2: Design-Generierung mit Figma Make, Lovable und v0
Im Rahmen des Projekts wurden die drei AI-Design-Tools Figma Make, Lovable und v0 by Vercel einem direkten Vergleich unterzogen. Drei UX-Designerinnen arbeiteten parallel mit je einem dieser Werkzeuge und speisten schrittweise die zuvor generierten Prompts ein.
Bereits der erste Durchlauf zeigte ein zufriedenstellendes Ergebnis über alle Tools hinweg: Die funktionalen Anforderungen wurden einheitlich verstanden und die Grundstruktur der Anwendung zuverlässig erstellt. Dies verdeutlicht, dass die aktuelle Generation von AI-Design-Werkzeugen gut in der Lage ist, präzise Instruktionen in visuelle Schnittstellen zu übersetzen. Dass dabei kaum visuelle Varianz entstand, zeigt die untenstehende Gegenüberstellung der generierten Designs von Figma Make und Lovable.
Bereits nach etwa zweieinhalb Stunden stand ein funktional vollständiger Entwurf des TechRadars, der alle Anforderungen abdeckte. Dieser erste Wurf war zwar «fertig», überzeugte visuell und konzeptionell jedoch noch nicht vollständig.
Um die Möglichkeiten der AI-Tools weiter zu testen, wurde das Projekt in Figma Make weitergeführt. Dort investierte eine der UX-Designerinnen fast noch einmal die gleiche Zeitspanne in iteratives Re-Prompting, um das UI auf ein Niveau zu heben, das gängige UX-Patterns und Best Practices einhält. Durch dieses gezielte Re-Prompting konnten unter anderem folgende Bereiche verbessert werden:
Farbwahl und Semantik
Umstellung auf eine intuitive Grün-Gelb-Rot-Farbskala für die Ratings (Adopt bis Hold), die konsequent in der Liste und im Radar übernommen wurde und die ursprünglichen Violett-Töne ersetzen. Zudem erhielten die Kategorie-Chips ein leichteres Design mit transparenteren Farben und feinen Strokes für einen moderneren Look.
Card-Design statt Liste
Für eine bessere Übersicht wurden die Tabellenzeilen der Listenansicht durch strukturierte Tool-Cards ersetzt. Da die Anzahl der Tools überschaubar ist, wirkt dieses Design deutlich frischer und bietet im Vergleich zur kompakten Liste einen klareren visuellen Fokus auf die einzelnen Tools und deren Inhalte.
UI-Konsistenz
Der Header mit Suche, Filtern und Ansichts-Wechsel (Liste/Radar) wurde fixiert. So bleibt die Navigation beim Wechsel zwischen Listen- und Radaransicht stabil an derselben Position, anstatt – wie im ersten Entwurf – die Suche auszublenden oder Filter zu verschieben. Zudem wurde die Struktur so angepasst, dass neue Bereiche wie beispielsweise eine Prompt-Library flexibel als neuer Tab integriert werden können.
Schritt 3: Nahtlose Umsetzung
Das Softwareentwicklungsteam konnte unmittelbar von dieser detaillierten Vorarbeit profitieren. Dank moderner MCP-Server (Model Context Protocol) für Figma und Angular war die AI in der Lage, die Design-Vorgaben direkt zu interpretieren und ohne Reibungsverluste in Code zu übersetzen.
Innerhalb weniger Stunden entstand so eine Anwendung, die:
- die visuelle Präzision des Designs exakt widerspiegelt,
- vollständig interaktiv und über verschiedene Parameter filterbar ist,
- technisch sauber zwischen den verschiedenen Ansichten (Liste, Radar, Prompts) wechselt.
Frontend-Entwicklung
Die Umsetzung des Frontends erfolgte mit Claude Code, einem Angular- sowie einem Figma-MCP-Server. Als wesentliche Grundlage diente ein von Angular bereitgestelltes Referenzfile für AI-Agents. In kurzer Zeit wurde so Code generiert, der den Anforderungen weitestgehend entsprach. Während die Struktur der TypeScript-Dateien und Angular-Templates lesbar und wartbar war, zeigten sich bei den Stylesheet-Deklarationen (CSS) Herausforderungen: Diese waren teilweise unübersichtlich und für Entwickler schwer erweiterbar. In Einzelfällen mussten zudem das Design manuell nachjustiert und komplexe Use-Cases genauer beschrieben werden. Dies verdeutlicht, dass für eine durchgehend hohe Code-Qualität künftig noch präzisere Anweisungen an die Agents notwendig sind.
Backend-Implementierung
Die backendseitige Umsetzung wurde ebenfalls mit dem AI-Agent Claude realisiert. Statt einfacher Prompts wurde hier eine dateibasierte Anleitung als Grundlage verarbeitet. Da es sich um eine standardisierte Schnittstelle für das Lesen, Erstellen, Mutieren und Löschen von Daten handelte, lieferte die AI schnell zielführende Resultate inklusive der dazugehörigen Tests. Das erzeugte Produkt musste kaum manuell angepasst werden und war direkt funktionsfähig.
Business-Analyse & UX für erfolgreiche Softwareprojekte
Effiziente Software ist oft ein Schlüssel zum Erfolg eines Unternehmens.
Doch wie entwickelt man Software, die Geschäftsprozesse optimal unterstützt und gleichzeitig benutzerfreundlich ist?
Unser Whitepaper zeigt, wie Business-Analyse und UX Hand in Hand gehen, um Ihre IT-Projekte zum Erfolg zu führen.
Laden Sie unser Whitepaper herunter und erfahren Sie, wie Sie durch Business-Analyse und UX den Erfolg Ihrer Softwareprojekte sichern können.
Zentrale Erkenntnisse
Die interdisziplinäre Arbeit am TechRadar lieferte wertvolle Einblicke, sowohl für den Design- als auch für den Softwareentwicklungsprozess.
- Prompt-Qualität vor Tool-Wahl: Das Experiment machte deutlich, dass die visuelle Qualität weniger vom Tool als vielmehr von der Präzision des Prompts abhängt. Die Resultate der drei Applikationen wiesen verblüffende Ähnlichkeiten auf.
- Technologischer Sprung: Während AI-Design-Tools aus unserer Sicht vor rund sechs Monaten noch häufig wenig überzeugende Designs generierten, haben sie sich inzwischen deutlich weiterentwickelt. Heute dienen sie als ernstzunehmende Starthilfe und Inspirationsquelle und können den Gesamtprozess spürbar effizienter machen.
- Effizienz durch hybriden Workflow: Langes Re-Prompting ist oft mühsam und kann dazu führen, dass bereits gut funktionierende Elemente unbeabsichtigt verändert werden. Daraus ergibt sich ein hybrider Workflow: AI-Design-Tools werden für die schnelle Explorationen und die Erarbeitung einer Grundstruktur eingesetzt, während die Finalisierung bewusst manuell in Figma erfolgt, um eine saubere UX-Qualität sicherzustellen.
- Qualitätsunterschiede in der Code-Generierung: Während Logik (TypeScript, Backend) und Templates bereits gut strukturiert und wartbar generiert werden, bleibt die Erstellung von erweiterbaren Stylesheets (CSS) eine Herausforderung. Hier sind künftig noch präzisere Anweisungen an die Agents erforderlich.
Fazit
Der interaktive TechRadar hat eindrücklich gezeigt, dass AI die Distanz zwischen einem ersten Konzept und einem fertigen, qualitativ hochwertigen Produkt verkürzen kann. Es wurde deutlich, dass AI ein beeindruckendes Fundament liefern kann, das vor allem die frühen Phasen der Ideenfindung und technischen Grundstruktur beschleunigt. Andererseits bleibt die fachliche Expertise die entscheidende Instanz, um aus einem guten Entwurf ein professionelles, nutzerzentriertes Produkt zu machen.
