Prototyping mit KI – Tools und Erfahrungsbericht

29.9.2025

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 Nutzungs­paradigmen 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
Wirkungsraum:
– Leading Indicators
Ereignisraum:
– Lagging 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.

Wir sind bereit für Ihren nächsten Schritt!

Sie möchten unsere Expertise nutzen und technologische Innovationen umsetzen?

Diese Webseite
verwendet Cookies

Cookies werden zur Benutzerführung und Webanalyse verwendet und helfen dabei, diese Webseite zu verbessern. Sie können hier unsere Cookie-Erklärung anzeigen oder hier Ihre Cookie-Einstellungen anpassen. Durch die weitere Nutzung dieser Webseite erklären Sie sich mit unserer Cookie-Richtlinie einverstanden.

Alle akzeptieren
Auswahl akzeptieren
Optimal. Funktionale Cookies zur Optimierung der Webseite, Social-Media-Cookies, Cookies für Werbezwecke und die Bereitstellung relevanter Angebote auf dieser Website und Websites Dritter sowie analytische Cookies zur Verfolgung von Website-Zugriffen.
Eingeschränkt. Mehrere funktionale Cookies für die ordnungsgemässe Anzeige der Website, z. B. um Ihre persönlichen Einstellungen zu speichern. Es werden keine personenbezogenen Daten gespeichert.
Zurück zur Übersicht

Sprechen Sie mit einem Experten

Haben Sie eine Frage oder suchen Sie weitere Informationen? Geben Sie Ihre Kontaktinformationen an und wir rufen Sie zurück.