Prototyping mit KI – Tools und Erfahrungsbericht

29.9.2025

Warum Prototyping mit KI gerade jetzt spannend ist

Prototypen in Minuten statt Tagen – geht das wirklich? KI-Tools wie Bolt.new und Miro AI versprechen, Ideen blitzschnell in klickbare Prototypen zu verwandeln. Wir haben’s ausprobiert: Was funktioniert, wo stösst die KI an Grenzen – und wie lassen sich die Ergebnisse wirklich nutzen? In diesem Beitrag bekommst du:

1. eine Übersicht der spannendsten Tools & Kategorien,

2. unseren Erfahrungsbericht mit Bolt.new,

3. und eine Einschätzung, wie KI Prototyping verändert – heute und in Zukunft.

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 - wie KI aus Wireframes lauffähige Apps mit echten Daten macht

Aufgabenstellung

Baue einen Prototyp mit folgendem Ziel: Stelle Key Performance Indicators (KPIs) dar und hilf dem Benutzer, diese zu analysieren und Massnahmen abzuleiten.

Ausgangslage & Zielsetzung

Eine einzelne Geschäftskennzahl ist zwar interessant, gewinnt aber erst im Zusammenspiel mit weiteren Daten an Wert – z. B. durch:

  • Veränderungen über mehrere Monate
  • den Bezug zu anderen Kennzahlen
  • Vergleiche zwischen Kundengruppen oder mit Mitbewerbern

Aufgabe war es daher, einen Prototypen zu bauen, der:

  1. Sieben Monatsdateien (CSV) mit Kennzahlen einliest,
  2. eine Oberfläche bietet, in der ein Monat ausgewählt und die Kennzahlen visuell dargestellt werden,
  3. sowie beim Klick auf eine Kennzahl deren Verlauf in einem Liniendiagramm inkl. Zielgrössen anzeigt.

Ziel: Den Zusammenhang von Massnahmen (Handlungsraum) über Leading Indicators (Wirkungsraum) bis hin zu den Ergebnis-Kennzahlen (Lagging Indicators) sichtbar machen – und daraus Massnahmen ableiten.

Handlungsraum:
– Massnahmen
– Leading Indicators
Wirkungsraum:
– Leading Indicators
Ereignisraum:
– Lagging Indicators

Klassisches Vorgehen ohne KI

Ein Requirements Engineer hätte klassisch einen Wireframe-Prototyp erstellt – mit wenigen Beispieldaten und ohne Interaktion.

Ergebnis: Ein Low-Fidelity-Prototyp, der in allen drei Dimensionen limitiert bleibt:

  • Visualisierung nur als Skizze,
  • Datenumfang & -qualität sehr begrenzt,
  • Interaktivität kaum vorhanden.

Prototyping mit Bolt.new – neue Möglichkeiten durch KI

  • Alles im Browser: Keine Installation nötig, Prototypen sind sofort per Link ausführbar.
  • Realistische Daten: KI erzeugt automatisch umfangreiche, synthetische KPI-Daten.
  • Prompt-to-App: Eine kurze Beschreibung genügt – Bolt.new baut sofort eine lauffähige Anwendung.
  • Discuss & Build: Anforderungen wie mit einer Entwicklerin besprechen, dann per Klick umsetzen.
  • Schnelle Iterationen: Änderungen (z. B. Mouse-over-Texte oder Buttons) in Sekunden statt Stunden.
  • Daten, Code & Anforderungen: Alles lässt sich anpassen – von CSV-Dateien bis hin zum Code. Anforderungen können sogar automatisch aus dem Code abgeleitet werden.
  • Nutzbarer Code: Der Prototyp bleibt keine Spielerei – Entwickler:innen können direkt darauf aufbauen.

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.

- 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.

- 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>

Lizenzmodell von Bolt.new: In der Gratisversion stehen 1.2 Mio. Tokens zur Verfügung, jedoch mit einem Tageslimit von 150k. Das reicht meist für einen Prompt zum Bauen oder Umbauen der App. Läuft das Limit aus, beendet die KI den aktuellen Prompt trotzdem zuverlässig.

Bolt.new erzeugt z. B. Javascript-Code. Parsing-Probleme verhinderten zunächst den Datenimport, im discuss-Modus lieferte die KI jedoch den entscheidenden Hinweis zur Bereinigung – danach lief alles stabil.

Fazit: Bolt.new eignet sich ideal für schnelle Proof-of-Concepts, Hackathons oder frühe Kundendemos. Man erhält mit gleichem Aufwand wie früher einen voll funktionsfähigen High-Fidelity-Prototypen.

Hinweis: Für eine produktive Applikation braucht es weiterhin erfahrene Entwickler:innen, die Ergebnisse prüfen und integrieren.

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.