Was ist Prototyping mit KI?
Prototyping gehört zu den beliebtesten und wirkungsvollsten Methoden in der Anforderungsanalyse. Kaum eine andere Technik macht Anforderungen so greifbar und nachvollziehbar wie ein Prototyp, der Funktionen, Oberflächen, technische Lösungen oder Prozesse konkret simuliert. Man unterscheidet die Realitätsnähe eines Prototypen (auf Englisch die sogenannte “Fidelity”) in verschiedenen Dimensionen: Visuelle Darstellungstreue, Ausgestaltung der Interaktion oder die Qualität der Daten. In jeder Dimension kann der Prototyp low-fidelity oder high-fidelity (hi-fi) sein.
Als Business Analyst (BA) oder Requirements Engineer (RE) nutzen wir Prototyping nicht isoliert, sondern in Kombination mit Workshops, Interviews und Walkthroughs, um Ideen früh zu validieren, Missverständnisse zu vermeiden und die Zusammenarbeit zwischen Fachbereichen und IT zu fördern. Der Lehrplan zum CPRE Requirements Elicitation führt Prototyping deshalb als zentrale Technik auf. Prototypen schaffen eine gemeinsame Sprache zwischen Stakeholdern mit unterschiedlichem Hintergrund: Fach, Entwicklung, Management, Nutzende.
Heute verändert sich Prototyping stark durch den Einsatz von künstlicher Intelligenz (KI). KI-gestützte Tools versprechen, den Aufwand der Erstellung zu senken, die Geschwindigkeit massiv zu erhöhen und neue Arten von Interaktionen zu ermöglichen.
Dieser Artikel gibt eine Übersicht über die bekanntesten KI-basierten Prototyping-Tools, beschreibt Kriterien zur Einordnung und geht beispielhaft auf zwei Anwendungen ein: Bolt.new und Miro AI.
Prototyping als Erhebungs- und Validierungsmethode
Vorteile von Prototyping
- Greifbarkeit: Anforderungen werden visuell und funktional erlebbar. Stakeholder sehen nicht nur ein Dokument, sondern eine erste Form des Produkts.
- Frühe Validierung: Rückmeldungen können früh eingeholt werden. Missverständnisse werden sichtbar, bevor teure Entwicklungsarbeit beginnt.
- Bessere Kommunikation: Ein Prototyp ist universell verständlich, auch ohne technisches Vorwissen.
- Motivation & Engagement: Beteiligte fühlen sich stärker eingebunden, wenn ihre Ideen sichtbar werden.
- Kostenreduktion: Fehler, die in der frühen Phase erkannt werden, sind deutlich günstiger zu beheben als im späteren Projektverlauf.
Nachteile von Prototyping
- Gefahr der Verwechslung: Stakeholder halten den Prototyp manchmal für ein fertiges Produkt und unterschätzen noch offene Aufwände.
- Aufwand: Klassische Prototyping-Ansätze können zeitintensiv sein (z. B. detaillierte Wireframes oder klickbare Mockups).
- Fokus auf Oberfläche: Gefahr, dass visuelle Aspekte im Vordergrund stehen, während Geschäftslogik und Datenstrukturen zu kurz kommen.
- Fehlende Nachhaltigkeit: Prototypen werden oft „weggeworfen“ – Wissen muss nochmals in Code übertragen werden.
Warum KI hier prädestiniert ist
KI-gestützte Tools adressieren viele dieser Nachteile. Sie sind in der Lage, aus natürlicher Sprache, Skizzen oder Tabellen automatisch funktionierende Prototypen zu erstellen. Dadurch entsteht ein Shift von manueller Modellierung hin zu dialogbasierter Generierung.
- Geschwindigkeit: Einfache Prototypen entstehen in Minuten.
- Integration: Manche Tools generieren nicht nur Oberflächen, sondern auch Datenmodelle, Backend-Logik und Workflows.
- Iterationen: Änderungen können direkt durch neue Prompts eingespielt werden.
- Kontinuität: Bei Coding-orientierten Tools lässt sich der Prototyp nahtlos in ein MVP oder Produkt überführen.
Übersicht über KI-basierte Prototyping Tools
Um die Vielzahl an Tools sinnvoll einzuordnen, helfen folgende Kriterien:
1
Kategorien
„Visuell / No-Code“, „Low-Code / Hybrid“, „Coding-orientiert“, „Agenten-basiert“ – die gängigen Nutzungsparadigmen aus der Praxis.
2
Zielgruppe
Business-User ohne Programmierkenntnisse oder erfahrene Designer:innen & Entwickler:innen?
3
Schritte / Modi
Welche Entwicklungsschritte werden unterstützt? Trennen die Tools Denken/Planen/Entwerfen vom Entwickeln (verschiedene Modi)?
4
Kontrolle / Granularität
Wie detailliert kann eingegriffen werden (Layout, Logik, Daten, Exporte)?
5
Backend / Logik
Reiner GUI-Prototyp oder auch interaktive Prototypen mit Logik, Daten und Backend-Anbindung?
6
UI / Design
Wie stark ist die Generierung überzeugender UI/UX (Komponenten, Themes, Responsiveness)?
7
Deployment
Einfaches Teilen/Publizieren (z. B. über URL), damit Stakeholder Prototypen testen können?
8
Am besten geeignet für …
Typische Settings/Use-Cases (frühe Ideen, MVPs, Mobile Apps, Automatisierung, Agenturen etc.).
KI-Prototyping-Tools – Landscape
Profi ↑
↓ Einsteiger
← Visuell geführter No-Code
Editorbasiertes KI-Coding →
OutSystems
Figma AI
Adobe XD + Sensei
Webflow (AI)
Bubble.io (Enterprise)
Framer AI
Galileo AI
Anima
Builder.io AI
Replit
Devin
AgentGPT / AutoGPT
Cursor.ai
GitHub Copilot
Workspace
Cline
Sketch2Code (MS)
Stackblitz AI
Glitch (AI)
Bolt.new
Zapier AI
Uizard
Glide AI
Miro
Diagramm mit den wichtigsten Prototyping Tools mit KI-Unterstützung eingeordnet nach Art der Erstellung und Zielgruppe
Übersicht mit AI Prototyping Tools
Visuell / No-Code
- Miro – Whiteboard, kollaboratives Prototyping
- Bubble.io – visuelles Web-App-Building
- Glide AI – Apps aus Tabellen, ohne Code
- Zapier AI – Automatisierungen, Integrationen
- Webflow (AI) – Webseiten-Design, kein Code
- Uizard – Skizzen → Designs, no-code
- Builder.io AI – Drag&Drop, Inhalte & Apps
- Figma AI – No-Code-Prototyping für Designer
Low-Code / Hybrid
- Framer AI – Visual-First, Coding-Optionen
- Adobe XD + Sensei – AI-Features, Plugins
- Anima – Figma/Sketch → Live Code
- OutSystems / Mendix – Enterprise-App-Bau
- Sketch2Code (MS) – Zeichnung → HTML/CSS
- Galileo AI – Prompts → UI-Code
- Replit – prompt-/codebasiert
- Glitch (AI) – Cloud-Prototyping
Coding-orientiert
- Figma AI – Design+Code, APIs
- Bolt.new – promptgetriebener Workflow
- Stackblitz AI – Code im Browser
- Sketch2Code (MS) – Entwickler-Export
- Builder.io AI – Export zu React/Vue
- GitHub Copilot Workspace – Cloud-IDE
- Cursor.ai – Coding Assistant
- Cline – Agent für Workflows
Agenten-basiert
- Devin – AI-Agent mit Coding-Skills
- AgentGPT / AutoGPT – autonome Projekte
- Replit (mit AI-Agent) – Build-Tasks
- Zapier AI (Advanced) – Multi-Tool Workflows
- Glitch (AI Agents) – Automationen & Tests
Vergleich der AI-basierten Prototyping-Tools
Kriterium |
Miro |
Bubble.io |
Glide AI |
Zapier AI |
Webflow (AI) |
Framer AI |
Adobe XD + Sensei |
Galileo AI |
Figma AI |
Uizard |
Anima |
Builder.io AI |
OutSystems / Mendix |
Bolt.new |
Replit |
Stackblitz AI |
Glitch (AI) |
Sketch2Code (MS) |
Cursor.ai |
Cline |
GitHub Copilot Workspace |
Devin |
AgentGPT / AutoGPT |
Schritte / Modi |
Ideation → Visualisierung |
Visuell → Build → Deploy |
Prompt → App (Mobile) |
Prompt → Automation |
Design → Publish |
Prompt → Varianten |
Design + AI |
Prompt → Screens |
Wireframes → Layout |
Skizze → Mockup |
Design → Code |
Prompt → Layouts |
Enterprise Workflow |
Prompt → Build |
Plan / Build / Edit |
Prompt → Code im Browser |
Prompt → Mini-App |
Sketch → HTML/CSS |
Inline Co-Coding |
Plan → Act |
Plan → Build Workspace |
Voller Dev-Agent |
Autonome Agents |
Kontrolle / Granularität |
Niedrig |
Hoch |
Mittel |
Niedrig |
Mittel–hoch |
Mittel |
Mittel |
Niedrig |
Mittel |
Mittel |
Mittel |
Mittel |
Sehr hoch |
Mittel |
Mittel–hoch |
Mittel |
Niedrig |
Niedrig–mittel |
Hoch |
Hoch |
Hoch |
Sehr hoch |
Sehr hoch |
Backend / Logik |
Nein |
Ja |
Ja |
Ja |
Nein |
Nein |
Nein |
Nein |
Nein |
Nein |
Teilweise |
Nein |
Ja |
Ja |
Ja |
Ja |
Ja (einfach) |
Nein |
Ja |
Ja |
Ja |
Ja |
Ja |
UI / Design |
Sehr stark |
Sehr stark |
Mittel |
Gering |
Sehr stark |
Stark |
Stark |
Stark |
Stark |
Stark |
Stark |
Stark |
Mittel |
Mittel |
Mittel |
Mittel |
Mittel |
Gering |
Gering |
Gering |
Mittel |
Gering |
Gering |
Deployment |
Nein |
Ja |
Ja |
Ja |
Ja |
Ja |
Nein |
Nein |
Nein |
Nein |
Ja |
Ja |
Ja |
Ja |
Ja |
Ja |
Ja |
Nein |
Repo |
Repo |
Workspace |
Ja |
Ja |
Am besten geeignet für … |
Frühe Ideen |
Startups / MVPs |
Mobile Apps |
Automatisierung |
Agenturen |
Startups |
Designer:innen |
Designer:innen |
Designer:innen |
Designer:innen |
Devs mit Figma |
Web-/App-Design |
Konzerne |
Hackathons |
Lernende bis Pros |
Lernende |
Lernende |
Designer:innen |
Devs mit AI-Pair |
BA/RE mit Agent |
Teams |
Profis |
Exploratives Prototyping |
Erfahrungsbericht: Prototyping mit Bolt.new
Aufgabenstellung: Baue einen Prototyp mit folgendem Ziel: Stelle Key Performance Indicators (KPIs) dar und hilf dem Benutzer, diese zu analysieren und Massnahmen abzuleiten.
Kontext: Der Wert einer wichtigen Geschäftskennzahl ist für sich alleine zwar interessant, aber nur im Kontext mit weiteren Daten nützlich; z. B. Wertänderungen über die vergangenen Monate, Wert in Bezug zu anderen Kennzahlen, Wertvergleich der Kennzahl über verschiedene Kundengruppen oder allenfalls der Vergleich mit Mitbewerbern auf dem Markt. Über die Analyse von Werten beeinflussender Kennzahlen, kann der Wert der im Fokus stehenden Kennzahl eingeordnet und Schlussfolgerungen abgeleitet werden (z. B. Massnahmen, die zu ergreifen sind).
Die Prototyping-Aufgabe war also:
1. Sieben Monatsdateien (CSV-Dateien) dieser Kennzahlen einlesen
2. Eine Applikation bauen, bei der in der Benutzungsoberfläche einer der Monate ausgewählt werden kann und automatisch die entsprechenden Kennzahlenwerte visuell ansprechend dargestellt werden. So soll die Wirkungskette aufgezeigt werden: Vom Handlungsraum (Massnahmen) über den Wirkungsraum (sog. Leading Indicators) in den Ergebnisraum, wo die interessierte Geschäftskennzahl als Lagging Indicator dargestellt wird.
3. Eine Kennzahl anklicken und in einem Liniendiagramm den Verlauf der effektiven Monatswerte sowie die Zielgrösse (im Vergleich dazu) visuell dargestellt zu bekommen.
Handlungsraum:
– Massnahmen
– Leading Indicators
Ohne KI hätte der Requirements Engineer zuerst einen Wireframe-Prototypen gezeichnet, mit wenigen Beispieldaten und keiner Interaktion. D.h. in allen drei Dimensionen (visuelle Ausgestaltung, Datenumfang und -qualität sowie der Interaktion) würde mit einigem Aufwand ein low-fidelity Prototyp erstellt.
Bei der Arbeit mit Bolt.new zeigt sich, wie stark KI das klassische Prototyping verändert:
- Browser-basiert: Bolt.new bietet alles im Browser an, so dass vom RE nichts selbst installiert werden muss. Sogar das Deployment am Schluss erfolgt am gleichen Ort. → Der Prototyp ist für alle, die den Link erhalten, einseh- und ausführbar.
- Realistische Beispieldaten: Mit KI wurden vorgängig für 7 Monate umfangreiche und realitätsgetreue, synthetische Kennzahlen erzeugt (CSV-Dateien), die als erste generierte Funktionalität von Bolt.new eingelesen wurden.
- Prompt-to-App: Mit einer einfachen Beschreibung der gewünschten Applikation – etwa so, wie oben unter “Prototyping-Aufgabe” formuliert – generiert Bolt.new sofort eine ansprechende, lauffähige Anwendung.
- Discuss & Build: Der KI-Agent ist in zwei Modi verfügbar: Zuerst diskutiert der RE wie mit einer Entwicklerin. D.h. es wird erklärt, was benötigt wird, und Bolt.new macht einen passenden Vorschlag zur Umsetzung. Wenn der User damit einverstanden ist, klickt er auf ‘Build’ und Bolt.new passt den Code automatisch an.
- Iterationen: Anpassungen wie „Beschreibe jede Kennzahl in einem Mouse-over-Text basierend auf der Input-Datei Labels.csv“ oder „Ergänze eine Schaltfläche zum erneuten Laden der Daten“ lassen sich in Sekunden implementieren und es funktioniert (fast – siehe unten die Herausforderungen).
- Daten, Code und Anforderungen: Daten können direkt in den hochgeladenen CSV-Dateien editiert werden. Code wird erzeugt, kann aber auch selbst modifiziert werden und zum Schluss kann sich der Requirements Engineer aus dem erzeugten Code – quasi im Reverse-Engineering-Modus – automatisch die Anforderungen dokumentieren lassen – also genau das, was er mit der Erhebungsmethode Protoyping erreichen will.
- Code-Kontinuität: Anders als bei klassischen Prototypen bleibt der Code bei Bedarf nutzbar. Entwickler:innen können das Projekt direkt in eine produktive Codebasis übernehmen.
Natürlich gab es auch Herausforderungen:
- Mehr Schein als Sein: Initial generiert die KI eine tolle Applikation, die auf den ersten Blick extrem beeindruckt: Toll designed, interaktiv, sieht schon aus wie fertig. Nur: Auf den zweiten Blick merkt der Requirements Engineer sofort, was alles fehlt, nicht passt oder falsch umgesetzt wurde.
- Nun kommt das Iterieren: Fehler erkennen und Bolt.new korrigieren lassen. In der Gratisversion geht es einem wie anno domini den Entwicklern mit Lochkarten. Man lässt einen Prompt laufen und hat dann den ganzen Tag und die Nacht Zeit, sich den Prompt für den nächsten Tag zu überlegen.
Lizenzmodell von Bolt.new: In der Gratisversion erhalten die Nutzenden eine Gesamtsumme von Tokens (1.2 Mio.).
Diese sind zusätzlich pro Tag limitiert (150k) und nach etwa 8 Tagen sind alle aufgebraucht und man muss für weitere Tokens bezahlen.
Das Tageslimit reicht gerade aus, um einen ausführlichen Prompt abzusetzen, der die Applikation baut oder umbaut.
Netterweise bricht die KI nicht ab, wenn das Tages- oder Gesamlimit erreicht ist, sondern bearbeitet den laufenden Prompt
nach Erfahrungen des Autors stets zu Ende.
- Diskutieren geht über Probieren: Für CHF 20.–/Monat für die Pro-Version von Bolt.new erhält man 10 Mio. Tokens und kann sofort weiterentwickeln. Man wird mit der Zeit jedoch sparsam und überlegt sich gut, ob man die KI schon entwickeln lassen will (build-Funktionalität) oder ob man doch zuerst noch eine Abklärung trifft und mit der KI die Optionen diskutiert (discuss-Funktionalität). So wird das Nützliche (Tokens sparen) mit dem Vernünftigen (think first – build later) kombiniert. Nichtsdestotrotz werden Änderungen innerhalb von Minuten und nicht Stunden oder Tagen umgesetzt.
- Debugging: Der Requirements Engineer hatte zuerst die KPI-Monatsdatei erzeugt und wollte dann die monatlichen Massnahmen ergänzen. In der naiven Annahme, dass die KI menschliche Intelligenz mitbringt, hat er die beiden Datenmengen in der gleichen Datei kombiniert. Um der KI zu helfen, wurde die komma-separierte CSV-Datei mit XML-Tags ergänzt:
<KPIs>
id, name, wert
kpi01, abc, 17.3
kpi02, xyz, 3.0
…
</KPIs>
<Massnahmen>
id, massnahme
m1, tuediesunddas
…
</Massnahmen>
Bolt.new erzeugt z. B. Javascript-Code und nutzt gängige Parsing-Funktionen. Die können mit dieser Syntax nichts anfangen, so dass partout keine Daten geladen wurden. Im ‘discuss’-Modus konnte Bolt.new dazu befragt werden und so erhielt man die entscheidenden Hinweise, dass die Datei zu bereinigen sei. Nach der entsprechenden Anpassung funktionierte die Datenbeladung der Prototyp-Applikation stabil.
Die Erfahrung zeigt: Bolt.new eignet sich hervorragend für schnelle Proof-of-Concepts, Hackathons oder frühe Kundendemos. Mit dem gleichen Aufwand wie früher erhält man so einen voll funktionsfähigen, high-fidelity Prototypen.
Hinweis: Für den Bau der fertigen Applikation ist weiterhin ein erfahrener Entwickler nötig, der die generierten Ergebnisse überprüft, ggf. übernimmt und in die Umgebung des Kunden integriert.
Neuste Features von Miro AI
Auch Miro AI entwickelt sich rasant. Zu den neuen KI-Funktionen zählen:
- Ideation Support: KI ergänzt Post-its automatisch, clustert Ideen und schlägt Kategorien vor.
- Journey Mapping: Aus Textbeschreibungen werden automatisch User Journeys oder Flows erstellt.
- Prototyp-Generator: Gib der KI ein paar Anforderungen auf Post-its auf der Fläche im Miro und dein high-fidelity Prototyp (bzgl. visueller Wiedergabetreue) wird im Handumdrehen automatisch erzeugt.
- Sprachunterstützung: Inhalte können mehrsprachig übersetzt oder zusammengefasst werden.
Miro AI richtet sich klar an Business-Analysten, UX-Designer und Workshop-Moderatoren. Diese Applikation hilft, die frühe Phase der Anforderungserhebung effizienter zu gestalten, ohne dass tiefe technische Kenntnisse erforderlich sind. Dazu werden die Elemente genutzt, die in Miro erstellt und auf der unendlichen Fläche angelegt werden. So können zu einem Prompt, der eine Liste von Anforderungen erzeugen soll, auch mittels Maus die entsprechenden Post-its selektiert und mitgegeben werden.
Hier ist eine Präsentation des Herstellers (Miro) für das IREB (in Englisch).
Fazit
Prototyping mit KI ist heute schon Realität. Für Requirements Engineers und Business Analysts eröffnen sich neue Möglichkeiten:
- Mehr Geschwindigkeit in der frühen Phase der Anforderungsaufnahme durch KI-Prototyping
- Neue Kollaborationsformen durch visuelle KI-Prototyping-Tools wie Miro
- Nahtlose Übergänge von Prototyp zu Produkt mit Coding-orientierte Tools wie Bolt.new
- Experimentierfelder für den Einsatz von Agenten, die mittelfristig grosse Teile der Entwicklungsarbeit übernehmen könnten
Gleichzeitig bleibt unsere Rolle wichtig: KI ersetzt nicht das Requirements Engineering, sondern ergänzt es. Wir müssen Anforderungen klar strukturieren, die richtige Tool-Kategorie auswählen und Stakeholder durch den Prozess führen. Nur so entfalten Prototypen mit KI ihren vollen Nutzen.