Kürzlich haben viele Freunde mit geisteswissenschaftlichem Hintergrund versucht, Codex zu nutzen, um eigene Produkte zu entwickeln.
Die beiden vorherigen Artikel haben erklärt, wie man Codex verwendet; dieser konzentriert sich auf die praktische Anwendung: wie man damit ein WeChat-Miniprogramm erstellt.
Schauen wir uns zunächst das Ergebnis an. Dieses Mal haben wir ein Lese-Check-in-Miniprogramm namens "Eine Seite" erstellt. Unten ist die Laufoberfläche in den WeChat Developer Tools zu sehen.
Der gesamte Prozess von der Idee bis zum einsatzbereiten Miniprogramm lässt sich in diese Schritte unterteilen:
Figma-Prototyp-Design → Codex-Codegenerierung → Developer-Tools-Simulation → Mobile Vorschau → Einreichung zur Prüfung & Veröffentlichung.
Figma ist dafür zuständig, das Aussehen der Seiten und die Verlinkung der Schaltflächen zu bestimmen; Codex schreibt das Design in Code; die WeChat Developer Tools werden verwendet, um das Miniprogramm auszuführen, zu überprüfen und es auf ein Telefon zur Vorschau zu senden. Nachdem du dein eigenes Miniprogramm-Konto vorbereitet hast, reichst du es über das WeChat-Backend zur Prüfung ein und veröffentlichst es.
1. Was ist Figma und warum sollte man es zuerst verwenden?
Figma ist ein Tool für Oberflächendesign und Zusammenarbeit, das häufig verwendet wird, um Seiten für Apps, Websites und Miniprogramme zu gestalten. Designer nutzen es für Layout, Farben und Schaltflächen; Produktmanager verwenden es, um Abläufe zu besprechen; Entwickler sehen sich Designmaße, Abstände und Assets an, um die Seiten zu implementieren.
Es kann auch anklickbare Produktprototypen erstellen. Zum Beispiel kann eine Schaltfläche auf der Startseite mit einer anderen Seite verknüpft werden, sodass ein Klick einen Sprung auslöst. So kannst du im Voraus testen, ob sich die Bedienung flüssig anfühlt.
Genau das verwenden wir diesmal dafür. Bevor du Code schreibst, kannst du mehrere Seiten zusammen sehen und diskutieren, ob eine Schaltfläche gut platziert ist oder ob ein Bildschirm zu überladen ist.
Früher wurde dieser Designentwurf normalerweise einem Entwickler übergeben. Jetzt kannst du den bestätigten Entwurf an Codex geben, um den Code schreiben zu lassen. Designer können von ihrem vertrauten Figma aus starten; diejenigen, die bereits Codex verwenden, können es einen Entwurf erstellen lassen und ihn dann in Figma anpassen.
So wurde "Eine Seite" gemacht. Wir haben zuerst die drei Hauptseiten festgelegt – Bücherregal, Aufzeichnung und Statistik – und dann das Farbschema und Layout vereinheitlicht.
Dies ist die Designpräsentation. Cremeweiß wird für den Hintergrund verwendet, Dunkelblau für Text und Hauptschaltflächen und Hellgrün, um die aktuelle Aktion hervorzuheben. Die Startseite platziert das aktuell gelesene Buch an der prominentesten Stelle, während statistische Informationen auf einer separaten Seite untergebracht sind, um den Benutzer beim Öffnen nicht mit Zahlen zu überfordern.
Dieser Schritt betrifft den Gesamteindruck. Wenn du mit den Farben, Schriftgrößen und Seitenanordnungen zufrieden bist, fährst du fort.
2. Lass Codex einen Entwurf erstellen und den Prototyp in Figma vervollständigen
Auch wenn du keine Oberflächen zeichnen kannst, kannst du mit einer klaren Anforderung beginnen. Zum Beispiel wollte ich diesmal ein Lesetagebuch mit viel Weißraum, in dem ich das Buch sehen kann, das ich lese, den Fortschritt einfach notieren und meine Lesehistorie überprüfen kann.
Teile Codex deine Anforderungen und die visuelle Richtung zusammen mit:
1Ich möchte ein WeChat-Miniprogramm namens "Eine Seite" für Lese-Check-ins erstellen.2Bitte entwerfe zuerst drei Seiten: Bücherregal-Startseite, Leseaufzeichnung und Lesestatistik. Schreibe noch keinen funktionalen Code.34Der visuelle Stil sollte wie ein ruhiges Lesetagebuch sein:5Cremeweißer Hintergrund, dunkelblauer Text, hellgrüne Schlüsselbereiche, mit viel Weißraum.6Die Startseite sollte das gelesene Buch und den Einstiegspunkt für die Aufzeichnung hervorheben. Andere Seiten sollten denselben visuellen Stil beibehalten.7Verwende originelle geometrische Grafiken für Buchcover; verwende fiktive Inhalte für Beispielbücher.89Gib mir zuerst ein Vorschaubild der drei Seiten nebeneinander.10Gib auch drei unabhängige 390×844 SVG-Dateien aus, wobei Text, Grafiken und Schaltflächengruppierungen intakt bleiben, um sie in Figma weiter anzupassen. Bitte benenne die Hauptschaltflächen einzeln.
Die Anforderung einer SVG-Ausgabe ermöglicht es dir, das Design in Figma zu platzieren. SVG ist ein Vektorgrafikformat; in diesem Fall bietet der Import Text, Grafiken und Gruppen, die einzeln ausgewählt und angepasst werden können.
Nachdem du den Entwurf erhalten hast, ändere ihn, bis du zufrieden bist. Sei so spezifisch wie möglich mit Feedback, wie "verkleinere den Titel der Startseite ein wenig", "vereinheitliche Hauptschaltflächen auf Dunkelblau" oder "mache das Buchcover größer". Sobald alle drei Seiten zufriedenstellend sind, kümmere dich um die Prototyp-Interaktion.
Das Design in Figma einfügen
Öffne eine Figma-Design-Datei, klicke auf das "+" neben "Seiten" auf der linken Seite und erstelle eine neue Seite.
In diesem Beispiel wird der Import abgeschlossen, indem der SVG-Inhalt kopiert und auf die Figma-Leinwand eingefügt wird. Benenne die drei Zeichenflächen "01-Bücherregal-Startseite", "02-Leseaufzeichnung" und "03-Lesestatistik" und ordne sie horizontal an. Nachdem du eine Zeichenfläche ausgewählt hast, überprüfe die Breite und Höhe im Design-Panel auf der rechten Seite.
Wenn du Figma zum ersten Mal öffnest, identifiziere diese Bereiche: Ebenenliste auf der linken Seite, Leinwand in der Mitte, Design-Panel auf der rechten Seite für das Aussehen und Prototyp zum Einstellen von Interaktionen. Um Text oder eine Schaltfläche zu ändern, wähle sie zuerst in der Ebenenliste aus.
Denke daran, die Schriftarten nach dem Import zu überprüfen. Schriftarten können je nach Umgebung ersetzt werden, was die Zeilenumbrüche von Titeln und die Textbreite ändern kann. Die Schriftdarstellung im Designentwurf und im Miniprogramm unterschied sich diesmal, daher mussten sie separat überprüft werden.
Springe zu Schaltflächen hinzufügen
Nimm die "Weiterlesen"-Karte auf der Startseite als Beispiel. Wähle sie aus, wechsle oben rechts zu "Prototyp" und klicke auf das "+" neben "Interaktionen".
Stelle im sich öffnenden Interaktions-Panel diese drei Optionen ein:
- Auslöser: Wähle "Bei Klick".
- Aktion: Wähle "Navigieren zu".
- Ziel: Wähle "02-Leseaufzeichnung" (die Ziel-Zeichenfläche).
Die Speichern-Schaltfläche auf der Aufzeichnungsseite verlinkt zurück zur Startseite, und das Statistik-Symbol auf der Startseite verlinkt zur Statistikseite. Das Bild unten zeigt die Einrichtung für den Statistik-Einstieg.
Klicke oben rechts auf das Dreieck-Symbol "Präsentieren", um die Prototyp-Demo zu öffnen. Klicke dich von der Startseite durch und zurück, um die Routen zwischen den Seiten zu testen.
Der Figma-Prototyp demonstriert die Sprünge; die tatsächliche Eingabe, das Speichern und die Datenaktualisierungen werden als Nächstes vom Miniprogramm-Code implementiert.
3. Das Design ist fertig; wo verwende ich MCP?
MCP wird bei dem Schritt verwendet, bei dem das Figma-Design an Codex übergeben wird. Sobald die Verbindung hergestellt ist, kann Codex die Designstruktur, Stile und Assets der ausgewählten Zeichenfläche lesen und die Implementierung basierend auf dem Designentwurf fortsetzen.
Wenn du bereits weißt, wie man Figma verwendet, und einen Entwurf bereit hast, kannst du direkt hier beginnen. Wähle die Zeichenfläche aus, die du implementieren möchtest, kopiere den Link, der die Knoteninformationen dieser Zeichenfläche enthält, und sende ihn an Codex, während die Figma-Verbindung aktiviert ist.
1Bitte lies den Designkontext und die Screenshots dieser Zeichenfläche über Figma MCP.2Erkläre zuerst die Seitenstruktur, Schriftgrößen, Farben, Abstände und Assets, die du gelesen hast.3Sage mir klar, wenn es Teile gibt, die du nicht lesen kannst; rate nicht.45Als Nächstes werden wir ein natives WeChat-Miniprogramm mit WXML, WXSS, JavaScript und JSON erstellen.6Bitte implementiere es gemäß diesem Tech-Stack und verwende vorhandene Stile und Assets aus dem Projekt wieder.7Vervollständige zuerst die Startseite und fahre mit den anderen Seiten nach Bestätigung fort.
Stelle sicher, dass du "natives WeChat-Miniprogramm" angibst. Die von Figma bereitgestellten Designinformationen müssen gemäß der Zielplattform implementiert werden; du kannst nicht einfach Webcode für ein Miniprogramm verwenden.
In diesem Beispiel wurde das Design über SVG in Figma importiert, und der Code folgt derselben Design-Datei und denselben Assets; MCP ist eine Möglichkeit, die Lücke zu schließen, wenn bereits ein Figma-Designentwurf existiert. Unabhängig von der Methode sollte das, was an Codex übergeben wird, ein bestätigtes Design sein.
4. Das Design in ein Miniprogramm schreiben
Öffne den Projektordner in Codex, platziere die Design-Dateien und Buchcover-Assets, und du kannst mit der Implementierung beginnen.
In diesem Schritt musst du neben der Angabe der Technologie klar sagen, was du erhalten möchtest: ein Projekt, das direkt in die WeChat Developer Tools importiert werden kann.
1Bitte vervollständige das native WeChat-Miniprogramm basierend auf dem bestätigten "Eine Seite"-Design.23Verwende WXML, WXSS, JavaScript und JSON.4Platziere den Code im Ordner "miniprogram" und stelle app.json und project.config.json bereit, um sicherzustellen, dass es direkt in die WeChat Developer Tools importiert werden kann.56Implementiere die Seiten Bücherregal, Leseaufzeichnung, Statistik und Buch hinzufügen.7Befolge das bestätigte Farbschema, Layout und die originalen Buchcover-Assets.8Speichere Daten vorerst lokal mit wx.setStorageSync und lese sie beim erneuten Öffnen.9Füge Eingabevalidierung, leere Zustände und Speicherfehler-Hinweise hinzu.1011Überprüfe den Code nach Fertigstellung und sage mir, welches Verzeichnis importiert werden soll und wie kompiliert wird.12Wenn es Elemente gibt, die ich konfigurieren muss, liste sie bitte separat auf.
In dem von Codex generierten Projekt verarbeitet WXML die Seitenstruktur, WXSS die Stile, JavaScript Klicks und Speichern, und JSON konfiguriert die Seitenpfade. Sobald du erkennst, was jede Datei tut, kannst du das gelieferte Verzeichnis verstehen.
Lass dich hier nicht überwältigen; lass einfach Codex das Problem für dich lösen. Du musst den Code nicht verstehen; kopiere einfach die Prompts, füge deinen Designentwurf ein und ändere ihn in deinen eigenen Namen.
5. Füge es in die WeChat Developer Tools ein und sieh nach, ob es läuft
Nachdem du die WeChat Developer Tools installiert und angemeldet hast, wähle "Projekt importieren" aus dem Menü "Projekt" und suche den von Codex generierten Ordner "miniprogram".
Der Projektname kann beliebig sein. Die AppID ist die Identität dieses Miniprogramms: Du kannst das vom Tool bereitgestellte Testkonto für lokales Lernen verwenden, aber du musst zu deiner eigenen Miniprogramm-AppID wechseln, wenn du dich auf die Veröffentlichung vorbereitest. Wähle für dieses Beispiel "Keine Cloud-Dienste verwenden" für das Backend.
Klicke auf "Erstellen", betrete das Projekt und warte auf die Kompilierung. Sobald der Simulator auf der rechten Seite die Seite anzeigt, kannst du sie direkt mit der Maus bedienen. Nachdem Codex den Code geändert hat, kompiliere neu, um die Ergebnisse zu sehen.
Hier überprüfst du hauptsächlich drei Dinge: ob die Seiten verschoben sind, ob Schaltflächen zu den richtigen Seiten führen und ob der eingegebene Inhalt gespeichert werden kann. Schalte auch die Bildschirmgröße des Simulators um, um zu sehen, ob lange Titel, Eingabefelder und die untere Navigation zu eng sind.
Wenn Probleme auftreten, sende den Fehlertext oder Screenshot an Codex, zusammen mit dem, was du gerade getan hast und was du erwartet hast. Zum Beispiel:
1Dies ist ein Screenshot eines Fehlers in den WeChat Developer Tools.2Wenn ich von der Startseite zur Aufzeichnungsseite gehe, wird das Buchcover nicht angezeigt.3Bitte überprüfe den Bildpfad und den Seitenladezeitpunkt. Behebe es, während das bestehende Layout unverändert bleibt.
In diesem Fall hatten wir tatsächlich ein Problem beim Laden von Bildern: Der Code begann, die Bildadresse zusammenzusetzen, bevor die Seitendaten bereit waren, was dazu führte, dass der Name des Buchcovers im Pfad fehlte. Dem Code zu sagen, dass er warten soll, bis die Daten bereit sind, bevor das Bild angezeigt wird, löste das Problem.
Ähnliche Probleme erfordern nicht, dass du den Code von Grund auf studierst, aber du musst klar angeben, wo sie auftreten. Nach der Behebung kehre zum Simulator zurück, wiederhole die Bedienung und bestätige, dass alles wieder normal ist.
6. Vom Computersimulator zur mobilen Vorschau und Veröffentlichung
Sobald es auf dem Computer läuft, überprüfe es auf deinem Telefon.
Verwende eine AppID mit den entsprechenden Berechtigungen, klicke oben in den Entwicklertools auf "Vorschau", warte, bis der QR-Code generiert wurde, und scanne ihn dann mit einem berechtigten WeChat-Konto. Konzentriere dich auf die Schriftgröße auf dem Telefon, ob die Tastatur den Eingabebereich blockiert, wenn sie erscheint, und ob die unteren Schaltflächen leicht zu erreichen sind.
In diesem Beispiel werden Daten lokal gespeichert, daher werden Aufzeichnungen im Simulator nicht automatisch mit dem Telefon synchronisiert. Du musst Testinhalte auf dem Telefon erneut eingeben; wenn du in Zukunft Daten geräteübergreifend behalten möchtest, kannst du Cloud-Synchronisierung oder Backup-Funktionen hinzufügen.
Wenn du bereit bist, dass Freunde es ausprobieren, klicke oben in den Entwicklertools auf "Hochladen", gehe dann zum Miniprogramm-Backend der WeChat Official Accounts Platform. Gehe zur Versionsverwaltung, finde die entsprechende Entwicklungsversion, setze sie als Testversion und füge Testmitglieder hinzu. Testmitglieder benötigen entsprechende Berechtigungen.
Sobald die Verwendbarkeit bestätigt ist, reiche es im Backend zur Prüfung ein und veröffentliche es nach der Genehmigung. Fülle Kontoinformationen und Dienstkategorien gemäß den Backend-Anforderungen aus; du benötigst Codex nicht, um diese Kontooperationen für dich abzuschließen.
Dieses Beispiel hat die Phase erreicht, in der es in den Entwicklertools ausgeführt werden kann. Leser können mit ihren eigenen Miniprogramm-Konten mit der mobilen Vorschau, dem Hochladen und der Einreichung zur Prüfung fortfahren.
Den gesamten Prozess verbinden
Verwende zuerst Figma, um Seiten und Schaltflächensprünge zu bestimmen, bis du mit dem Design zufrieden bist; übergib dann die Design-Datei oder den Zeichenflächen-Link an Codex, um es in ein WeChat-Miniprogramm zu schreiben; importiere es dann in die Entwicklertools, um es zu simulieren, auszuführen und auf Fehler zu überprüfen; zeige es schließlich auf einem Telefon in der Vorschau an und lade es hoch, prüfe es und veröffentliche es nach Bestätigung.
In Zukunft, ob du ein Check-in-Tool, eine Rezept-App oder andere kleine Dienstprogramme erstellst, kannst du diesen Arbeitsablauf befolgen. Wenn das Design nicht zufriedenstellend ist, gehe zurück zu Figma, um es anzupassen; wenn es ein funktionales Problem gibt, übergib die spezifische Bedienung und den Fehler an Codex und bestätige dann die Änderungsergebnisse in den Entwicklertools.
Ich bin Miles, ein KI-Algorithmus-Experte, der von einem großen Technologieunternehmen zu einem FDE gewechselt ist. Ich habe an Algorithmus-F&E, Optimierung und Bereitstellung sowie an Unternehmensschulungen gearbeitet. Folge mir @miles_mazy, um gemeinsam zu wachsen und gemeinsam Geld zu verdienen.
