Dachassistent

Ein Vibe-Coding Prototyp
Der Dachassistent ist eine fortschrittliche Erweiterung für eine bestehende Dachplanungssoftware. Ziel dieses Projekts war es, eine völlig standortunabhängige Lösung zu schaffen, die den Arbeitsalltag der Nutzer spürbar erleichtert. Egal ob auf dem Smartphone, dem Tablet oder am Desktop-PC – Nutzer können essenzielle Planungsdaten flexibel von überall aus vorausfüllen. Das spart nicht nur wertvolle Zeit, sondern reduziert auch den administrativen Aufwand erheblich. Sobald die Vorarbeit abgeschlossen ist, werden die Projekte nahtlos und direkt in die Haupt-Dachplanungssoftware übertragen.

Ein Prototyp, der sich wie fertige Software anfühlt

Um komplexe logische Abhängigkeiten der Dachplanung greifbar und interaktiv testbar zu machen, entschied ich mich als UX/UI Designer bewusst gegen einen rein statischen Klick-Dummy. Stattdessen entwickelte ich einen funktionalen Prototyp via Vibe Coding in Kombination mit Figma Make. Der Prototyp verhält sich wie eine vollwertige Webanwendung: Er reagiert mit echter Eingabelogik, dynamischen Berechnungen und realitätsnahen Zuständen. So konnten wir komplexe Nutzerinteraktionen und Randfälle fundiert evaluieren, noch bevor eine Zeile finaler Produktionscode geschrieben wurde.

KI-gestütztes Design und effiziente Entwickler-Übergabe

Ein wesentlicher Hebel für Geschwindigkeit und Präzision war der gezielte Einsatz von KI im Prototyping- und Designprozess. Da die bestehende Planungssoftware von ABS bereits auf dem Material-UI-Framework (MUI) basiert, baute ich auch den Prototyp konsequent auf diesen Design-Tokens und Komponenten auf. Diese bewusste Systemtreue garantierte ein nahtloses Look & Feel und schuf das perfekte Fundament für den Entwickler-Handoff: Vorgefertigte Bausteine, standardisierte Interaktionsmuster und saubere Spezifikationen machten die spätere technische Implementierung deutlich effizienter und reibungsloser.

Validierung durch Nutzerfeedbacks

Dank der hohen Interaktionstiefe des Prototyps konnten wir den Dachassistenten frühzeitig in qualitativen Usability-Tests mit der Kernzielgruppe – Dachdeckern und Planern – validieren. Zu beobachten, wie Fachanwender reale Projektdaten eingeben und typische Hürden im Baustellen- und Büroalltag meistern, lieferte unverzichtbare Erkenntnisse. So ließen sich mehrstufige Eingabemasken vereinfachen, Fachbegriffe schärfen und Reibungspunkte eliminieren, lange bevor die Software in den produktiven Rollout ging.

Interaktiver Prototyp

Probier es selbst aus!

Erlebe den interaktiven Figma-Make-Prototyp direkt im Browser und teste den Konfigurator selbst.

Interaktiven Prototyp starten