Aktuell bester Workflow für KI-gestütztes Produktdesign (Mär 2026

Schritt 0: Wissen, was Sie bauen wollen

Natürlich. Mit diesen neuen Tools wird deutlich, wer wirklich klar denken kann und wer einen Problemraum auf tiefer Ebene versteht.

Schritt 1: Entwerfen Sie einige davon in Figma

Warum: KI-Codierungswerkzeuge sind im visuellen Handwerk nicht gut.

Schritt 2: Haben Sie ein Design-System

Warum: weil Sie Konsistenz benötigen, um klar mit den KI-Systemen zu kommunizieren

Schritt 3: Erstellen einer ersten Prototyp-Iteration in Figma Make

Warum: Weil es schnell anfängt, einfach ist und auf einige Stile im Designsystem verweist.

Warum nicht in Figma bleiben: Es ist langsam zu iterieren, kann nicht mit großen Arbeitsstücken umgehen, hält sich nicht an Stile, wie ich es gerne hätte, und Sie können keine Kommentare zu den Prototypen hinterlassen, wenn Sie sie mit Benutzern teilen (WTF?).

Schritt 4: Export Code aus Figma Make und in VSCode

Warum: Schneller, flexibler, kann größere Arbeitsstücke gleichzeitig verarbeiten als Figma Make. Immer noch nicht gut darin, visuelle Handwerksanweisungen zu befolgen.

Schritt 5: Iterieren Sie hin und her mit VSCode und Figma MCP

Gehen Sie zurück in Figma, wechseln Sie in den Dev-Modus.

Was auch immer die KI visuell nicht wie vorgesehen erstellt hat, klicken Sie im Figma-Design auf dieses Element, kopieren Sie die MCP-Eingabeaufforderung für dieses bestimmte Element und fügen Sie es in VSCode ein. Das funktioniert die meiste Zeit.

Was dies nicht löst:

Die von den KI-Tools generierten Prototypen verweisen immer noch nicht ordnungsgemäß auf Design-Token und -Komponenten aus Ihrem Designsystem. Dies macht die Zusammenarbeit mit design-dev schwierig und erfordert danach einige Aufräumarbeiten. Dies ist jedoch nur wichtig, wenn Sie in skalierten Teams arbeiten. Die Geschwindigkeit erhöht Ihren Gewinn, indem Sie auf diese Weise die meisten Nachteile ausgleichen.

Beispiel:

Errichtete dies bei der Arbeit mit diesem Prozess. Auf der rechten Seite wurde ein Kommentarmodul hinzugefügt, in dem Sie Kommentare hinterlassen können (weil Sie dies in den Code-Prototypen von Figma Make eigentlich nicht tun können).