Figma Design-System Landing

Was macht Figma Design-System Landing?

Übersicht

Verwandle einen vollständigen Landingpage-Brief in ein fertiges Figma-Design. Leite die kleinste sinnvolle Seitenstruktur aus dem Brief ab, ordne jede Anforderung dem autorisierten Design-System zu, erstelle ein lokales abgeleitetes Muster nur, wenn das System keine einzelne passende Komponente hat, und führe nach der Erstellung einen automatischen visuellen Polish-Durchlauf durch.

Dieser Skill entwirft in Figma. Er schreibt kein HTML, CSS, React, Next.js oder anderen Implementierungscode. Er bearbeitet oder veröffentlicht niemals die Quell-Design-System-Bibliothek.

Die autorisierte visuelle Sprache bleibt die Quelle der Wahrheit. Die einzigen bewussten Ausnahmen sind:

• ein lokal angewendetes Figma-Schriftart-Fallback, wenn die Design-System-Schriftart nicht verfügbar ist;
• eine lokale abgeleitete Komposition/Komponente, die aus genehmigten Design-System-Teilen und Figma-Primitiven erstellt wurde, deren visuelle Werte an Design-System-Stile oder -Variablen gebunden sind;
• ein leerer Asset-Slot, wenn weder das Design-System noch der Brief ein geeignetes Asset enthält.

Jede Ausnahme muss im Abschlussbericht sichtbar sein.

Routing: Basalam oder benutzerdefiniertes Design-System

Löse den Design-System-Pfad pro Landing-Durchlauf auf, bevor Figma- oder Mobbin-Operationen ausgeführt werden:

• BASALAM_MODE: Verwende die gebündelte Basalam-Quelle in diesem Paket. Fordere den Benutzer nicht nach einem Design-System-Link oder einem anderen Design-System auf.
• CUSTOM_DS_MODE: Verwende das vom Benutzer bereitgestellte Design-System oder den installierten Design-System-Skill.
• ROUTE_PENDING: Der Benutzer hat eine Landingpage angefordert, aber der Markenpfad ist noch nicht eindeutig.

Wenn der Brief explizit besagt, dass die Landingpage für Basalam ist, wähle BASALAM_MODE ohne erneute Nachfrage. Wenn er explizit eine andere Marke oder einen anderen Produktkontext nennt, wähle CUSTOM_DS_MODE. Wenn keines von beidem klar ist, frage genau:

این لندینگ برای باسلام است؟ بله / خیر

Nimm keine Figma- oder Mobbin-Änderungen vor, während der Pfad ROUTE_PENDING ist. Beschränke die Antwort auf den aktuellen Landing-Durchlauf; wenn sich der Brief oder die Marke ändert, löse den Pfad erneut auf.

Erstmalige Nutzung (Onboarding)

Nachdem der Pfad bekannt ist, sende beim ersten Aufruf in einer neuen Konversation, wenn der Benutzer noch nicht alle erforderlichen Eingaben bereitgestellt hat, eine kurze pfadspezifische Nachricht vor detaillierten Fragen oder dem Preflight:

• BASALAM_MODE:

  برای شروع بفرست: ۱) brief ۲) نود/فریم مقصد در Figma ۳) assetهای لازم، در صورت وجود.

• CUSTOM_DS_MODE:

  برای شروع بفرست: ۱) brief ۲) design system یا اسکیل آن ۳) نود/فریم مقصد در Figma ۴) assetهای لازم، در صورت وجود.

Wenn die Eingaben bereits vollständig sind, überspringe das Onboarding und führe den Preflight durch. Wiederhole dies nicht, nachdem der Benutzer die Eingaben bereitgestellt hat. Sammle weiterhin nur fehlende Details und gebe BLOCKED ohne Änderung zurück, wenn eine Voraussetzung noch fehlt.

Wann verwendet werden

Verwende diesen Skill, wenn der Benutzer eine in Figma entworfene Landingpage wünscht und Folgendes bereitstellt:

1. einen vollständigen Brief und dessen genehmigten Inhalt;
2. entweder BASALAM_MODE mit der gebündelten Quelle oder CUSTOM_DS_MODE mit einer expliziten, zugänglichen Figma-Design-System-Quelle;
3. ein genaues, bearbeitbares Figma-Ziel.

Mobbin ist ein optionales Recherche-Werkzeug, keine erforderliche Eingabe. Wenn ein konfigurierter Mobbin-MCP verfügbar ist, verwende ihn schreibgeschützt, um nahegelegene UX-Muster zu finden, bevor du ein fehlendes Muster erstellst. Wenn eine Mobbin-Recherche tatsächlich benötigt wird, aber kein konfigurierter, autorisierter Mobbin-MCP verfügbar ist, halte vor jeder Figma-Änderung inne und biete die unten beschriebene Verbindungsauswahl an. Nachdem der Benutzer sich für die lokale Fortsetzung entschieden hat – oder wenn ein verbundener Mobbin keine nützliche Übereinstimmung hat – fahre mit der lokalen UI/UX-Methode in diesem Skill fort.

Verwende diesen Skill nicht für Code, reine Textarbeit, Design-System-Erstellung, Quellbibliothekspflege oder eine uneingeschränkte visuelle Erkundung ohne autorisierte Figma-Quelle und -Ziel.

Erforderliche Eingaben

Behandle leere, unbekannte, TBD, mehrdeutige, unzugängliche oder widersprüchliche Werte als fehlend. Wähle nicht stillschweigend ein Ziel oder erfinde keine Geschäftstatsachen.

0. Pfad

Erfordere einen aufgelösten BASALAM_MODE oder CUSTOM_DS_MODE. Wenn der Pfad unbekannt ist, verwende ROUTE_PENDING, stelle die Basalam-Frage, nimm null Änderungen vor und warte auf die Antwort.

1. Brief

Erfordere:

• Produkt oder Dienstleistung und Angebot;
• Zielgruppe, Benutzerproblem, Bekanntheitsgrad und wichtige Einwände;
• Wertversprechen und unterstützte Vorteile;
• ein Conversion-Ziel und einen primären CTA;
• genehmigte Fakten, Behauptungen, Nachweise, Preise, rechtliche Texte und Abschnittstexte, wenn diese benötigt werden;
• erforderliche und verbotene Abschnitte, falls der Benutzer solche hat;
• Sprache, Schreibrichtung, angeforderte Breakpoints und Viewport-Größen;
• die beabsichtigte Rolle, das Seitenverhältnis oder den Inhaltsbedarf für jedes erwartete Bild, Symbol oder jede Illustration.

Verwende bereitgestellte Assets oder genehmigte Design-System-Assets, wenn verfügbar. Ein fehlendes visuelles Asset blockiert den Durchlauf nicht von selbst: Es kann mit dem nächstgelegenen erlaubten Material oder einem expliziten leeren Asset-Slot, wie unten beschrieben, gelöst werden.

Entwerfe normale Interface-Kopie nur, wenn der Brief dies explizit erlaubt und die bereitgestellten Fakten ausreichend sind. Erfinde niemals Behauptungen, Nachweise, Preise, Testimonials, rechtliche Sprache oder Geschäftstatsachen.

2. Design-System-Quelle

In BASALAM_MODE löse die gebündelte Quelle nur aus diesen paketrelativen Pfaden auf:

• references/basalam-design-system/manifest.json
• references/basalam-design-system/BASALAM-RULES.md
• references/basalam-design-system/kit/
• assets/basalam-design-system/fonts/

Überprüfe das Manifest, die erforderlichen Koordinationsdateien, relevanten Komponentenreferenzen und Schriftart-Assets vor der Figma-Änderung. Frage den Benutzer nicht nach einer Design-System-URL oder ersetze stillschweigend ein anderes System. Wenn das Bündel fehlt oder die Integritätsprüfungen nicht bestanden werden, gebe BASALAM_DEPENDENCY_MISSING mit den genauen fehlenden/beschädigten Pfaden zurück und nimm null Änderungen vor.

In CUSTOM_DS_MODE erfordere eine eindeutige Figma-Bibliothek/Datei-URL oder -Schlüssel mit Lesezugriff und identifizierbaren relevanten veröffentlichten Komponenten, Varianten, Variablen, Textstilen und Oberflächen-/Hintergrundstilen sowie allen verfügbaren Symbolen/Assets. Das Fehlen eines geeigneten Symbols oder Assets wird durch ASSET_NEAREST oder ASSET_SLOT behandelt; es macht die Quelle nicht von selbst ungültig. Erfordere das beabsichtigte Design/den Modus, wenn mehr als einer existiert.

Wenn der Benutzer in CUSTOM_DS_MODE einen installierten Design-System-Skill nennt, lade ihn zusammen mit diesem Skill. Ein Skill-Name ist nur ausreichend, wenn er eindeutig eine autorisierte Figma-Quelle auflöst; andernfalls melde die Quelle als fehlend.

Gebündelte Basalam-Quelle

Der Basalam-Pfad ist portabel: Das Paket enthält einen versionierten Snapshot der vom Benutzer bereitgestellten Basalam-Design-System-Regeln, Kit-Referenzen und Dana-Schriftdateien. Löse sie relativ zu diesem Skill-Paket auf; verwende niemals einen persönlichen absoluten Pfad und erfordere niemals einen separat installierten basalam-design-system-Skill für BASALAM_MODE.

Lies zuerst BASALAM-RULES.md und die beiden Koordinationsdateien in kit/, lade dann nur die für den Brief relevanten Komponenten-/Token-Referenzen. Das Bündel ist während eines Design-Durchlaufs schreibgeschützt. Sein Manifest zeichnet Herkunft, Snapshot-Datum, Dateigrößen und SHA-256-Hashes auf. Gebündelte Schriftarten sind Ressourcen, keine Erlaubnis, Schriftarten automatisch zu installieren; überprüfe ihre Verfügbarkeit in Figma und wende die dokumentierte Schriftartenrichtlinie an, wenn die Laufzeitumgebung Dana nicht sehen kann.

3. Figma-Ziel

Erfordere eine Figma-Design-Datei plus eine genaue bestehende Zielseite und einen Einfügeknoten/-rahmen, bereitgestellt als Knoten-URL oder gleichwertige Identifikatoren, mit Bearbeitungszugriff. Erstelle keine Ersatzdatei, -seite oder -ziel, wenn ein Teil fehlt.

Eine reine Datei-URL erfüllt diese Anforderung niemals. Wähle keine Standardseite aus, verwende nicht den Canvas-Root oder erstelle keinen Einfügerahmen. Melde die fehlende genaue Seite, den Einfügeknoten/-rahmen und jeden nicht verifizierten Bearbeitungszugriff als separate Lücken.

Unverhandelbare Grenzen

• Arbeite nur in Figma. Gib niemals Implementierungscode aus.
• Direkt zugeordnete visuelle Komponenten müssen eine Herkunft in der explizit autorisierten Design-System-Quelle haben.
• Eine lokale abgeleitete Komposition ist nur in der Zieldatei erlaubt. Ihre visuellen Kinder können autorisierte Design-System-Instanzen, veröffentlichte Varianten, Variablen, Textstile, Oberflächen-/Hintergrundstile, Symbole, genehmigte Assets und native Figma-Primitive wie Frame, Auto Layout, Text, Rectangle und Component sein.
• Jede visuelle Eigenschaft eines lokalen Primitivs muss an einen autorisierten Design-System-Token/Stil gebunden sein. Keine fest codierte Farbe, kein Verlauf, Overlay, keine Schriftgröße, Schriftstärke, Zeilenhöhe, kein Abstand, Radius, Schatten, Effekt oder willkürlicher visueller Wert ist erlaubt, außer der dokumentierten FONT_FALLBACK-Familienüberschreibung.
• Eine lokale abgeleitete Komponente darf niemals von einer autorisierten Instanz getrennt, in der Quellbibliothek veröffentlicht oder verwendet werden, um stillschweigend eine zweite Designsprache zu erstellen. Sie bleibt im Ziel und ihre Herkunft wird aufgezeichnet.
• Verwende niemals eine Drittanbieter-Bibliothek, ein externes Asset, ein handgezeichnetes Symbol, ein kopiertes Mobbin-Visual oder eine fremde Komponente.
• Mobbin-Ergebnisse sind nur UX-Referenzen. Interpretiere ihre Hierarchie, ihr Interaktionsmuster und ihre Komposition mit dem autorisierten Design-System; reproduziere keine gebrandete Gestaltung oder importiere ihre Assets.
• Erwähne Mobbin nicht und halte nicht dafür an, wenn jedes erforderliche Muster DIRECT_MAPPED ist. Installiere oder verbinde Mobbin niemals im Namen des Benutzers, es sei denn, er bittet explizit um Einrichtungshilfe.
• In BASALAM_MODE verwende nur die gebündelte Basalam-Quelle und ihre verifizierte Herkunft. Falle niemals stillschweigend auf ein benutzerdefiniertes oder nicht verwandtes Design-System zurück.
• Die primäre Design-System-Schriftart wird immer bevorzugt. Ein Schriftart-Fallback ist nur unter der unten stehenden Schriftart-Fallback-Richtlinie erlaubt.
• Hintergrund-Polish darf nur bestehende Design-System-Oberflächen-/Hintergrundstile verwenden. Erstelle niemals einen neuen Verlauf, ein Overlay, eine Farbe oder einen Hintergrundeffekt.
• Ändere während des Polish Pass keine Kopie, Behauptungen, Abschnittsreihenfolge, Abschnittsanzahl, CTA-Bedeutung oder bereitgestellte Assets.
• Bearbeite, veröffentliche oder verändere niemals die Quell-Design-System-Bibliothek.
• Erstelle niemals ein unvollständiges Design, während eine erforderliche Voraussetzung, ein Ziel, eine Berechtigung, ein Inhalt, ein Token oder ein gültiger Bauplan fehlt. Ein genehmigter leerer Asset-Slot ist eine explizite Ausnahme bei Fertigstellung, kein nicht gemeldetes Teil.

Konstruktionsmodi und Status

Verwende diese Begriffe in der internen Abdeckungskarte und im Abschlussbericht:

• DIRECT_MAPPED: Eine vorhandene autorisierte Design-System-Komponente/-Variante wird verwendet.
• DS_COMPOSED: Eine lokale Komposition oder lokale wiederverwendbare Komponente wird im Ziel aus autorisierten DS-Teilen und token-gebundenen Figma-Primitiven erstellt.
• ASSET_NEAREST: Das nächstgelegene erlaubte Asset aus dem Design-System oder dem Brief wird verwendet.
• ASSET_SLOT: Es existiert kein geeignetes Asset; ein leerer Ersatzslot wird mit DS-Layout-/Oberflächenregeln erstellt.
• FONT_FALLBACK: Die primäre DS-Schriftart ist nicht verfügbar, und eine zugängliche Figma-Schriftart wird angewendet, während die DS-Typografie-Metriken beibehalten werden.
• POLISH_COMMITTED: Der automatische Polish hat die Qualitätssicherung bestanden.
• ASSEMBLY_DELIVERED_POLISH_ROLLED_BACK: Die Erstellung ist gültig, aber der Polish ist nach zwei Versuchen fehlgeschlagen und wurde entfernt.
• AWAITING_MOBBIN_CHOICE: Referenzrecherche wird benötigt, Mobbin ist nicht verbunden, und der Benutzer hat nicht gewählt, ob er es verbinden oder lokal fortfahren möchte; es fand keine Änderung statt.
• MOBBIN_SKIPPED_BY_USER: Der Benutzer hat sich nach Feststellung der Nichtverfügbarkeit von Mobbin für die lokale UI/UX-Methode entschieden.
• ROUTE_PENDING: Der Landing-Markenpfad ist unbekannt und die Basalam-Frage wartet auf eine Antwort; es fand keine Änderung statt.
• BASALAM_MODE: Die gebündelte Basalam-Quelle ist für diesen Landing-Durchlauf ausgewählt.
• CUSTOM_DS_MODE: Eine vom Benutzer bereitgestellte Design-System-Quelle ist für diesen Landing-Durchlauf ausgewählt.
• BASALAM_DEPENDENCY_MISSING: Die gebündelte Basalam-Quelle oder ihre Integritätsanforderungen fehlen oder sind ungültig; es fand keine Änderung statt.
• BLOCKED: Eine Voraussetzung oder erforderliche Konstruktionsregel kann nicht erfüllt werden.

DS_COMPOSED, ASSET_SLOT und FONT_FALLBACK sind erlaubte, dokumentierte Ausnahmen. AWAITING_MOBBIN_CHOICE und ROUTE_PENDING sind temporäre Pausen, nicht BLOCKED. BASALAM_DEPENDENCY_MISSING ist ein Preflight-Stopp ohne Änderungen. Diese Status autorisieren keine willkürliche benutzerdefinierte Gestaltung.

Atomarer Preflight-Gate

Vor jeder mutierenden Figma-Operation führe einen vollständigen schreibgeschützten Preflight durch. Das Erstellen einer Datei, Seite, eines Rahmens, Knotens, einer Komponente, Instanz, eines Platzhalters oder eines Teilabschnitts zählt als Mutation.

Lade figma:figma-generate-design und figma:figma-use, bevor eine Figma-Lese- oder Schreiboperation ausgeführt wird. In BASALAM_MODE lade die gebündelten Basalam-Regeln und überprüfe das Manifest, bevor Komponenten aufgelöst werden; in CUSTOM_DS_MODE lade den benannten Design-System-Skill, bevor seine Quelle aufgelöst wird.

Validiere alle folgenden Punkte gemeinsam:

1. Der Pfad ist aufgelöst. In BASALAM_MODE sind das gebündelte Manifest, die erforderlichen Referenzen und die Schriftart-Assets vorhanden und gültig; in CUSTOM_DS_MODE ist die vom Benutzer bereitgestellte Design-System-Quelle explizit und erreichbar.
2. Der Brief enthält die erforderlichen Fakten, genehmigten Inhalte, CTA, Sprache/Richtung und Breakpoint-Anforderungen.
3. Die Zieldatei, Seite, der Einfügeknoten, der Dateityp und die Bearbeitungsberechtigung sind gültig.
4. Die Landing-Struktur kann abgeleitet werden, ohne Geschäftstatsachen zu erfinden.
5. Jeder ausgewählte Abschnitt, Breakpoint und erforderliche Zustand ist entweder DIRECT_MAPPED oder hat einen gültigen DS_COMPOSED-Plan.
6. Jeder DS_COMPOSED-Plan kann aus autorisierten DS-Teilen und token-gebundenen nativen Figma-Primitiven erstellt werden, ohne einen neuen Token, Stil, eine Komponentenbibliothek-Bearbeitung oder ein fremdes Asset.
7. Jedes erwartete Asset hat eines dieser Ergebnisse: bereitgestelltes/authorisiertes Asset, ASSET_NEAREST oder ASSET_SLOT.
8. Die primäre DS-Schriftart ist für jede erforderliche Schrift, Gewichtung und jeden Stil verfügbar; oder ein gültiger zugänglicher Figma-Fallback-Kandidat wurde identifiziert.
9. Bestimme, ob eine Mobbin-Recherche erforderlich ist. Notiere MOBBIN_NOT_NEEDED, wenn jedes erforderliche Muster DIRECT_MAPPED ist. Andernfalls notiere MOBBIN_USED, MOBBIN_SKIPPED_BY_USER, MOBBIN_ERROR, MOBBIN_NO_MATCH oder LOCAL_UX_METHOD. Wenn Mobbin benötigt wird, aber nicht verfügbar ist und der Benutzer noch keinen Pfad gewählt hat, verwende die Mobbin-Verbindungsauswahl unten, bevor READY zurückgegeben wird.

Erstelle eine Abdeckungstabelle vor der Änderung:

| Anforderung | Abschnittszweck | Konstruktionsmodus | DS-Kinder/-Primitive | Token/Stile | Inhaltsquelle | Asset-Status | Schriftart

...