Erklärung der Shuffle AI-Funktionen
Das KI-unterstützte Design von Shuffle ist das Hauptmerkmal, das es von herkömmlichen Editoren unterscheidet, und wird auf zwei Arten umgesetzt:
1. natürliche Sprache erzeugen
Nach dem Öffnen des Dialogfelds des KI-Assistenten in der linken unteren Ecke des Editors können Benutzer spezifische Designanforderungen eingeben. Geben Sie z. B. ein: "Erstellen Sie eine violette Navigationsleiste mit einer Schaltfläche für die Mitgliederanmeldung", und KI wird automatisch Komponenten generieren, die die Anforderungen auf der Grundlage der Beschreibung erfüllen. Um die Genauigkeit der Generierung zu verbessern, empfiehlt es sich, die folgenden Elemente einzubeziehen:
- Komponententypen (z. B. Karten/Navigation/Formulare usw.)
- Farbvorliebe
- Funktionale Anforderungen (z. B. Reaktionsfähigkeit/Schwankungseffekte usw.)
- Inhaltsstruktur (z. B. Titel + Beschreibung + Schaltflächen)
2. die Umwandlung des Musters
Es unterstützt das Hochladen von Designs im PNG/JPG-Format, und AI analysiert die Layoutstruktur und die visuellen Elemente im Bild, um automatisch die entsprechenden HTML-Komponenten zu generieren. Dieses Verfahren ist besonders geeignet:
- Schnelle Umwandlung der vom Designer bereitgestellten Mockups in bearbeitbaren Code
- Reproduzieren Sie die Funktionsmodule des Referenzstandortes
- Handhabung von sich stark wiederholenden Standardkomponenten (z. B. Merchandising-Display-Karten)
Die generierte Komponente behält die vollständige Tailwind-CSS-Klasse bei, und Parameter wie Abstände, Farbwerte usw. können über das Eigenschaftsfeld auf der rechten Seite weiter angepasst werden.
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