Le Figma Skills sono istruzioni basate su markdown che guidano il comportamento dell'AI Design Agent nel tuo contesto specifico. Pensale come prompt personalizzati riutilizzabili — li scrivi una volta sola, e codificano le convenzioni del tuo team, le regole dei componenti e gli standard di qualità in modo che l'agente li segua automaticamente ogni volta.
Chiunque può scrivere una skill. Niente codice richiesto. Nessuno sviluppo di plugin. Nessuna integrazione API. Solo testo markdown che descrive cosa dovrebbe fare l'agente e come dovrebbe farlo. Le Skills sono la differenza tra un agente che genera UI generiche e un agente che genera l'UI del TUO team.
Concetto Chiave
Le Skills trasformano il Design Agent da un'AI generica nell'AI del TUO team. Senza skills, l'agente usa convenzioni predefinite e indovina le tue preferenze. Con le skills, segue automaticamente il tuo sistema di spaziature, le regole di denominazione dei componenti, i requisiti di accessibilità e le linee guida del brand. 30 minuti spesi a scrivere 3-4 skills ti fanno risparmiare ore di correzioni durante settimane di utilizzo dell'agente.
Cosa Compone una Figma Skill?
| Elemento della Skill | Cosa Fa | Esempio |
|---|---|---|
| Nome (con /) | Come la invochi | /create-settings-page |
| Scopo | Cosa fa la skill (una frase) | "Genera una pagina delle impostazioni seguendo le convenzioni del nostro team" |
| Passi | Istruzioni ordinate che l'agente segue | "1. Usa Section Header per ogni gruppo..." |
| Convenzioni | Regole che l'agente deve seguire | "Usa sempre la griglia 8px, mai il posizionamento assoluto" |
| Componenti | Quali componenti pubblicati usare | "Usa Toggle/Switch per le impostazioni booleane" |
| Variabili | Quali design token applicare | "Usa color-surface-primary per gli sfondi" |
| Da Non Fare | Cosa l'agente dovrebbe evitare | "Mai usare più di 3 livelli di titolo per pagina" |
Figma è stato lanciato con 9 skills di esempio che coprono: costruzione di librerie di componenti, generazione di nuovi design da brief, produzione di specifiche di accessibilità, coordinamento di workflow multi-agente e sincronizzazione dei design token con il codice. Esplorale su figma.com/community/skills. La skill fondamentale, /use-figma, fornisce all'agente una comprensione condivisa di come funziona Figma strutturalmente. I team personalizzano da lì.
Scrivere la Tua Prima Skill (Con Esempio)
Inizia con il tuo compito di design più ripetuto. Se crei layout di form settimanalmente, scrivi una skill /form-layout. Ecco un esempio completo del mondo reale:
Questa skill dice all'agente esattamente come il tuo team costruisce i form. Senza di essa, l'agente usa le convenzioni predefinite di Figma. Con essa, ogni form che l'agente genera segue i tuoi standard specifici — coerente tra i membri del team, coerente tra i progetti.
📬 Stai trovando valore in questo?
Un insight pratico sull'AI a settimana. Più un pacchetto gratuito di prompt quando ti iscrivi.
Iscriviti gratis →Come le Skills si Confrontano con Altre Istruzioni Personalizzate AI
Le Skills sono concettualmente simili ai sistemi di istruzioni personalizzate in altri strumenti AI:
| Strumento | Istruzioni Personalizzate | Creato Da | Condiviso? |
|---|---|---|---|
| Figma Skills | File markdown che guidano il Design Agent | Manualmente dal team | Sì (Libreria Community) |
| Istruzioni Personalizzate ChatGPT | Testo che modella tutte le risposte ChatGPT | Manualmente dall'utente | No (solo personale) |
| Claude Code CLAUDE.md | Istruzioni a livello progetto per l'agente di codifica | Manualmente dal team | Sì (tramite repo) |
| Hermes Agent Skills | Pattern di attività riutilizzabili auto-generati | Automaticamente dall'uso | Sì (libreria skills) |
La distinzione chiave: Hermes Agent crea skills automaticamente dalle attività completate — impara mentre lavori. Figma richiede la creazione manuale delle skills — lo insegni esplicitamente. L'approccio di Hermes scala con l'uso; l'approccio di Figma ti dà più controllo ma richiede investimento iniziale. Entrambi producono output AI migliori rispetto all'uso degli strumenti senza istruzioni personalizzate.
Il principio sottostante è lo stesso in tutti questi sistemi: l'AI funziona meglio con contesto esplicito sulle tue preferenze, convenzioni e standard. Che tu stia scrivendo una Figma Skill, Istruzioni Personalizzate ChatGPT, o un file Claude CLAUDE.md, il framework ICCSSE produce istruzioni migliori. Il Prompt Optimizer gratuito applica questa struttura automaticamente — incolla la bozza della tua skill, ottieni una versione più chiara.
4 Skills Essenziali di cui Ogni Team di Design Ha Bisogno
1. /form-layout — Standardizza il design dei form in tutto il team. (Esempio sopra.)
2. /page-layout — Definisce le convenzioni della struttura delle tue pagine: posizionamento header, larghezza sidebar, larghezza massima contenuto, struttura footer, pattern di navigazione, breakpoint responsive.
3. /component-variant — Dice all'agente come creare nuove varianti di componenti che corrispondano al tuo sistema esistente: convenzioni di denominazione, definizioni di stato (default, hover, active, disabled, error), scala dimensioni (sm, md, lg) e requisiti di documentazione.
4. /accessibility-check — Definisce i tuoi standard di accessibilità: livello WCAG (AA vs AAA), dimensioni minime area tocco, rapporti di contrasto, regole gerarchia titoli, etichette ARIA richieste e formato annotazione screen reader. Vedi la nostra guida alle specifiche di accessibilità per dettagli.
📬 Vuoi altro così?
Un insight pratico sull'AI a settimana. Più un pacchetto gratuito di prompt quando ti iscrivi.
Iscriviti gratis →Domande Frequenti
Quante skills dovrei creare?
Inizia con 3-4 che coprono i tuoi compiti di design più comuni: una skill per form, una skill per layout pagina, una skill per varianti componenti e una skill per controllo accessibilità. Queste coprono l'80% del lavoro di design quotidiano. Aggiungi più skills man mano che identifichi pattern ripetuti che l'agente gestisce in modo inconsistente.
Le skills possono chiamare altre skills?
Sì — le skills possono fare riferimento ad altre skills, creando workflow concatenati. Una skill /new-feature potrebbe invocare /form-layout per le sezioni di input, poi /accessibility-check per la revisione di conformità. Questo abilita workflow complessi multi-step da una singola invocazione.
Le skills consumano crediti?
La skill stessa (le istruzioni markdown) non consuma crediti. Le azioni dell'agente che la skill scatena (generare design, modificare componenti) consumano crediti al tasso normale. Una skill ben scritta potrebbe effettivamente far risparmiare crediti producendo output migliore al primo tentativo — meno iterazioni significa meno rigenerazioni che consumano crediti.
Posso condividere skills con la community Figma?
Sì — la libreria skills della community di Figma ti permette di pubblicare e navigare skills. Questo significa che puoi usare skills scritte da altri team di design per pattern comuni (layout dashboard, flussi onboarding, pagine impostazioni) senza scriverle da zero.
Dove sono archiviate le skills?
Le skills sono associate alla tua organizzazione Figma o account personale. Le skills a livello team sono accessibili a tutti i membri del team; le skills personali sono accessibili solo a te. Archivia le tue skills più importanti a livello team così tutti i designer beneficiano delle stesse convenzioni.
Divulgazione: Alcuni link in questo articolo sono link di affiliazione. Raccomandiamo solo strumenti che abbiamo testato personalmente e usiamo regolarmente. Vedi la nostra politica di divulgazione completa.