Der integrierte KI-Design-Assistent von Shuffle ist die zentrale Innovation des Tools. Entwickler können die KI-Funktionalität auf zwei Arten auslösen: durch direkte Eingabe einer natürlichsprachlichen Beschreibung oder durch Hochladen eines Entwurfsbildes. Im natürlichsprachlichen Modus, z. B. durch Eingabe von "Erstellen Sie eine blaue Navigationsleiste mit einem Suchfeld", generiert das System Komponenten, die die Anforderungen auf der Grundlage des semantischen Verständnisses erfüllen und sich automatisch an das im Projekt verwendete Framework (z. B. Tailwind oder Bootstrap) anpassen.
Der Bilderkennungsmodus unterstützt das Hochladen von Designentwürfen im PNG/JPG-Format, und AI analysiert die Layoutstruktur und die visuellen Elemente im Bild, um die entsprechenden Codekomponenten zu erzeugen. Es wurde getestet, dass die Erkennungsgenauigkeit 85% oder mehr für mittelkomplexe Designentwürfe erreichen kann, was die Konvertierungszeit vom Design zum Code erheblich reduziert. Alle KI-generierten Komponenten bleiben vollständig editierbar, so dass Entwickler weiterhin Stilparameter oder Inhaltselemente anpassen können.
Die Funktion arbeitet mit einer inkrementellen Generierungsstrategie: Zunächst wird die Grundstruktur ausgegeben, und dann werden schrittweise detaillierte Stile hinzugefügt, so dass die Designer die Ergebnisse schrittweise überprüfen und optimieren können.
Diese Antwort stammt aus dem ArtikelShuffle: Drag-and-Drop-Editor für die schnelle Erstellung von Webvorlagen, mit Unterstützung für die Cursor-ErweiterungDie
