Magic Patterns tutorial: van beschrijving naar prototype en code

👁 117 keer gelezen

Magic Patterns zet een beschrijving of screenshot om in een bewerkbare interface met kant-en-klare code, en je team kan er samen aan werken op een gedeeld canvas. Deze tutorial leidt je van de eerste prompt tot code-export en Figma-integratie, gebaseerd op de officiële documentatie van Magic Patterns.

Voordat je begint: bereid materiaal voor

Magic Patterns geeft de beste resultaten als het iets heeft om op te bouwen. Bereid screenshots van je bestaande product voor als het nieuwe scherm erbij moet passen, en maak een lijst van elementen die erop moeten komen. Als je bedrijf een design system in een repository of op een website heeft, koppel dat dan meteen voordat je schermen gaat genereren.

Het loont ook om op te schrijven voor wie het scherm is en wat de gebruiker erop moet doen. Die ene informatie verandert de layout meer dan een beschrijving van kleuren.

Stap 1. Eerste prompt

Op de homepage zie je een groot veld voor je prompt. In de hoek is een stijl geselecteerd, standaard de basisstijl. Voor schetsen met minder detail kun je de wireframe-stijl kiezen, en voor afgewerkte schermen blijf je bij de standaard. Je beschrijft wat er moet komen, bijvoorbeeld een registratiescherm met velden voor naam, e-mail en wachtwoord en een knop om in te loggen via Google.

In plaats van een beschrijving kun je een screenshot van een bestaande interface uploaden, en Magic Patterns maakt er een bewerkbaar ontwerp van.

Stap 2. Aanpassingen van één element

Dit is de functie die de meeste tijd bespaart. Je klikt op één element, bijvoorbeeld een knop of kop, en geeft alleen voor dat element een instructie. De AI past dat element aan en laat de rest van de layout met rust. Je hoeft niet het hele scherm opnieuw te beschrijven om de kleur van één knop te veranderen.

Bij grotere wijzigingen is er een planningsmodus waarin je eerst met de agent afstemt wat er moet veranderen voordat de code wordt gegenereerd.

Stap 3. Schermen koppelen tot prototype

Meerdere schermen kun je koppelen tot een klikbaar prototype. Je schakelt de prototypemodus in via de werkbalk onderaan of met de P-toets, beweegt over een element tot het blauw oplicht, klikt erop en vervolgens op het scherm waarnaar het moet leiden. Met het afspeelpictogram start je het prototype en doorloop je het als gebruiker.

Stap 4. Code exporteren

De knop Export rechtsboven laat je alle code downloaden in een archief, synchroniseren met GitHub of het project naar Figma sturen. Magic Patterns genereert code in React, Vue of met Tailwind. Als je in Cursor werkt, kun je het via MCP koppelen aan Magic Patterns en vragen om een prototype te bouwen in je project, volgens de conventies ervan.

Stap 5. Exporteren naar Figma

Na het kiezen van export naar Figma wacht je tot het project klaar is, klik je op Copy en plak je in Figma. Het ontwerp verschijnt op het canvas. De export is een momentopname van wat op het scherm staat, dus als je een geopend menu in Figma wilt hebben, open het dan voor de export.

Stap 6. Eigen design system

Magic Patterns kan werken in de stijl van je bedrijf. Je koppelt een GitHub-repository, npm-pakket of werkende website, en de tool leest kleuren, typografie en componenten uit. Nieuwe schermen ontstaan dan in jouw stijl, niet in de standaardstijl. Een bestaand project schakel je over naar een ander systeem met de conversieknop, die een nieuwe versie maakt en het origineel behoudt.

Voorbeeld: nieuw scherm in een app binnen een uur

Het team heeft een instellingenscherm nodig voor accounts. De designer uploadt een screenshot van het huidige profielscherm om de stijl te behouden, en beschrijft nieuwe secties: persoonlijke gegevens, notificaties, account verwijderen. Ze past twee elementen aan met aparte instructies, koppelt het scherm aan het profiel in een prototype en toont het aan het team. De developer krijgt de componentcode, en de designer de Figma-versie voor documentatie.

In dit voorbeeld bespaart het uploaden van een screenshot van het bestaande scherm de meeste tijd. Het nieuwe scherm past meteen bij de rest van de app, dus het hoeft niet achteraf handmatig aangepast te worden. Als het bedrijf een design system heeft gekoppeld, is het effect nog beter, omdat de tool direct gebruikmaakt van de componenten die het ontwikkelteam gebruikt, niet alleen van hun uiterlijk op een screenshot.

Veelgemaakte fouten

• Het hele scherm opnieuw beschrijven in plaats van één element aanpassen.
• Exporteren naar Figma met gesloten menu’s die zichtbaar hadden moeten zijn.
• Werken zonder design system, waardoor elk scherm er anders uitziet.

Hoe je het eerste prototype beoordeelt

Toon het prototype aan iemand die niet betrokken was bij het maken ervan, en vraag om één taak uit te voeren, bijvoorbeeld het wachtwoord wijzigen. Geef geen hints. De plek waar ze aarzelen is de plek om te verbeteren, en dat pas je aan met een instructie voor één element.

Controleer ook de code voordat je die doorgeeft aan de developer. Zijn componenten begrijpelijk benoemd, klopt de stijl met de rest van het project, zijn er geen overbodige elementen. Een paar minuten review bespaart uren aan correcties bij het team.

// lees verderSupabase tutorial: eerste tabel, beveiliging en app-integratieHandleidingenAI voor leerlingen met extra ondersteuningsbehoeftenHandleidingenGTA 6 eerder spelen: Nieuw-Zeeland-truc voor Xbox en PS5Handleidingen