102.3K+Download
Zur Nutzungsanleitung springen
Layout Gridvon Owl-Listener

Layout Grid Skill.

Definieren Sie gemeinsame Spalten, Ränder und responsives Verhalten für zusammengehörige Seitenlayouts.

  • UI-Design
  • Responsives Layout
OpenDesign herunterladenNutzungsanleitung ansehen
Quellenprüfung · Layout GridSKILL.md
Aufgabe UI-Design Ergebnis • Eine Breakpoint-Tabelle mit Spalten, Gutters, Rändern und Container-Grenzen. • Layoutregeln für eingefasste, randlose (Full-Bleed-), Sidebar- und Karten-Bereiche. • Hinweise für Entwickler, die erklären, wie sich das Layout zwischen den Breiten anpasst. Vor dem Start Keine benannte Laufzeitabhängigkeit; für sinnvolle Rasterwerte sind reale Inhaltsvorgaben erforderlich.
Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Ein responsives Seitenraster definieren

Eine kompakte Referenz zu Rasteraufbau, Rastertypen, responsivem Verhalten und gängigen Seitenlayout-Mustern.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Layout Grid konzentriert sich auf das Seitengerüst: Spalten, Gutters, äußere Ränder und ihre Veränderung über verschiedene Viewport-Größen hinweg. Es unterscheidet fließende Spalten von Containern mit fester Maximalbreite und adaptiven Layouts, sodass eine Rasterspezifikation nicht nur einen Desktop-Screenshot, sondern auch das Verhalten beschreiben kann.

Die Quelle ist ein kompakter Leitfaden, keine Implementierungsbibliothek. Die genannten üblichen Spaltenanzahlen und Breakpoint-Beispiele sind Ausgangspunkte. Das nützliche Ergebnis ist ein auf den Inhalt abgestimmtes Raster mit klaren Anweisungen für randlose Bereiche, eingefasste Leseabschnitte, Sidebars und wiederkehrende Karten.

Erwartete Ergebnisse

  • Eine Breakpoint-Tabelle mit Spalten, Gutters, Rändern und Container-Grenzen.
  • Layoutregeln für eingefasste, randlose (Full-Bleed-), Sidebar- und Karten-Bereiche.
  • Hinweise für Entwickler, die erklären, wie sich das Layout zwischen den Breiten anpasst.
Beispiel-Brief ansehen

Vom Brief zur Prüfung

  1. 01
    Rastertyp wählen

    Wählen Sie Spalten-, Modul-, Basislinien- oder kombinierte Struktur passend zum Inhalt, statt für jede Seite dasselbe Raster anzunehmen.

  2. 02
    Breitenverhalten festlegen

    Legen Sie fest, wo sich Spalten dehnen, wo ein Container nicht weiter wächst und wann Spalten oder Sidebars entfallen.

  3. 03
    Zwischenbreiten prüfen

    Prüfen Sie die Übergänge um die Breakpoints herum, nicht nur die kleinsten und größten Referenzbildschirme.

02 Einsatzbereiche

Wann Sie es einsetzen

Keine benannte Laufzeitabhängigkeit; für sinnvolle Rasterwerte sind reale Inhaltsvorgaben erforderlich.

Gut geeignet

  • Seitenstruktur festlegenNützlich, bevor eine Reihe von Bildschirmen entsteht, die sich gemeinsam ausrichten sollen.
  • Layoutmuster abgleichenBietet eine gemeinsame Basis für Seiten, die Fließtext, Karten und asymmetrische Bereiche mischen.

Zu prüfende Grenzen

  • Keine Tokens für InnenabständePadding und Abstände innerhalb von Komponenten sind der Schwerpunkt von Spacing System.
  • Breakpoints testenVorgeschlagene Werte müssen mit echten Inhalten und in der Zielumgebung getestet werden.

Diese Eingaben mitbringen

  • InhaltsbereicheListen Sie die wichtigsten Seitenbereiche und ihre relative Bedeutung auf.
  • Viewport-ZieleGeben Sie die unterstützten Breiten und vorhandene Container-Konventionen an.
  • Layout-VorgabenNennen Sie feste Sidebars, minimale Kartenbreiten und gewollte randlose Abschnitte.

03 Wichtige Entscheidungen

Entscheidungen, auf die es ankommt

  1. Verhalten gehört zum Raster

    Eine Spezifikation, die nur Desktop-Spalten beschreibt, lässt die schwierigsten responsiven Entscheidungen offen.

  2. Bewusste Ausnahmen

    Das Durchbrechen des Rasters kann Inhalte hervorheben, sollte aber bewusst geschehen und keine versehentliche Fehlausrichtung sein.

04 Beispielbriefing

Einen fokussierten Brief ausprobieren

Der folgende Beispiel-Brief wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn verwenden.

Einrichtung prüfen

Nutzen Sie den dokumentierten Installationsweg des Repositorys und behalten Sie 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/layout-grid/SKILL.md

Keine benannte Laufzeitabhängigkeit; für sinnvolle Rasterwerte sind reale Inhaltsvorgaben erforderlich.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Vorgaben in diesem Brief an, bevor Sie den Skill ausführen.

Beispiel-Brief
Nutzen Sie layout-grid, um eine Dokumentationsseite mit Bereichs-Sidebar, Artikeltext und optionalem Inhaltsverzeichnis zu spezifizieren. Legen Sie Spaltenanzahl, Gutters, Ränder, Maximalbreiten und das Einklappverhalten fest. Erklären Sie, was zwischen Desktop und Mobilgerät passiert, und halten Sie die Lesebreite getrennt vom äußeren Seitenraster.

Ergebnis prüfen

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

  • Jede Zielbreite hat ausdrückliche Regeln für Ränder und Gutters.
  • Das Einklappen der Sidebar ist beschrieben und nicht nur vorausgesetzt.
  • Bewusste Rasterausnahmen sind benannt.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Tools, Zugangsdaten und Softwareabhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

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

Quellinhaber
Owl-Listener
Repository
Owl-Listener/designer-skills
Skill-Datei
ui-design/skills/layout-grid/SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-10-07 · 9a6930cf84a8
Redaktionelle Quellenzusammenfassung
Eine kompakte Referenz zu Rasteraufbau, Rastertypen, responsivem Verhalten und gängigen Seitenlayout-Mustern.

Originalzusammenfassung von OpenDesign auf Grundlage 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

Erfordert es ein Desktop-Raster mit 12 Spalten?

Nein. Die Quelle nennt übliche Spaltenanzahlen und mehrere Rastertypen; der Inhalt sollte die Auswahl bestimmen.

Gibt es CSS als Ausgabe?

Die Quelle verlangt dokumentierte Rasterspezifikationen, schreibt aber kein bestimmtes CSS-Framework und kein Code-Ergebnis vor.

Wie unterscheidet es sich von Responsive Design?

Dieser Skill konzentriert sich auf das strukturelle Raster. Umfassendere responsive Entscheidungen betreffen Inhaltspriorität, Bedienelemente und geräteübergreifende Interaktion.

OpenDesign

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

Halten Sie Brief, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladenDesign-Skills durchstöbern
Quelldatei im Upstream
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/layout-grid/SKILL.md