Was ist Vibe Prototyping?

Vibe Prototyping nutzt KI-gestützte Tools, um schneller von der Idee zum interaktiven Prototyp zu kommen. Statt jeden Screen von Hand zu bauen, beschreibt man seine Vorstellung in natürlicher Sprache und iteriert gemeinsam mit der KI.

• The Vibe Coding Bakeoff for Generative AI Prototyping Tools
• Prototyping In a World of Vibe Coding – TeaCode

Tools

Figma Make

Der direkte Weg: Design in Figma, Prototyping mit KI.

• 8 Essential Tips for Using Figma Make

Lovable

Schwedisches Startup mit Figma-Integration – besonders für den Workflow Figma Design → funktionierender Prototyp.

• Lovable
• Figma to Lovable – Dokumentation

Magic Patterns

KI-Prototyping-Tool mit Figma Design Export.

• Magic Patterns
• Export to Figma

Google Stitch

Googles Gemini-basierte Beta für UI-Design – mit “Export to Figma Design”.

• Google Stitch
• Stitch – A New Way to Design UIs

Weitere Tools

• v0 by Vercel
• bolt.new
• Replit

HTML to Design

Figma Plugin, um Websites in Figma Design zu importieren. Nützlich im Workflow: In Figma Make das Ergebnis veröffentlichen, den Link kopieren und in Figma Design importieren.

• html.to.design
• Web Tab – Dokumentation
• Chrome Extension

Figma Make × Supabase

Für tech-affine Gestalter:innen: Figma Make Apps mit komplexeren Datenstrukturen verbinden – über eine Supabase Integration.

• Create a Supabase Backend Using Figma Make

Crowdfunding-Plattformen

Als Vorbereitung auf die finale Abgabe als fiktive Kickstarter-Kampagne:

• Kickstarter
• Indiegogo
• Startnext (deutsche Plattform)