Spacing Systemdi Owl-Listener

Spacing System Skill.

Scegli la spaziatura in base a relazione e scopo, non con ritocchi isolati in pixel.

Design UI
Design token

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Spacing SystemSKILL.md

Attività Design UI Produce • Una scala di spaziatura con nome, derivata da un'unità di base scelta. • Regole d'uso per inset, stack, inline e gap della griglia. • Mappature delle modalità di densità per diversi contesti di contenuto. Prima di iniziare Non è richiesto alcuno strumento specifico per i token; l'applicazione dipende dal sistema di componenti esistente.

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

01 Funzionalità

Dai alla spaziatura un significato coerente

Un framework di spaziatura compatto che copre scala di base, applicazioni semantiche, raggruppamento e modalità di densità.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Spacing System stabilisce un'unità di base e una scala riutilizzabile per margini, padding e gap. Distingue lo spazio inset all'interno di un contenitore da stack verticali, relazioni inline e gap della griglia, così numeri identici possono avere scopi chiaramente documentati.

La fonte collega la spaziatura al raggruppamento: gli elementi correlati stanno più vicini, mentre le sezioni non correlate ricevono più separazione. Descrive anche modalità di densità per contesti diversi. È una specifica di sistema concisa, non un'affermazione che la scala d'esempio si adatti a ogni prodotto senza modifiche.

Risultati attesi

Una scala di spaziatura con nome, derivata da un'unità di base scelta.
Regole d'uso per inset, stack, inline e gap della griglia.
Mappature delle modalità di densità per diversi contesti di contenuto.

Vedi il brief di esempio

Dal brief alla revisione

01
Scegli base e scala
Esamina i pattern esistenti e scegli un vocabolario di spaziatura limitato invece di conservare ogni valore accidentale.
02
Assegna usi semantici
Definisci quali step appartengono all'interno dei componenti, tra controlli correlati e tra sezioni.
03
Specifica le variazioni di densità
Spiega come le modalità compatta e ampia modificano il valore predefinito mantenendo leggibili le relazioni di raggruppamento.

02 Quando usarlo

Quando usarla

Non è richiesto alcuno strumento specifico per i token; l'applicazione dipende dal sistema di componenti esistente.

Quando è adatta

Padding dei componenti incoerenteUtile quando controlli simili usano valori di spaziatura non correlati.
Più esigenze di densitàSupporta prodotti che combinano viste di lavoro dense con superfici di lettura più rilassate.

Limiti da verificare

Non è una griglia a colonneLe colonne della pagina e le gutter responsive spettano a Layout Grid.
Non è una migrazione automaticaLa fonte descrive regole, non un codemod che sostituisce in sicurezza ogni valore CSS esistente.

Porta questi input

Esempi di spaziatura attualeFornisci componenti rappresentativi e i valori che usano.
Intento di raggruppamentoSpiega quali elementi stanno insieme e quali sezioni devono essere separate.
Requisiti di densitàIndividua i contesti ricchi di dati, ordinari e orientati alla lettura.

03 Decisioni importanti

Decisioni che contano

L'intento è documentato
Una tabella di token da sola non dice a uno sviluppatore quale gap vada tra un'etichetta e il suo campo.
Densità senza casualità
Le modalità possono cambiare la compattezza mantenendo un sistema condiviso, invece di creare un altro insieme di valori arbitrari.

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 procedura di installazione documentata nel repository e conserva eventuali file complementari citati. Questa voce descrive un metodo di design mirato, non un'applicazione eseguibile.

File sorgente upstream

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/spacing-system/SKILL.md

Non è richiesto alcuno strumento specifico per i token; l'applicazione dipende dal sistema di componenti esistente.

Parti da un solo risultato

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

Brief di esempio

Usa spacing-system per riconciliare i nostri moduli delle impostazioni e la tabella densa dei record. Definisci un'unità di base, una scala con nome, regole di inset, stack e inline e modalità compatta rispetto a confortevole. Spiega separatamente la spaziatura tra etichetta e campo e quella tra sezioni; non ridisegnare le colonne della pagina.

Ispeziona il risultato

Verifica l'output effettivo rispetto a questi criteri osservabili.

Ogni valore proposto appartiene alla scala documentata.
I gruppi correlati restano visivamente distinti dalle sezioni non correlate.
Le variazioni di densità mantengono una regola d'uso chiara.

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

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte bloccata collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte: Owl-Listener
Repository: Owl-Listener/designer-skills
File della skill: ui-design/skills/spacing-system/SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · 9a6930cf84a8

Sintesi editoriale della fonte

Un framework di spaziatura compatto che copre scala di base, applicazioni semantiche, raggruppamento e modalità di densità.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle 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

Richiede una base di 8 pixel?

La fonte indica basi di 4 e 8 pixel come opzioni tipiche; scegli in base alle esigenze del prodotto.

Il margine di pagina fa parte del sistema?

Può documentare margini di pagina coerenti, ma la struttura più ampia di colonne e breakpoint appartiene alla specifica della griglia.

Perché dare un nome ai diversi tipi di spaziatura?

Inset, stack, inline e gap descrivono come viene usato lo spazio, rendendo l'applicazione più ripetibile di un semplice elenco di numeri.

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