102.3K+Scarica
Vai alla guida all’uso
Icon Systemdi Owl-Listener

Icon System Skill.

Dai alle icone un sistema coerente di costruzione e denominazione, invece di raccogliere simboli scollegati.

  • Design system
  • Specifiche
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Icon SystemSKILL.md
Attività Design system Produce • Una specifica di costruzione e dimensioni delle icone • Categorie di denominazione e requisiti di consegna • Regole di accessibilità e di contributo Prima di iniziare Un agente in grado di esaminare icone rappresentative, le dimensioni previste e i formati di design e di codice richiesti.
Sintesi editoriale · fonte esaminata il 2026-10-07 · non è un esempio generato

01 Funzionalità

Icon System: standardizzare l'iconografia di prodotto

Definisce come le icone vengono disegnate, denominate, consegnate e usate in modo accessibile in un prodotto.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Il metodo di lavoro

Icon System definisce le regole che riguardano la libreria di icone di un prodotto: griglia, linee guida, spessore del tratto, trattamento degli angoli, varianti di dimensione, denominazione e consegna. Distingue l'uso di stili a tratto, pieni e duotone, senza considerarli intercambiabili.

La fonte tratta anche etichette, nascondere gli elementi decorativi, contrasto e aree di interazione. Le dimensioni in pixel proposte sono valori di riferimento da adattare al prodotto. Una specifica del sistema di icone non significa che una libreria SVG completa sia già stata disegnata o testata.

Risultati attesi

  • Una specifica di costruzione e dimensioni delle icone
  • Categorie di denominazione e requisiti di consegna
  • Regole di accessibilità e di contributo
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Definire le regole di costruzione

    Definisci griglia, linee guida, tratto, angoli e stili supportati.

  2. 02
    Organizzare la libreria

    Scegli categorie, nomi, varianti e i formati sorgente o di componente richiesti.

  3. 03
    Verificare l'uso nel contesto

    Controlla le dimensioni supportate, le etichette, il testo per le azioni critiche e le aree interattive.

02 Quando usarlo

Quando usarla

Usala per riunire set di icone eterogenei in un unico sistema o per documentare una libreria condivisa per design e sviluppo.

Adatta quando

  • Librerie di icone misteRiporta famiglie di simboli incoerenti sotto un unico standard di costruzione.
  • Componenti di prodotto condivisiDefinisci nomi e wrapper che design e sviluppo possano usare in modo coerente.

Limiti da verificare

  • Non è una guida completa all'illustrazioneLe illustrazioni più ampie, di taglio narrativo, rientrano in illustration-style.
  • Non crea gli asset automaticamenteLa fonte specifica un sistema; le icone e i wrapper effettivi richiedono comunque di essere prodotti.

Cosa portare

  • Icone attualiFornisci simboli rappresentativi e i conflitti esistenti.
  • Dimensioni d'usoElenca le dimensioni di visualizzazione previste e i contesti di interazione.
  • Stack di consegnaIndica se servono SVG, sprite, wrapper di componenti o librerie di design.

03 Decisioni importanti

Decisioni che contano

  1. Coerenza costruttiva

    Regole geometriche condivise fanno percepire i simboli come affini anche quando i soggetti sono diversi.

  2. Nomi significativi

    Nomi di categorie e varianti migliorano la reperibilità e la manutenzione.

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

Carica il SKILL.md di questa attività dal repository designer-skills nella posizione delle skill supportata dal tuo agente. Il file di ingresso non stabilisce alcun comando di installazione universale.

File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md

Fornisci icone rappresentative e i relativi contesti d'uso. La skill definisce le regole; creare e testare le icone effettive è un lavoro separato.

Parti da un solo risultato

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

Brief di esempio
Usa icon-system per standardizzare le nostre icone di navigazione eterogenee. Definisci regole di griglia, tratto, angoli, dimensioni e denominazione, poi specifica la consegna in SVG e come componenti. Distingui le icone decorative dalle azioni con etichetta e segnala dove il testo visibile è necessario.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Le icone seguono regole di costruzione documentate.
  • I nomi distinguono categoria e variante.
  • Il trattamento di accessibilità corrisponde a ciascun uso.

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

Scarica OpenDesignLeggi 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 originali possono cambiare.

Autore della fonte
Owl-Listener
Repository
Owl-Listener/designer-skills
File della skill
design-systems/skills/icon-system/SKILL.md
Licenza
MIT
Snapshot esaminato
2026-10-07 · 9a6930cf84a8
Sintesi editoriale della fonte
Definisce come le icone vengono disegnate, denominate, consegnate e usate in modo accessibile in un prodotto.

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

06 Domande prima di iniziare

Domande prima di iniziare

La dimensione visiva di un'icona coincide con la sua area di tocco?

No. La fonte tratta la dimensione di visualizzazione e le indicazioni sull'area interattiva come aspetti distinti.

Ogni icona deve avere un nome accessibile?

Le icone significative richiedono un'etichetta adeguata; quelle decorative possono essere nascoste alle tecnologie assistive.

Copre anche le illustrazioni hero?

No. La fonte rimanda il lavoro illustrativo più ampio a una skill separata.

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 OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md