Figma Generate Librarydi OpenAI

Figma Generate Library Skill.

Parti dal modello dei token, poi costruisci componenti riutilizzabili in una sequenza controllata.

Figma
Design system
Librerie di componenti

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Figma Generate LibrarySKILL.md

Attività Figma Produce • Raccolte di variabili Figma, alias semantici e stili di testo o di effetto • Componenti riutilizzabili documentati con set di varianti controllati • Un registro di stato e una revisione finale di binding, nomi e aspetto visivo Prima di iniziare Figma MCP con accesso a file modificabili, accesso al repository e la Skill complementare figma-use più i riferimenti di supporto.

Sintesi editoriale · fonte revisionata 2026-10-07 · non è un esempio generato

01 Funzionalità

Costruisci una libreria Figma a partire dalle basi nel codice

Crea variabili e stili Figma prima dei componenti, con un registro di stato salvato e un'approvazione a ogni fase.

Flusso basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Figma Generate Library è un flusso di lavoro per design system in più fasi, non un generatore di schermate in un solo passaggio. Confronta il codice, il file Figma esistente e le librerie sottoscritte, poi blocca un ambito definito di token e componenti prima di scrivere. Variabili e stili vengono prima dei componenti, così le proprietà visive possono essere collegate a una base coerente.

La fonte dedica particolare attenzione allo stato di lunga durata: ID creati, nomi deterministici e un registro salvato permettono di riprendere il lavoro senza duplicare i nodi. Il lavoro sui componenti comprende layout delle varianti, proprietà di testo e booleane, sostituzione delle icone e documentazione. I controlli umani fanno parte del flusso, soprattutto quando codice e Figma non concordano; la Skill non decide in silenzio quale sistema debba diventare quello di riferimento.

Risultati attesi

Raccolte di variabili Figma, alias semantici e stili di testo o di effetto
Componenti riutilizzabili documentati con set di varianti controllati
Un registro di stato e una revisione finale di binding, nomi e aspetto visivo

Vedi il brief di esempio

Dal brief alla revisione

01
Individuare e bloccare l'ambito
Inventaria le risorse di codice e Figma, cerca nelle librerie e concorda l'esatto set iniziale di token e componenti prima della creazione.
02
Creare le basi
Costruisci variabili primitive e semantiche, modalità, ambiti e sintassi del codice, poi tipografia ed effetti. Ottieni l'approvazione delle basi, quindi crea la struttura della pagina e la documentazione delle basi e ottieni un'approvazione separata prima di iniziare i componenti.
03
Costruire i componenti in modo incrementale
Crea un componente alla volta con binding delle variabili, proprietà e documentazione. Convalida struttura e aspetto, mostra lo screenshot e ottieni l'approvazione prima di iniziare il componente successivo.
04
Riconciliare e verificare
Rivedi nomi, binding non risolti ed eventuali mappature Code Connect, usando gli ID registrati invece di tirare a indovinare o fare pulizie generalizzate.

02 Quando usarlo

Quando usarla

Figma MCP con accesso a file modificabili, accesso al repository e la Skill complementare figma-use più i riferimenti di supporto.

Adatta a

Allineamento tra codice e libreriaUtile quando i token e i componenti implementati richiedono un equivalente Figma mantenibile.
Riparazione controllata della libreriaAdatta a un'analisi delle lacune in cui alcune risorse possono essere riutilizzate, altre incapsulate e poche ricostruite.

Limiti da verificare

Non è un generatore a chiamata singolaLa fonte richiede esplicitamente un lavoro per fasi e punti di approvazione. Una grande libreria di componenti non va presentata come creabile in sicurezza in una sola operazione.
I conflitti richiedono decisioni di responsabilitàQuando codice e Figma differiscono, un responsabile di prodotto o di design deve decidere quale valore o contratto del componente debba prevalere.

Porta questi input

Inventari di codice e FigmaFornisci il repository e il file di destinazione modificabile, comprese le convenzioni esistenti per i token.
Ambito inizialeIndica le raccolte di token, le modalità e le famiglie di componenti necessarie per la prima versione utilizzabile.
Responsabilità della revisioneIndividua chi può approvare basi, componenti e conflitti tra i sistemi esistenti.

03 Decisioni importanti

Decisioni che contano

Alias semantici
La fonte separa i primitivi grezzi dai token semantici sensibili alla modalità, invece di duplicare i valori grezzi in tutti i componenti.
Creazione riprendibile
Un registro dei nodi salvato e nomi deterministici rendono più facile riprendere un lavoro sulla libreria interrotto senza creare duplicati.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Rivedi la configurazione

Usa l'intera cartella curata, inclusi gli script di supporto e i riferimenti delle fasi. Questi materiali Beta sono regolati dai Termini per sviluppatori di Figma. Considera le scritture su Figma e la pubblicazione della libreria come operazioni da autorizzare separatamente.

File sorgente upstream

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md

Figma MCP con accesso a file modificabili, accesso al repository e la Skill complementare figma-use più i riferimenti di supporto.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio

Usa figma-generate-library per pianificare una piccola libreria coerente con il nostro codice: token colore con modalità chiara e scura, spaziatura, tipografia, Button e Input. Inizia con una scoperta in sola lettura e mostra i conflitti tra codice e Figma. Attendi l'approvazione dell'ambito prima di scrivere, costruisci prima le basi e conserva un registro di stato in modo che ogni componente possa essere rivisto e ripreso in modo indipendente.

Controlla il risultato

Confronta l'output reale con questi criteri osservabili.

Le variabili semantiche fanno da alias ai primitivi e portano le modalità e gli ambiti previsti.
Varianti dei componenti e sostituzioni di icone corrispondono al contratto concordato, senza combinazioni superflue.
ID registrati, screenshot e controlli dei binding supportano ogni fase completata.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che strumenti esterni, credenziali e dipendenze software siano compresi.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Il comportamento e i requisiti upstream possono cambiare.

Titolare della fonte: OpenAI
Repository: openai/skills
File della skill: skills/.curated/figma-generate-library/SKILL.md
Licenza: Termini di Figma
Snapshot revisionato: 2026-10-07 · 49f948faa925

Sintesi editoriale della fonte

Crea variabili e stili Figma prima dei componenti, con un registro di stato salvato e un'approvazione a ogni fase.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le star del repository sono un segnale di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

In cosa si differenzia dalla generazione di una schermata?

Costruisce le basi e i componenti riutilizzabili che le schermate usano, comprese raccolte di token, varianti e documentazione.

Le scritture sul canvas possono essere eseguite in parallelo?

La fonte richiede esplicitamente mutazioni Figma sequenziali, in modo che lo stato e gli ID dei nodi restituiti restino affidabili.

Sostituisce automaticamente una libreria esistente?

No. Scoperta e approvazione dell'ambito precedono la creazione, e la strategia di riuso dà priorità alle risorse locali esistenti rispetto a importazioni o nuovi componenti.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiale di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesign Sfoglia le skill di design