Figma Create Design System Rulesdi OpenAI

Figma Create Design System Rules Skill.

Sostituisci le istruzioni vaghe come «segui il design system» con percorsi e convenzioni concreti.

Figma
Design system
Regole per agenti

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Figma Create Design System RulesSKILL.md

Attività Figma Produce • Una sezione o un file di regole di implementazione Figma specifico per il progetto • Indicazioni concrete su componenti, token e posizione degli asset • Una piccola verifica di implementazione usata per perfezionare le regole Prima di iniziare Connessione a Figma MCP e accesso al codebase di destinazione; il formato delle regole di destinazione dipende dall'host di coding.

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

01 Funzionalità

Trasforma le convenzioni del repository in regole di implementazione per Figma

Un flusso di analisi del repository che scrive e mette alla prova regole concrete per gli agenti per l'implementazione di Figma.

Flusso basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Figma Create Design System Rules produce indicazioni specifiche per il progetto per il futuro lavoro da Figma a codice. Analizza dove si trovano i componenti, come viene gestito lo stile, dove sono definiti i token e quali convenzioni architetturali le implementazioni devono rispettare. Il risultato è un file di regole, non una libreria di componenti Figma né una schermata riprogettata.

La fonte supporta formati di regole per Claude Code, Codex e Cursor. Le regole utili indicano percorsi reali dei componenti e fonti dei token, invece di imporre a ogni repository un modello generico React o Tailwind. Il flusso termina provando le regole su un piccolo componente e perfezionando ciò che non ha funzionato, perché un'istruzione scritta non dimostra che un agente la seguirà in modo coerente.

Risultati attesi

Una sezione o un file di regole di implementazione Figma specifico per il progetto
Indicazioni concrete su componenti, token e posizione degli asset
Una piccola verifica di implementazione usata per perfezionare le regole

Vedi il brief di esempio

Dal brief alla revisione

01
Esamina le convenzioni esistenti
Ottieni prima il modello di base dallo strumento create_design_system_rules di Figma MCP. Poi leggi organizzazione dei componenti, stili, import, routing e regole per agenti esistenti prima di redigere le aggiunte specifiche per il progetto.
02
Scrivi mappature applicabili
Indica i file reali di componenti e token, descrivi il contesto Figma richiesto e il flusso degli screenshot, e mantieni il framework del progetto.
03
Salva e testa le regole
Usa il formato di regole appropriato per l'host senza sovrascrivere istruzioni non correlate. Testa una piccola implementazione Figma e rimuovi le indicazioni in conflitto o poco utili.

02 Quando usarlo

Quando usarla

Connessione a Figma MCP e accesso al codebase di destinazione; il formato delle regole di destinazione dipende dall'host di coding.

Casi adatti

Onboarding degli agentiUtile quando nuove sessioni di implementazione duplicano ripetutamente componenti o codificano a mano valori per cui esistono già token.
Raccolta delle convenzioni del teamAdatta a un team che lavora sul design system e vuole trasformare la conoscenza non scritta del repository in indicazioni da rivedere.

Limiti da verificare

Le regole non sono un controllo forzatoUn file di regole può guidare un agente, ma non sostituisce linting, test o un confronto visivo.
Le istruzioni esistenti devono rimanereAggiungere indicazioni Figma non deve cancellare altre regole del repository né introdurre requisiti architetturali contraddittori.

Cosa portare

Accesso al repositoryFornisci il progetto reale, inclusi componenti rappresentativi e file di stile.
Host dell'agenteIndica il formato di regole usato dal team, come AGENTS.md, CLAUDE.md o le regole Cursor.
Decisioni note del teamFornisci le convenzioni che non si possono dedurre in modo affidabile, comprese responsabilità ed eccezioni approvate.

03 Decisioni importanti

Decisioni che contano

Percorsi specifici invece di slogan
Un componente Button con nome e un file di token sono più utili di una richiesta generica di coerenza.
Adattarsi al repository
La fonte considera la rappresentazione generata da Figma come contesto di design da adattare al framework e agli stili del repository.

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

Usa la skill selezionata con il meccanismo di istruzioni già presente nel progetto. Questi materiali Beta sono regolati dai Termini per sviluppatori di Figma. Verifica come le modifiche al file di regole influenzano il comportamento futuro degli agenti.

File sorgente originale

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

Connessione a Figma MCP e accesso al codebase di destinazione; il formato delle regole di destinazione dipende dall'host di coding.

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-create-design-system-rules per documentare le nostre convenzioni esistenti da Figma a codice. Esamina prima il repository, mantieni l'AGENTS.md attuale e aggiungi una sezione mirata con i percorsi di componenti, token e asset. Non introdurre un nuovo framework di stile. Convalida le indicazioni su un piccolo componente e segnala ogni convenzione che richieda una decisione del team.

Controlla il risultato

Verifica l'output reale in base a questi criteri osservabili.

Ogni percorso di componente e token citato esiste.
Le nuove regole non contraddicono né sostituiscono le istruzioni esistenti del progetto.
Una piccola implementazione segue le convenzioni previste di riuso e stile.

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

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte bloccata collegata qui sotto. Il comportamento e i requisiti a monte possono cambiare.

Titolare della fonte: OpenAI
Repository: openai/skills
File della skill: skills/.curated/figma-create-design-system-rules/SKILL.md
Licenza: Termini Figma
Snapshot rivisto: 2026-10-07 · 49f948faa925

Sintesi editoriale della fonte

Un flusso di analisi del repository che scrive e mette alla prova regole concrete per gli agenti per l'implementazione di Figma.

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

06 Domande prima di iniziare

Domande prima di iniziare

Crea token dentro Figma?

No. Il suo output principale è una guida di progetto leggibile dagli agenti. Creare variabili e librerie di componenti in Figma è compito di un'altra Skill.

Il mio progetto deve usare React e Tailwind?

No. La fonte chiede esplicitamente all'agente di rilevare il framework e l'approccio di stile del repository e di adattare le regole di conseguenza.

Ogni convenzione deve diventare una regola?

La fonte consiglia di partire dai problemi ricorrenti più importanti e di mantenere le indicazioni specifiche, invece di riempire il contesto con regole raramente utili.

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