Figma Generate Designdi OpenAI

Figma Generate Design Skill.

Crea una schermata Figma modificabile che resta collegata al suo design system.

Figma
UI Design
Design system

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Figma Generate DesignSKILL.md

Attività Figma Produce • Una schermata Figma nuova o aggiornata, composta da istanze di componenti • Colori, spaziature e raggi associati a variabili, con stili riutilizzabili • Verifiche visive per sezione e a schermo intero rispetto alla fonte Prima di iniziare Figma MCP connesso, accesso al file di destinazione, un design system pubblicato e la Skill complementare figma-use per le operazioni sul canvas.

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

01 Funzionalità

Assembla schermate Figma da asset esistenti del design system

Crea schermate Figma da componenti e variabili di librerie esistenti, controllando ogni sezione durante l'assemblaggio.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Figma Generate Design opera dal codice al design: il risultato è una schermata in Figma, non codice applicativo. Prima di assemblare la pagina individua istanze di componenti, variabili di libreria e stili di testo o effetto esistenti. La fonte privilegia il riuso rispetto al disegno di riquadri simili con valori scritti a mano.

La strategia di assemblaggio è incrementale. Si crea prima un frame contenitore, poi ogni sezione viene costruita al suo interno e controllata. Le proprietà di testo dei componenti e le varianti predefinite vengono verificate rispetto al codice sorgente, mentre le schermate per sezione rilevano testo tagliato e segnaposto residui che in una vista ridotta dell'intera pagina potrebbero sfuggire. Il risultato deve essere composto da istanze modificabili del design system, non da un semplice screenshot dell'applicazione.

Risultati attesi

Una schermata Figma nuova o aggiornata, composta da istanze di componenti
Colori, spaziature e raggi associati a variabili, con stili riutilizzabili
Verifiche visive per sezione e a schermo intero rispetto alla fonte

Vedi il brief di esempio

Dal brief alla revisione

01
Mappa la schermata di origine
Leggi sezioni, componenti e valori predefiniti delle prop. Individua il file Figma di destinazione e le convenzioni del sistema esistente.
02
Individua e riusa gli asset
Esamina le schermate esistenti e cerca nelle librerie collegate componenti, variabili e stili. Un risultato vuoto tra le variabili locali non dimostra che i token remoti siano assenti.
03
Costruisci e verifica le sezioni
Crea prima il contenitore, assembla una sezione alla volta e controlla testo, varianti e layout prima di proseguire.

02 Quando usarlo

Quando usarla

Figma MCP connesso, accesso al file di destinazione, un design system pubblicato e la Skill complementare figma-use per le operazioni sul canvas.

Adatta quando

Passaggio da codice a FigmaUtile quando una schermata funzionante dell'applicazione richiede un corrispettivo di design modificabile e collegato alla sua libreria di componenti.
Aggiornare schermate esistentiAdatta a modifiche mirate di contenuti o varianti senza ricostruire l'intera pagina Figma.

Limiti da verificare

Serve l'accesso al design systemIl flusso documentato presuppone l'accesso a componenti pubblicati o a una libreria del team e una connessione Figma MCP disponibile.
Non da Figma a codiceGenerare l'implementazione dell'applicazione a partire da un design esula esplicitamente dalla direzione principale di questa Skill.

Cosa fornire

File Figma di destinazioneIndica il file o la pagina in cui creare o aggiornare la schermata.
Origine della schermataFornisci il codice dell'applicazione o un brief concreto, sezione per sezione, con testi reali.
Contesto della libreriaIndica le schermate esistenti o le librerie pubblicate di cui riutilizzare componenti e token.

03 Decisioni importanti

Decisioni che contano

I token remoti sono individuabili
La fonte distingue le variabili locali da quelle delle librerie collegate, evitando sistemi di token duplicati inutili.
Controllo a livello di sezione
Controllare le singole sezioni rende più facile individuare varianti errate e testo tagliato rispetto a una sola miniatura dell'intera pagina.

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.

Controlla la configurazione

Tieni a disposizione figma-use e i relativi riferimenti API insieme a questo flusso di lavoro. Questi materiali Beta sono regolati dai Termini per sviluppatori di Figma. Installare la sola Skill non collega né autorizza un file Figma.

File della fonte originale

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

Figma MCP connesso, accesso al file di destinazione, un design system pubblicato e la Skill complementare figma-use per le operazioni sul canvas.

Parti da un solo risultato

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

Brief di esempio

Usa figma-generate-design per ricreare la nostra schermata delle impostazioni account nel file Figma indicato. Riutilizza i suoi componenti e le sue variabili pubblicati, controlla le prop predefinite del codice e mantieni le etichette effettive. Costruisci prima il contenitore, poi una sezione alla volta. Mostra le schermate di ogni sezione e correggi testo tagliato o contenuti segnaposto prima di considerare completa la schermata.

Verifica il risultato

Confronta il risultato effettivo con questi criteri osservabili.

I controlli sono istanze di componenti collegate, non sostituti disegnati a mano.
Testi e varianti corrispondono alla schermata fornita, comprese le prop predefinite.
Le schermate delle sezioni non mostrano etichette tagliate, sovrapposizioni o segnaposto residui.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di codifica. 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. Comportamento e requisiti originali possono cambiare.

Proprietario della fonte: OpenAI
Repository: openai/skills
File della skill: skills/.curated/figma-generate-design/SKILL.md
Licenza: Termini Figma
Versione rivista: 2026-10-07 · 49f948faa925

Sintesi editoriale della fonte

Crea schermate Figma da componenti e variabili di librerie esistenti, controllando ogni sezione durante l'assemblaggio.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non misurano l'uso della skill né ne indicano la qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Il risultato è uno screenshot?

Il flusso principale crea nodi e istanze Figma modificabili. Una pagina web acquisita può servire da riferimento, ma non è la struttura finale prevista per la schermata.

Cosa succede se non si trovano variabili locali?

La fonte indica di controllare anche le librerie collegate. Le variabili remote pubblicate non vengono restituite dall'API delle variabili locali.

Può aggiornare solo una parte di una schermata?

Sì. Può individuare le sezioni esistenti e modificarne testo, varianti o layout preservando le aree non interessate.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiali 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