Magic Patterns Anleitung: vom Prompt zum Prototyp und Code

👁 113 Aufrufe

Magic Patterns verwandelt Beschreibungen oder Screenshots in editierbare Interfaces mit fertigem Code, an denen Teams gemeinsam auf einem Board arbeiten können. Diese Anleitung führt Sie vom ersten Prompt bis zum Code-Export und Figma-Projekt, basierend auf der offiziellen Magic Patterns Dokumentation.

Vorbereitung: Materialien bereitstellen

Magic Patterns liefert die besten Ergebnisse, wenn es eine Grundlage hat. Bereiten Sie Screenshots Ihres bestehenden Produkts vor, falls der neue Screen dazu passen soll, sowie eine Liste der Elemente, die darauf erscheinen müssen. Wenn Ihr Unternehmen ein Design-System im Repository oder auf einer Website hat, verbinden Sie es sofort, bevor Sie Screens generieren.

Es lohnt sich auch aufzuschreiben, für wen der Screen ist und was der Nutzer darauf tun soll. Diese eine Information verändert das Layout mehr als die Beschreibung von Farben.

Schritt 1: Der erste Prompt

Auf der Startseite sehen Sie ein großes Eingabefeld für den Prompt. In der Ecke ist ein Stil ausgewählt, standardmäßig der Basis-Stil. Für Skizzen mit geringerer Detailtiefe können Sie den Wireframe-Stil wählen, für fertige Screens bleiben Sie beim Standard. Sie beschreiben, was entstehen soll, zum Beispiel einen Registrierungsscreen mit Feldern für Name, E-Mail und Passwort sowie einem Button für Google-Login.

Statt einer Beschreibung können Sie einen Screenshot eines bestehenden Interfaces hochladen, und Magic Patterns erstellt es als editierbares Projekt nach.

Schritt 2: Einzelne Elemente korrigieren

Das ist die Funktion, die am meisten Zeit spart. Sie klicken ein einzelnes Element an, zum Beispiel einen Button oder eine Überschrift, und geben einen Prompt nur für dieses Element. Die KI ändert dieses Element und lässt den Rest des Layouts unberührt. Sie müssen nicht den gesamten Screen neu beschreiben, um die Farbe eines einzelnen Buttons zu ändern.

Bei größeren Änderungen gibt es einen Planungsmodus, in dem Sie zunächst mit dem Agenten abstimmen, was sich ändern soll, bevor Code entsteht.

Schritt 3: Screens zu einem Prototyp verbinden

Mehrere Screens können Sie zu einem klickbaren Prototyp verbinden. Sie aktivieren den Prototyp-Modus über die Toolbar unten oder mit der Taste P, fahren über ein Element, bis es blau hervorgehoben wird, klicken es an und dann den Screen, zu dem es führen soll. Mit dem Play-Icon starten Sie den Prototyp und durchlaufen ihn wie ein Nutzer.

Schritt 4: Code exportieren

Der Button Export oben rechts ermöglicht es, den gesamten Code als Archiv herunterzuladen, mit GitHub zu synchronisieren oder das Projekt zu Figma zu senden. Magic Patterns generiert Code in React, Vue oder mit Tailwind. Wenn Sie in Cursor arbeiten, können Sie es über MCP mit Magic Patterns verbinden und darum bitten, einen Prototyp in Ihrem Projekt nach dessen Konventionen zu erstellen.

Schritt 5: Export zu Figma

Nach Auswahl des Figma-Exports warten Sie, bis das Projekt vorbereitet ist, klicken auf Copy und fügen es in Figma ein. Das Projekt erscheint auf dem Board. Der Export ist ein Snapshot dessen, was auf dem Screen zu sehen ist, wenn Sie also ein geöffnetes Menü in Figma haben möchten, öffnen Sie es vor dem Export.

Schritt 6: Eigenes Design-System

Magic Patterns kann im Stil Ihres Unternehmens arbeiten. Sie verbinden ein GitHub-Repository, ein npm-Paket oder eine laufende Website, und das Tool liest Farben, Typografie und Komponenten aus. Neue Screens entstehen dann in Ihrem Stil, nicht im Standard-Stil. Ein bestehendes Projekt können Sie mit dem Konvertierungs-Button auf ein anderes System umstellen, der eine neue Version erstellt und das Original belässt.

Beispiel: Neuer Screen in einer App in einer Stunde

Das Team benötigt einen Konto-Einstellungen-Screen. Die Designerin lädt einen Screenshot des aktuellen Profil-Screens hoch, um den Stil beizubehalten, und beschreibt die neuen Sektionen: persönliche Daten, Benachrichtigungen, Konto löschen. Sie korrigiert zwei Elemente mit separaten Prompts, verbindet den Screen mit dem Profil zu einem Prototyp und zeigt ihn dem Team. Der Entwickler erhält den Komponenten-Code, die Designerin die Figma-Version für die Dokumentation.

In diesem Beispiel spart das Hochladen des Screenshots eines bestehenden Screens am meisten Zeit. Der neue Screen passt von Anfang an zum Rest der App, sodass keine manuelle Anpassung mehr nötig ist. Wenn das Unternehmen ein Design-System verbunden hat, ist das Ergebnis noch besser, weil das Tool direkt die Komponenten nutzt, die das Entwickler-Team verwendet, und nicht nur deren Aussehen im Screenshot.

Häufige Fehler

• Den gesamten Screen neu beschreiben statt ein einzelnes Element zu korrigieren.
• Export zu Figma mit geschlossenen Menüs, die sichtbar sein sollten.
• Arbeit ohne Design-System, wodurch jeder Screen anders aussieht.

Wie Sie den ersten Prototyp bewerten

Zeigen Sie den Prototyp jemandem, der nicht an seiner Erstellung beteiligt war, und bitten Sie um die Ausführung einer Aufgabe, zum Beispiel das Ändern des Passworts. Geben Sie keine Hinweise. Die Stelle, an der die Person zögert, ist die Stelle zur Verbesserung, und die korrigieren Sie mit einem Prompt auf einem einzelnen Element.

Prüfen Sie auch den Code, bevor Sie ihn an den Entwickler weitergeben. Sind die Komponenten verständlich benannt, stimmt der Stil mit dem Rest des Projekts überein, gibt es überflüssige Elemente. Ein paar Minuten Review sparen Stunden an Korrekturen auf Seiten des Teams.

// weiterlesenWan 3.0 Prompts: Kamera, Werbung, Dialog und AnimeAnleitungenOdyssey-3 im Test: Weltmodell per Prompt in EchtzeitKI-WerkzeugeKling 4.0 Omni Reference: Bewegung, Figuren und PromptsKI-Werkzeuge