Spacing Systempar Owl-Listener

Spacing System Skill.

Choisissez l'espacement selon la relation et l'objectif, et non par des ajustements de pixels isolés.

Design d'interface
Design tokens

Télécharger OpenDesign Voir le guide d'utilisation

Revue de la source · Spacing SystemSKILL.md

Tâche Design d'interface Produit • Une échelle d'espacement nommée, dérivée d'une unité de base choisie. • Des règles d'usage pour l'inset, le stack, l'inline et les gaps de grille. • Des correspondances de modes de densité pour différents contextes de contenu. Avant de commencer Aucun outil de tokens particulier n'est requis ; l'application dépend du système de composants existant.

Résumé éditorial · source examinée 2026-10-07 · ce n'est pas un exemple généré

01 Fonctionnement

Donner un sens cohérent à l'espacement

Un cadre d'espacement compact couvrant une échelle de base, des applications sémantiques, le regroupement et des modes de densité.

Workflow fondé sur la sourceCe n'est pas un benchmark d'exécution

La méthode de travail

Spacing System établit une unité de base et une échelle réutilisable pour les marges, le padding et les gaps. Elle distingue l'espace inset à l'intérieur d'un conteneur des stacks verticaux, des relations inline et des gaps de grille, de sorte que des valeurs identiques conservent des finalités clairement documentées.

La source relie l'espacement au regroupement : les éléments liés sont plus rapprochés, tandis que les sections sans rapport sont davantage séparées. Elle décrit aussi des modes de densité pour différents contextes. Il s'agit d'une spécification de système concise, et non d'une affirmation que l'échelle d'exemple conviendra telle quelle à tous les produits.

Livrables attendus

Une échelle d'espacement nommée, dérivée d'une unité de base choisie.
Des règles d'usage pour l'inset, le stack, l'inline et les gaps de grille.
Des correspondances de modes de densité pour différents contextes de contenu.

Voir l'exemple de brief

Du brief à la revue

01
Choisir la base et l'échelle
Examinez les motifs existants et choisissez un vocabulaire d'espacement limité plutôt que de conserver chaque valeur accidentelle.
02
Attribuer des usages sémantiques
Définissez quelles valeurs relèvent de l'intérieur des composants, de l'espace entre contrôles liés et de l'espace entre sections.
03
Préciser les changements de densité
Expliquez comment les modes compact et spacieux modifient la valeur par défaut tout en gardant lisibles les relations de regroupement.

02 Cas d’usage

Quand l'utiliser

Aucun outil de tokens particulier n'est requis ; l'application dépend du système de composants existant.

Bien adaptée si

Padding de composants incohérentUtile lorsque des contrôles similaires emploient des valeurs d'espacement sans lien entre elles.
Plusieurs besoins de densitéConvient aux produits qui mêlent des vues de travail denses et des surfaces de lecture plus aérées.

Limites à vérifier

Ce n'est pas une grille de colonnesLes colonnes de page et les gouttières responsives relèvent de Layout Grid.
Pas de migration automatiqueLa source décrit des règles, pas un codemod qui remplacerait en toute sécurité chaque valeur CSS existante.

Éléments à fournir

Exemples d'espacement actuelsFournissez des composants représentatifs et les valeurs qu'ils utilisent.
Intention de regroupementExpliquez quels éléments vont ensemble et quelles sections doivent être séparées.
Besoins de densitéIdentifiez les contextes riches en données, ordinaires et centrés sur la lecture.

03 Décisions importantes

Les décisions qui comptent

L'intention est documentée
Un tableau de tokens seul n'indique pas à un développeur quel gap placer entre un libellé et son champ.
Une densité sans arbitraire
Les modes peuvent modifier la compacité tout en préservant un système commun, au lieu de créer un autre ensemble de valeurs arbitraires.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration de la skill avant de l'utiliser.

Vérifier la configuration

Utilisez la procédure d'installation documentée du dépôt et conservez tous les fichiers complémentaires référencés. Cette entrée décrit une méthode de design ciblée, et non une application exécutable.

Fichier source amont

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

Aucun outil de tokens particulier n'est requis ; l'application dépend du système de composants existant.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d'exécuter la skill.

Exemple de brief

Utilise spacing-system pour harmoniser nos formulaires de paramètres et notre tableau dense d'enregistrements. Définis une unité de base, une échelle nommée, des règles inset/stack/inline et des modes compact et confortable. Explique séparément l'espacement entre libellé et champ et celui entre sections ; ne redessine pas les colonnes de la page.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

Chaque valeur proposée appartient à l'échelle documentée.
Les groupes liés restent visuellement distincts des sections sans rapport.
Les changements de densité conservent une règle d'usage claire.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que la skill est incluse, ni que ses outils externes, identifiants et dépendances logicielles le sont.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: Owl-Listener
Dépôt: Owl-Listener/designer-skills
Fichier de la skill: ui-design/skills/spacing-system/SKILL.md
Licence: MIT
Version examinée: 2026-10-07 · 9a6930cf84a8

Résumé éditorial de la source

Un cadre d'espacement compact couvrant une échelle de base, des applications sémantiques, le regroupement et des modes de densité.

Résumé original par OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'usage de la skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Faut-il une base de 8 pixels ?

La source indique des bases de 4 et 8 pixels comme options typiques ; choisissez selon les besoins du produit.

La marge de page fait-elle partie du système ?

Elle peut documenter des marges de page cohérentes, mais la structure plus large des colonnes et des breakpoints relève de la spécification de grille.

Pourquoi nommer différents types d'espacement ?

Inset, stack, inline et gap décrivent l'usage de l'espace, ce qui rend l'application plus reproductible qu'une simple liste de nombres.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre à la skill avant de l'ajouter à votre workflow.

Télécharger OpenDesign Parcourir les skills de design