Die Generierung von UI-Komponenten mit Magic Patterns gliedert sich im Wesentlichen in die folgenden Schritte:
- Auswahl des EntwurfssystemsOption, ein Designsystem (z. B. Material UI) zu verwenden oder ein benutzerdefiniertes Designsystem zu importieren
- EingabeaufforderungJe detaillierter die Beschreibung ist, desto besser werden die Ergebnisse generiert.
- Hochladen von Referenzinhalten (optional)Sie können ein Referenzbild oder eine Figma-Datei hochladen, indem Sie auf "Bild hochladen" oder "Figma importieren" klicken.
- Vorschau generierenKlicken Sie auf die Schaltfläche "Generieren". Die KI generiert die UI-Komponente in wenigen Sekunden, die Sie im Vorschaufenster rechts sehen können.
- Redaktionelle Anpassungen: Layout, Farben und Schriftarten anpassen und React-Code über die Code-Tabs anzeigen und bearbeiten
- ExportierenExport als Figma-Datei oder direkter Download von React-Code
Wichtig: Komplexe Benutzeroberflächen erfordern möglicherweise eine schrittweise Generierung einzelner Komponenten, bevor sie kombiniert werden können. Jeder Generierungsvorgang verbraucht einen Credit, die Fehlergenerierung oder Fixierung mit AI jedoch nicht.
Diese Antwort stammt aus dem ArtikelMagic Patterns: KI-Tools zur schnellen Generierung von Benutzeroberflächen-DesignsDie