Warum sehen viele KI-Designentwürfe gut aus, sind aber nur schwer umzusetzen? TRAE Work Design bietet eine neue Lösung.

AI-Design-Tools können zwar schöne Seiten generieren, scheitern aber oft daran, "wirklich einsetzbar zu sein" – unzureichende Standards, Änderungen, die das gesamte Design verändern, und die Notwendigkeit, die Lieferung neu zu organisieren und zu markieren. Das Design-Modul von TRAE Work versucht, diese Lücke zu schließen: Zunächst lässt man die AI das Design-System verstehen und dann generieren, wählt gezielt lokale Bereiche aus und modifiziert sie präzise, übernimmt den Kontext der Anforderungen und exportiert schließlich in Figma und Code. Es geht nicht darum, "schneller Bilder zu erstellen", sondern darum, dass Designentwürfe von einmaligen Vorschau-Bildern zu änderbaren, kollaborierbaren und lieferbaren Produkten werden.

In den letzten zwei Jahren haben Sie sicherlich viele AI-Design-Tools kennengelernt.

Geben Sie einen Satz ein, und nach einigen Sekunden wird eine Seite generiert;

Laden Sie eine Anforderung hoch, und Sie erhalten schnell mehrere UI-Konzepte;

Sogar ohne Designkenntnisse können Sie ein scheinbar komplettes Produktinterface erstellen.

Beim ersten Gebrauch ist diese Erfahrung wirklich beeindruckend.

Aber wenn wir diese Designentwürfe tatsächlich nutzen möchten, treten schnell Probleme auf.

Einige Seiten sehen zwar gut aus, entsprechen aber nicht den ursprünglichen visuellen Standards des Teams. Manchmal möchte man nur ein Element anpassen, aber die AI ändert die gesamte Seite. Wenn man endlich ein zufriedenstellendes Design erreicht hat, muss man es noch neu organisieren, markieren und die Interaktionen beschreiben, bevor man es an die Entwicklung weitergeben kann.

Das hat mich allmählich dazu gebracht, zu erkennen, dass das eigentliche Problem bei AI-Design ist: Können die generierten Designentwürfe tatsächlich in der Produktion eingesetzt werden?

Als ich hörte, dass TRAE SOLO kürzlich zu TRAE Work aktualisiert wurde und das Design-Modul vollständig verfügbar ist, habe ich sofort ein echtes Projekt damit durchgespielt.

Nach der Verwendung habe ich festgestellt, dass das Design-Modul von TRAE Work nicht einfach eine "AI-Bildgenerierung" hinzufügt, sondern versucht, das Design in einen vollständigen AI-Arbeitsfluss zu integrieren: Von der Anforderungskontext bis zur Designgenerierung, von der Bearbeitung auf der Leinwand bis zur Prototypinteraktion und schließlich zur Lieferung in Figma, Code und Code-Modul. Dadurch wird AI-Design nicht mehr auf einmalige Generierung beschränkt, sondern wird zu einem fortsetzbaren Produktionsschritt.

Das ist der wirklich interessante Aspekt dieser Aktualisierung.

TRAE Work Design-Modul füllt eine entscheidende Lücke im AI-eigenen Arbeitsfluss

Um zu verstehen, warum das Design-Modul nicht nur eine neue Funktion ist, muss man es nicht nur daran messen, ob es Seiten generieren kann, sondern in den gesamten Produktarbeitsfluss einbetten.

In der Vergangenheit haben wir AI-Tools eher für einzelne Aufgaben verwendet: Code schreiben, eine Seite generieren, eine Anforderung organisieren oder schnell einen Prototyp erstellen. Jeder Schritt scheint effizient zu sein, aber sie sind oft voneinander getrennt.

Aber die tatsächliche Produktentwicklung besteht nicht aus einzelnen unabhängigen Aufgaben.

Eine Produktseite von der ersten Idee bis zur endgültigen Veröffentlichung durchläuft normalerweise die Phasen der Anforderungsanalyse, der Informationsstrukturierung, des visuellen Designs, der Prototypkommunikation, der Codeimplementierung und der anschließenden Iteration. Jeder Schritt übernimmt Informationen aus dem vorherigen und beeinflusst die Entscheidungen im nächsten.

Das Problem ist: Wenn diese Aufgaben auf verschiedene Tools verteilt sind, gehen Informationen beim Wechsel zwischen den Tools verloren.

Der Hintergrund, den der Produktmanager in der Anforderungsdokumentation bereits erklärt hat, muss im Design-Schritt erneut erläutert werden; die Interaktionslogik, die im Designentwurf bereits festgelegt ist, muss im Entwicklungsschritt erneut synchronisiert werden. Viele Zeit wird nicht für die eigentliche Kreativität und Entscheidungsfindung aufgewendet, sondern für das Kopieren von Informationen, das Ergänzen von Hintergrundinformationen und das ständige Abgleichen.

Deshalb liegt der Wert des TRAE Work Design-Moduls nicht nur darin, die Produktionsverwendbarkeit von AI-Designentwürfen zu verbessern. Aus Sicht des gesamten Arbeitsflusses hat es auch die wichtige Funktion, den bisher getrennten Design-Schritt zwischen Anforderung und Entwicklung wieder zu verbinden.

Durch die drei Modi Work, Design und Code werden die Anforderungsanalyse, die Designgenerierung, der Prototypaufbau und die Codeimplementierung in einen einzigen Produktionsprozess integriert, was die Verbindung zwischen den verschiedenen Schritten direkter macht.

Bei dieser Verwendung habe ich zunächst im Work-Modul die Analyse der Wettbewerber und des Marktes durchgeführt und TRAE eine PRD für die MVP-Version generieren lassen. Dann habe ich in das Design-Modul gewechselt und direkt auf der Grundlage dieser PRD den Designentwurf generiert. Nach der Anpassung des Designs habe ich schließlich im Code-Modul den Code generiert.

Durch diesen gesamten Prozess kann man direkt sehen, dass TRAE Work die Anforderungen, das Design und die Entwicklung in ein einziges Produktframework integriert, was den Wechsel zwischen den verschiedenen Phasen direkter macht.

Aber das Verbinden des Prozesses ist nur der erste Schritt. Der Schlüssel dafür, ob das Design-Modul tatsächlich in der Produktion eingesetzt werden kann, liegt darin, wie es die Probleme des Design-Standards, der fortgesetzten Bearbeitung und der anschließenden Lieferung löst.

Im Folgenden werde ich anhand meiner tatsächlichen Erfahrungen bei diesem Projekt näher darauf eingehen, wie das Design-Modul diese Probleme löst.

TRAE Work Design-Modul: AI generiert lieferbare Designprodukte

Ich denke, man kann die Produktidee des TRAE Work Design-Moduls in einem Satz zusammenfassen: Dialog ist Design, Leinwand ist Prototyp.

Es erfordert nicht, dass der Benutzer von einer leeren Leinwand ausgeht und Komponenten Stück für Stück zieht und die Seite aufbaut, noch lässt es die AI ein nicht weiter bearbeitbares Inspiration-Bild anhand eines Hinweissatzes generieren.

Im gesamten Prozess verhält sich die AI eher wie ein Design-Kollegen: Sie versteht zunächst die Anforderungen und das Design-System, generiert dann die Seite. Nach der Generierung kann sie weiterhin auf Feedback reagieren, Details anpassen, Interaktionen hinzufügen und das Endergebnis an die anschließenden Design- und Entwicklungsschritte übergeben.

Dies ist der am deutlichsten spürbare Unterschied bei meiner Verwendung des TRAE Work Design-Moduls. Es berücksichtigt viel stärker, wie wir Designentwürfe in realen Projekten nutzen.

1. Lassen Sie die AI zunächst das Design-System verstehen, statt direkt frei zu improvisieren

Das Problem vieler AI-Design-Tools liegt nicht darin, "nicht schnell genug" zu sein, sondern darin, "nicht stabil genug" zu sein.

Betrachtet man einzelne generierte Ergebnisse, können die Seiten schon recht komplett sein und ein gutes visuelles Erscheinungsbild haben. Aber wenn man mehrere Seiten zusammenstellt, fällt auf, dass die Button-Stile, die Kartenstrukturen, die Schriftgradhierarchie und die Farbverwendung nicht einheitlich sind.

Bei denselben Anforderungen kann das erste Mal ein Stil generiert werden, und nach ein paar Anpassungen ein anderer. Einzelne Seiten sehen gut aus, aber in einem Team-Projekt passen sie oft nicht zu den bestehenden Produktinterfaces.

Am Ende bleiben viele Designentwürfe, die Inspiration geben können, aber es gibt wenig, was tatsächlich verwendet werden kann.

Um dieses Problem zu lösen, bietet das TRAE Work Design-Modul drei Möglichkeiten, ein Design-Grundgerüst zu erstellen:

Erstens: Analysieren Sie vorhandene Figma-Dateien, damit die AI auf der Grundlage des Dateiinhalts ein entsprechendes Design-System generiert.

Zweitens: Importieren Sie direkt die bereits von Ihrem Team erstellte Design-Bibliothek, damit die folgenden Seiten gemäß den bestehenden Standards generiert werden.

Drittens: Wenn es keine vorhandenen Design-Ressourcen gibt, können Sie durch Stil-Exploration eine neue visuelle Sprache von der AI generieren lassen, die auf Ihrer Beschreibung basiert.

Diese Möglichkeiten decken die Anforderungen verschiedener Projekttypen ab. Alte Projekte legen Wert auf die Übernahme bestehender Standards, neue Projekte einer alten Marke müssen die Markenstimmung beibehalten und gleichzeitig neue Seitenausdrucksweisen erkunden, während neue Markenprojekte zunächst eine visuelle Richtung festlegen müssen, die der Markenposition entspricht, und dann auf dieser Grundlage die Seiten erweitern.

Im Vergleich zu einer freien Improvisation der AI von Anfang an ist diese Methode näher am realen Designprozess: Zunächst wird das Design-System festgelegt, und dann beginnt das Seiten-Design.

Ich habe für diese Verwendung ein neues Projekt genommen. Zuerst habe ich im Work-Modul eine PRD für die MVP-Version generiert und dann diese PRD an das Design-Modul übergeben, damit TRAE zuerst eine Stil-Exploration durchführt. Meine Anforderungen waren klar: Ich wollte, dass das Interface insgesamt technologischer wirkt.

Das generierte Design ist vollständiger als ich erwartet habe. Es behandelt die verschiedenen Zustände der Komponenten, die Modulstruktur und die Informationshierarchie auf der Seite relativ vollständig. Dies entspricht auch der Gewohnheit von menschlichen Designern, wenn sie Konzepte erstellen:

Es ist auch üblich, während des Designprozesses mehrere visuelle Richtungen zu erkunden. Deshalb habe ich auch versucht, TRAE den visuellen Stil von Claude zu referenzieren und eine weitere Version des Designentwurfs zu generieren. Insgesamt war das Ergebnis ziemlich stabil. Die AI hat den Stil von Claude gut verstanden und angewandt.

Dies ist der entscheidende Punkt des TRAE Work Design-Moduls. Es folgt eher einem Asset-first-Ansatz: Zuerst werden mit vorhandenen Design-Ressourcen, Design-Standards oder Stilrichtungen Einschränkungen festgelegt, und dann werden die konkreten Seiten generiert.

Wenn die AI die bestehenden Farb-, Schrift-, Komponenten- und Layoutregeln des Teams nicht versteht, kann die Kosten für die anschließende Vereinheitlichung und Korrektur desto höher sein, je schneller sie generiert. Nur wenn die AI das Design-System versteht, ist es wahrscheinlicher, dass die generierten Inhalte direkt in das bestehende Projekt integriert werden können, anstatt als einzelnes Inspiration-Bild zu bleiben.

2. Nach der Generierung kann weiterhin bearbeitet werden, AI-Designentwürfe sind nicht mehr einmalige Ergebnisse

Nachdem das Problem der "stabilen Generierung" gelöst ist, kommt das nächste Problem: "Können die generierten Entwürfe noch geändert werden?".

Ob AI-Design tatsächlich in den Produktionsprozess integriert werden kann, hängt nicht nur vom ersten Entwurf ab, denn auch wenn der erste Entwurf sehr schön ist, wird er selten direkt als endgültig festgelegt.

Im realen Designprozess ist die Änderung die Regel: Der Titel muss deutlicher sein, der Hintergrund muss einen anderen Stil haben, die Button-Hierarchie muss klarer sein, ein Modul muss neu angeordnet werden, ein Element muss einzeln geändert werden, und das gesamte Design muss noch näher an der Marke sein.

Viele AI-Design-Tools haben beim ersten Generieren gute Ergebnisse, aber sobald es um die Änderung geht, verschlechtert sich die Erfahrung schnell.

Der Benutzer möchte nur einen Button anpassen, aber die AI generiert die gesamte Seite neu; die zuvor festgelegte Layout und der Stil können auch bei der nächsten Änderung abweichen. Je mehr Änderungen vorgenommen werden, desto wahrscheinlicher ist es, dass das Ergebnis vom ursprünglichen Ziel abweicht.

Deshalb hängt es auch davon ab, ob ein von AI generierter Designentwurf tatsächlich verwendet werden kann, ob er im Anschluss kontinuierlich und präzise geändert werden kann.

Bei meiner Verwendung des TRAE Work Design-Moduls war ich von seiner Fähigkeit zur lokalen Bearbeitung beeindruckt.

Wenn die allgemeine Richtung bereits festgelegt ist, sind viele Anpassungen lokal. Zum Beispiel möchte man nur den Stil eines Buttons ändern, einen bestimmten Kartenbereich anpassen oder die Informationsdarstellung eines Moduls klarer machen.

Außer dass man direkt in der linken Konversation neue Anforderungen beschreiben kann, ist es bequemer, direkt auf der rechten Leinwand den Bereich auszuwählen, den man ändern möchte, und dann präzise anzupassen.

Zum Beispiel fand ich auf der Aufgabe-Einreichungsseite, dass der ursprüngliche Anhang-Upload-Eingang zu aufwändig war. Ich konnte einfach den entsprechenden Bereich auf der Leinwand markieren und TRAE meine Anpassungsanforderungen mitteilen. So wird der Änderungsbereich der AI klarer, es ist nicht erforderlich, die gesamte Seite neu zu generieren, und andere Bereiche werden nicht versehentlich verändert.