From Vision to Code: Re­de­fi­ning Da­sh­board De­ve­lo­p­ment through AI [ENG/DE]

Geschrieben von Computational and Data Science-Absolvent Sangeeths Chandrakumar unter der Betreuung von CDS- und AISE-Dozent:innen Dr. Ana Petrus und Dr. Michael Burch.

In today’s world of smart technology, automation is not just a nice-to-have, it is essential. Yet one task remains surprisingly manual, even in data-driven companies: transforming dashboard mock-ups into functional code. Regardless of whether these designs are sketched by hand or crafted using sophisticated tools like Figma, the process of creating real dashboards is often painstakingly slow, repetitive, and prone to errors.

For my Bachelor’s thesis at the University of Applied Sciences of the Grisons, I tackled this very issue. The result is a fully automated system that converts static dashboard designs into interactive, ready-to-use Plotly charts in a matter of seconds. No manual coding required, no special software. Just a ’vision-to code’ process powered by advanced AI models that are capable of interpreting both images and text.

This innovation represents more than just a technological solution. It is a new way of thinking about how we design, test, and build data dashboards.

The Problem: Designing Dashboards Is Still Too Slow

Anyone who has ever had to create a dashboard will be familiar with the common challenges: rapidly changing stakeholder requirements, endless design iterations, and countless hours spent manually adjusting layouts and styles. While traditional tools are indeed powerful enough to help, they typically require coding expertise to unlock their full potential.

I wanted to build a system that would remove the developer bottleneck while allowing users to maintain creative control. A system where even a rough sketch could become a working, interactive dashboard. This meant having to bridge two distinct worlds: image-based visual design and executable Python code.

The Solution: A Three-Stage Vision-to-Code

The core of this project is a modular system (see illustration below) built for accuracy, speed, and scalability. It works in three stages.

1. Vision Module: The system uses multimodal large language models (LLMs) to analyse uploaded mock-ups and detect UI elements, such as charts, tables, and filters. A grid overlay ensures accurate positioning, while a custom blackout algorithm helps identify and process even overlooked areas.
2. Styling & Metadata Extraction: Each detected element is cropped and processed using specially designed prompts to extract styling details such as colours, labels, and axes. All information, including notes from hand-drawn sketches, is organised in a clean JSON format.
3. Code Generation: Finally, the system uses the reasoning power of LLMs to generate modular and easy to mainten Python code with Plotly. The result is not just a prototype, it is fully functional code that works in the browser, supports interactivity, and preserves the original layout.

While there have been attempts to create sketch-to-code tools, most rely on static models, fixed training sets, or simplified outputs. My approach is based on live LLM inference, offering flexibility, extensibility, and rapid adaptation across various use cases. I also prioritised human-AI collaboration, ensuring that the pipeline can be guided by prompts, corrected in iterations, and expanded with user input. This avoids the black box and instead works as a transparent tool that grows with the user's creativity.

Evaluation: Human and AI Assessment

To test the system, two types of evaluation were carried out:

1. Human Evaluation: Users assessed the generated dashboards based on accuracy, visual appeal, and ease of use.
2. AI Evaluation: GPT-4o acted as an automated evaluator, comparing layout accuracy, style consistency, and code quality against defined benchmarks.

Both evaluations confirmed the same result: the system performs well across a wide range of mock-up styles and complexity levels.

Reflections and Impact

This project taught me that prompt engineering is a powerful but often over looked tool. Rather than retraining models or constructing complex systems, I focused on designing clear and structured prompts that effectively guided the LLMs. The result? Strong, reliable outputs without any fine-tuning or use of proprietary APIs.

It also led to a deeper insight: the gap between design and code is not merely a technical issue, but a cognitive one. With the right abstractions, this gap can be bridged.

What’s Next?

This is just the beginning. Imagine connecting this pipeline to business intelligence tools, educational platforms, or low-code systems. Picture designers, analysts, and domain experts creating and deploying dashboards without writing a line of code.

I believe that this kind of automation will shape the future of interface development, not by replacing developers, but by freeing them to focus on logic instead of layout.

This work was supervised by Dr. Michael Burch and Dr. Ana Petrus, whose guidance and support were invaluable throughout this journey. I am sincerely grateful for their expertise and encouragement.

To everyone working at the intersection of AI and design: the tools are here. Now is the time to build smarter and faster.

In der heutigen Welt intelligenter Technologien ist Automatisierung nicht nur ein nettes Extra, sondern unverzichtbar. Dennoch bleibt eine Aufgabe überraschenderweise auch in datengesteuerten Unternehmen nach wie vor manuell: die Umsetzung von Dashboard-Entwürfen in funktionsfähigen Code. Unabhängig davon, ob diese Entwürfe von Hand skizziert oder mit ausgefeilten Tools wie Figma erstellt werden, ist der Prozess der Erstellung von Dashboards oft mühsam langsam, repetitiv und fehleranfällig.

In meiner Bachelorarbeit an der Fachhochschule Graubünden habe ich mich genau mit diesem Problem befasst. Das Ergebnis ist ein vollautomatisches System, das statische Dashboard-Entwürfe innerhalb von Sekunden in interaktive, einsatzbereite Plotly-Diagramme umwandelt. Keine manuelle Programmierung erforderlich, keine spezielle Software. Nur ein «Vision-to-Code»-Prozess, der auf fortschrittlichen KI-Modellen basiert, die sowohl Bilder als auch Text interpretieren können.

Diese Innovation ist nicht nur eine technologische Lösung. Sie stellt eine neue Denkweise dar, wie wir Daten-Dashboards entwerfen, testen und erstellen.

Das Problem: Die Erstellung von Dashboards dauert immer noch zu lange

Alle, die schon einmal ein Dashboard erstellen mussten, kennen die typischen Herausforderungen: sich schnell ändernde Anforderungen der Stakeholder, endlose Design-Iterationen und unzählige Stunden, die mit der manuellen Anpassung von Layouts und Stilen verbracht werden. Zwar sind herkömmliche Tools dabei durchaus leistungsstark, doch erfordern sie in der Regel Programmierkenntnisse, um ihr volles Potenzial auszuschöpfen.

Ich wollte ein System entwickeln, das den Entwicklungsengpass beseitigt und es Nutzer:innen gleichzeitig ermöglicht, die kreative Kontrolle zu behalten. Ein System, in dem selbst eine grobe Skizze zu einem funktionierenden, interaktiven Dashboard werden kann. Das bedeutete, zwei unterschiedliche Welten miteinander zu verbinden: bildbasiertes visuelles Design und ausführbarer Python-Code.

Die Lösung: Ein dreistufiger «Vision-to-Code»-Prozess

Das Herzstück dieses Projekts ist ein modulares System (siehe Abbildung), das auf Genauigkeit, Geschwindigkeit und Skalierbarkeit ausgelegt ist. Es ist in drei Stufen aufgebaut.

1. Vision-Modul: Das System nutzt multimodale grosse Sprachmodelle (LLMs), um hochgeladene Mock-Ups zu analysieren und UI-Elemente wie Diagramme, Tabellen und Filter zu erkennen. Ein Raster-Overlay sorgt für genaue Positionierung, während ein massgeschneiderter Blackout-Algorithmus dabei hilft, auch übersehene Bereiche zu identifizieren und zu verarbeiten.
2. Styling und Metadaten-Extraktion: Jedes erkannte Element wird zugeschnitten und mithilfe speziell entwickelter Prompts verarbeitet, um Styling-Details wie Farben, Beschriftungen und Achsen zu extrahieren. Alle Informationen, einschliesslich Notizen aus handgezeichneten Skizzen, werden in einem übersichtlichen JSON-Format organisiert.
3. Code-Generierung: Schliesslich nutzt das System die Schlussfolgerungsfähigkeit der LLMs, um mit Plotly modularen und leicht zu wartenden Python-Code zu generieren. Das Ergebnis ist nicht nur ein Prototyp, sondern voll funktionsfähiger Code, der im Browser läuft, Interaktivität unterstützt und das ursprüngliche Layout beibehält.

Zwar gab es bereits Versuche, «Sketch-to-Code»-Tools zu entwickeln, doch die meisten stützten sich auf statische Modelle, feste Trainingsdatensätze oder vereinfachte Ergebnisse. Mein Ansatz basiert auf der Live-Inferenz mit LLMs und bietet Flexibilität, Erweiterbarkeit und schnelle Anpassung an verschiedene Anwendungsfälle. Ausserdem habe ich der Zusammenarbeit zwischen Mensch und KI Priorität eingeräumt und dafür gesorgt, dass die Pipeline durch Eingabeaufforderungen gesteuert, in iterativen Schritten korrigiert und durch Benutzereingaben erweitert werden kann. Das bedeutet, dass es sich nicht um eine Black Box handelt, sondern um ein transparentes Tool, das mit der Kreativität der Nutzer:innen wächst.

Auswertung: Beurteilung durch Mensch und KI

Um das System zu testen, wurden zwei Arten von Bewertungen durchgeführt:

1. Menschliche Bewertung: Nutzer bewerteten die generierten Dashboards hinsichtlich Genauigkeit, optischer Ansprechendheit und Benutzerfreundlichkeit.
2. KI-Bewertung: GPT-4o fungierte als automatisierter Bewerter und verglich Layoutgenauigkeit, Stilkonsistenz und Codequalität mit definierten Benchmarks.

Beide Bewertungen kamen zu demselben Ergebnis: Das System schneidet bei einer breiten Palette von Mock-Up-Stilen und Komplexitätsstufen sehr gut ab.

Erkenntnisse und Auswirkungen

Dieses Projekt hat mir gezeigt, dass Prompt-Engineering ein leistungsstarkes, aber oft übersehenes Werkzeug ist. Anstatt Modelle neu zu trainieren oder komplexe Systeme aufzubauen, habe ich mich darauf konzentriert, klare und strukturierte Prompts zu entwerfen, die die LLMs effektiv anleiten. Das Ergebnis? Überzeugende, zuverlässige Ergebnisse ohne Feinabstimmung oder den Einsatz proprietärer APIs.

Es führte auch zu einer tieferen Erkenntnis: Die Kluft zwischen Design und Code ist nicht nur ein technisches, sondern auch ein kognitives Problem. Mit den richtigen Abstraktionen lässt sich diese Kluft überbrücken.

Wie geht es weiter?

Das ist erst der Anfang. Stell dir vor, diese Pipeline würde mit Business-Intelligence-Tools, Bildungsplattformen oder Low-Code-Systemen verbunden. Oder wie Designer:innen, Analyst:innen und Fachexpert:innen Dashboards erstellen und bereitstellen, ohne eine Zeile Code zu schreiben.

Ich bin davon überzeugt, dass diese Art der Automatisierung die Zukunft der Interface-Entwicklung prägen wird - nicht, indem sie Entwickler:innen ersetzt, sondern indem sie ihnen die Freiheit gibt, sich auf die Logik statt auf das Layout zu konzentrieren.

Diese Arbeit wurde von Dr. Michael Burch und Dr. Ana Petrus betreut, deren Anleitung und Unterstützung während dieser gesamten Reise von unschätzbarem Wert waren. Ich bin ihnen aufrichtig dankbar für ihr Fachwissen und ihre Ermutigung.

An alle, die an der Schnittstelle von KI und Design arbeiten: Die Werkzeuge stehen bereit. Jetzt ist es an der Zeit, intelligenter und schneller zu entwickeln.