Spacing Systemvon Owl-Listener

Spacing System Skill.

Wähle Abstände nach Beziehung und Zweck, nicht durch isolierte Pixelanpassungen.

UI-Design
Design-Tokens

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Spacing SystemSKILL.md

Aufgabe UI-Design Ergebnis • Eine benannte Abstandsskala, abgeleitet aus einer gewählten Basiseinheit. • Nutzungsregeln für Inset, Stack, Inline und Raster-Gaps. • Zuordnungen der Dichtemodi für unterschiedliche Inhaltskontexte. Vor dem Start Es ist kein bestimmtes Token-Tool erforderlich; die Anwendung hängt vom bestehenden Komponentensystem ab.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Abständen eine konsistente Bedeutung geben

Ein kompaktes Abstandsframework mit Basisskala, semantischen Anwendungen, Gruppierung und Dichtemodi.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Spacing System legt eine Basiseinheit und eine wiederverwendbare Skala für Margins, Padding und Gaps fest. Es unterscheidet den Innenraum eines Containers (Inset) von vertikalen Stacks, Inline-Beziehungen und Raster-Gaps, sodass identische Zahlen dennoch klar dokumentierte Zwecke haben können.

Die Quelle verknüpft Abstände mit Gruppierung: Zusammengehörige Elemente stehen näher beieinander, nicht zusammengehörige Bereiche erhalten mehr Abstand. Außerdem beschreibt sie Dichtemodi für verschiedene Kontexte. Das ist eine knappe Systemspezifikation, keine Behauptung, dass die Beispielskala unverändert zu jedem Produkt passt.

Erwartete Ergebnisse

Eine benannte Abstandsskala, abgeleitet aus einer gewählten Basiseinheit.
Nutzungsregeln für Inset, Stack, Inline und Raster-Gaps.
Zuordnungen der Dichtemodi für unterschiedliche Inhaltskontexte.

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Basis und Skala wählen
Prüfe vorhandene Muster und wähle ein begrenztes Abstandsvokabular, statt jeden zufälligen Wert beizubehalten.
02
Semantische Verwendungen zuweisen
Lege fest, welche Stufen innerhalb von Komponenten, zwischen verwandten Steuerelementen und zwischen Abschnitten gelten.
03
Dichteänderungen festlegen
Erkläre, wie kompakte und großzügige Modi den Standard verändern, ohne die Gruppierungsbeziehungen unleserlich zu machen.

02 Einsatzbereiche

Wann man es einsetzt

Es ist kein bestimmtes Token-Tool erforderlich; die Anwendung hängt vom bestehenden Komponentensystem ab.

Gut geeignet

Uneinheitliches Komponenten-PaddingNützlich, wenn ähnliche Steuerelemente unzusammenhängende Abstandswerte verwenden.
Mehrere DichteanforderungenUnterstützt Produkte, die dichte Arbeitsansichten mit entspannteren Leseflächen mischen.

Zu prüfende Grenzen

Kein SpaltenrasterSeitenspalten und responsive Gutter gehören zu Layout Grid.
Keine automatische MigrationDie Quelle beschreibt Regeln, keinen Codemod, der jeden vorhandenen CSS-Wert sicher ersetzt.

Diese Eingaben mitbringen

Aktuelle AbstandsbeispieleLiefere repräsentative Komponenten und die darin verwendeten Werte.
GruppierungsabsichtErkläre, welche Elemente zusammengehören und welche Abschnitte getrennt werden sollen.
DichteanforderungenBenenne datenintensive, gewöhnliche und leseorientierte Kontexte.

03 Wichtige Entscheidungen

Entscheidende Punkte

Die Absicht ist dokumentiert
Eine Token-Tabelle allein sagt Entwicklern nicht, welcher Abstand zwischen einem Label und seinem Eingabefeld gehört.
Dichte ohne Beliebigkeit
Modi können die Kompaktheit ändern und dabei ein gemeinsames System bewahren, statt einen weiteren Satz willkürlicher Werte zu erzeugen.

04 Beispielbriefing

Mit einem fokussierten Briefing testen

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfe die Einrichtung des Skills, bevor du es verwendest.

Einrichtung prüfen

Nutze den dokumentierten Installationsweg des Repositorys und behalte alle referenzierten Begleitdateien bei. Dieser Eintrag beschreibt eine fokussierte Designmethode, keine ausführbare Anwendung.

Quelldatei im Upstream

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

Es ist kein bestimmtes Token-Tool erforderlich; die Anwendung hängt vom bestehenden Komponentensystem ab.

Mit einem Ergebnis beginnen

Passe Umfang, Quellmaterial und Rahmenbedingungen dieses Briefings an, bevor du den Skill ausführst.

Beispiel-Briefing

Nutze spacing-system, um unsere Einstellungsformulare und die dichte Datensatztabelle aufeinander abzustimmen. Definiere eine Basiseinheit, eine benannte Skala, Regeln für Inset, Stack und Inline sowie kompakte und komfortable Modi. Erkläre den Abstand zwischen Label und Eingabefeld getrennt vom Abstand zwischen Abschnitten; gestalte die Seitenspalten nicht neu.

Ergebnis prüfen

Prüfe die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Jeder vorgeschlagene Wert gehört zur dokumentierten Skala.
Zusammengehörige Gruppen bleiben visuell klar von nicht zusammengehörigen Abschnitten getrennt.
Dichteänderungen behalten eine klare Nutzungsregel bei.

OpenDesign bietet einen lokalen Design-Workspace für Coding-Agents. Diese Auflistung bedeutet nicht, dass der Skill gebündelt ist oder dass seine externen Tools, Zugangsdaten und Softwareabhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, fixierte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill-Datei: ui-design/skills/spacing-system/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 9a6930cf84a8

Redaktionelle Quellenzusammenfassung

Ein kompaktes Abstandsframework mit Basisskala, semantischen Anwendungen, Gruppierung und Dichtemodi.

Eigene Zusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Ist eine Basis von 8 Pixeln erforderlich?

Die Quelle nennt Basen von 4 und 8 Pixeln als typische Optionen; wähle nach den Anforderungen des Produkts.

Gehört der Seitenrand zum System?

Es kann konsistente Seitenränder dokumentieren, aber die umfassendere Spalten- und Breakpoint-Struktur gehört zur Rasterspezifikation.

Warum verschiedene Abstandstypen benennen?

Inset, Stack, Inline und Gap beschreiben, wie Raum genutzt wird, und machen die Anwendung besser wiederholbar als eine bloße Zahlenliste.

OpenDesign

Schaffe Raum für die nächste Design-Iteration.

Halte Briefing, Quellmaterial und Designarbeit in einem lokalen Workspace zusammen. Prüfe die Einrichtung des Skills, bevor du ihn in deinen Workflow aufnimmst.

OpenDesign herunterladen Design-Skills durchsuchen