figma-generate-designZweck, Verwendung und Quelle

Was diese Fähigkeit bewirkt

Nutzen Sie diese Funktion zusammen mit figma-use, wenn es darum geht, eine Anwendungsseite, eine Ansicht oder ein Layout mit mehreren Abschnitten in Figma zu übertragen. Auslöser: „In Figma schreiben“, „In Figma aus Code erstellen“, „Seite in Figma übertragen“, „Diesen Code übernehmen“.app/pageund es in Figma erstellen“, „einen Bildschirm erstellen“, „eine Landingpage in Figma erstellen“, „den Figma-Bildschirm an den Code anpassen“. Dies ist die bevorzugte Workflow-Fähigkeit, wenn der Benutzer eine vollständige Seite, einen Bildschirm oder eine Ansicht in Figma anhand von Code oder einer Beschreibung erstellen oder aktualisieren möchte. Designsystemkomponenten, Variablen und Stile werden über search_design_system ermittelt, importiert und Bildschirme schrittweise Abschnitt für Abschnitt mithilfe von Designsystem-Tokens anstelle von fest codierten Werten zusammengesetzt.

Wie der vorgelagerte Workflow funktioniert

const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

Anforderungen und Einrichtung

Grenzwerte und Qualitätskontrollen

Aus dieser Datei wurde kein separater Grenzwertabschnitt ausgewählt. Dies bedeutet nicht, dass die Anwendung für jede Eingabe oder Umgebung geeignet ist. Überprüfen Sie den vollständigen Quellcode und validieren Sie Ihr Ergebnis selbst.

Beginnen Sie mit einem sicheren Testlauf

1. Prüfen Sie den unterstützten Host und die Installationsanweisungen für das Repository. Halten Sie das Skill-Verzeichnis und die darin enthaltenen Skripte, Assets und Dokumentationen zusammen;SKILL.mdEine Einzelperson kann Abhängigkeiten außer Acht lassen.
2. Geben Sie dem Agenten Ihre tatsächlichen Eingaben, die gewünschten Ausgaben und die Akzeptanzkriterien an. Aufrufsyntax und verfügbare Tools hängen vom Hostsystem ab; diese Website geht nicht von einem universellen Installationsbefehl aus.
3. Testen Sie den Quellworkflow in einem temporären Projekt oder auf einer Kopie. Überprüfen Sie Vorgänge, die Dateien, Remote-Dienste oder abrechnungsfähige Ressourcen ändern, bevor Sie diese zulassen.
4. Überprüfen Sie die Ausgabe anhand der Quellqualitätsprüfungen und Ihrer eigenen Anforderungen. Ein erfolgreicher Trigger oder eine hohe Anzahl von Sternen im Repository garantiert kein korrektes Ergebnis.

Spezifikation des Kompetenzformats und des Verzeichnisses ↗

Lesen Sie mehr dazu in der Quelle.

• Bildschirme aus dem Designsystem erstellen/aktualisieren
• Kompetenzgrenzen
• Voraussetzungen
• Paralleler Workflow mit generate_figma_design (nur Web-Apps)
• Erforderlicher Arbeitsablauf
• Schritt1Den Bildschirm verstehen
• Schritt2Designsystem entdecken – Komponenten, Variablen und Stile
• 2a: Komponenten entdecken
• 2b: Variablen ermitteln (Farben, Abstände, Radien)
• 2c: Stile entdecken (Textstile, Effektstile)
• Schritt3: Erstellen Sie zuerst den Seitenumbruchrahmen.
• Schritt4: Erstellen Sie jeden Abschnitt innerhalb des Wrappers
• Überschreiben Sie den Instanztext mit setProperties()
• Lesen Sie die Standardeinstellungen des Quellcodes sorgfältig durch.
• Was manuell erstellen vs. aus dem Designsystem importieren
• Schritt5: Vollbildmodus aktivieren
• Schritt6: Aktualisieren eines bestehenden Bildschirms
• Referenzdokumente
• Fehlerbehebung
• Bewährte Verfahren

Verwandte Fähigkeiten

• chatgpt-appsopenai/skills
• figmaopenai/skills
• figma-code-connect-componentsopenai/skills
• figma-create-design-system-rulesopenai/skills

Übersetzung und Umfang

Dieser Leseleitfaden wählt Passagen aus dem markierten stromaufwärts gelegenen Abschnitt aus.SKILL.mdDie Übersetzung wurde unterstützt. Es handelt sich weder um ein vollständiges Handbuch noch um eine Garantie für geprüfte Kompatibilität. Lesen Sie vor der Verwendung das Original und die darin referenzierten Dateien.

Diese Einleitung bezieht sich auf die unten angepinnte Version; die aktuelle Repository-Aktivität und der Erfassungszeitpunkt werden separat angezeigt.

Angeheftete Quelle

Lesen Sie das Original ↗

Quelle abgerufen

2026-10-29T09:32:23Z

Source-Commit

49f948faa9258a0c61caceaf225e179651397431

Quelle SHA-256

45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9