layout
Erstellen Sie polierte Layouts mit systematischer Abstufung
Beheben Sie monotone Raster und inkonsistente Abstufung, die Oberflächen amateurhaft wirken lassen. Diese Fähigkeit etabliert systematische Abstufungsskalen, visuellen Rhythmus und klare Hierarchie, um generische Layouts in beabsichtigte Kompositionen zu transformieren.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "layout". Mein Dashboard hat zufällige Abstufungswerte wie padding: 13px, 27px, 41px, die überall verstreut sind.
Erwartetes Ergebnis:
- Etablieren Sie eine rem-basierte Abstufungsskala: 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem, 3rem
- Ersetzen Sie beliebige Werte: 13px → 0.75rem, 27px → 1.5rem, 41px → 2.5rem
- Erstellen Sie CSS-benutzerdefinierte Eigenschaften für semantische Tokens: --space-section-inner, --space-card-padding
Verwendung von "layout". Jeder Bereich meiner Landingpage verwendet dasselbe 3-Spalten-Kartenraster. Es wirkt monoton.
Erwartetes Ergebnis:
- Variieren Sie die Bereichsstruktur: 2-Spalten-Feature-Spotlight, 4-Spalten-kompaktes Raster, durchgehende Breite Hero
- Mischen Sie Inhaltstypen: Testimonial-Zitat, Feature-Vergleichstabelle, Schritt-für-Schritt-Anleitung
- Wenden Sie asymmetrische Layouts an: versetztes Bild mit Text, gestaffelte Kartengrößen mit 2-Spalten-Spannen
Sicherheitsaudit
SicherStatic scanner flagged 27 patterns but all are false positives. The detected 'external_commands' and 'weak cryptographic' patterns are CSS syntax references (custom properties like --space-xs, grid-template-areas) and design terminology (spacing scales, visual hierarchy). No executable code, network requests, or data exfiltration found. This is a documentation-only skill.
Probleme mit niedrigem Risiko (2)
Qualitätsbewertung
Was du bauen kannst
Frontend-Entwickler behebt inkonsistente Abstufung
Ein Entwickler bemerkt, dass sein Dashboard zufällige Padding-Werte (13px, 27px, 41px) verwendet. Er ruft die Fähigkeit auf, um eine rem-basierte Abstufungsskala zu etablieren und beliebige Werte durch systematische Tokens zu ersetzen.
Designer durchbricht Kartenraster-Monotonie
Ein Produktdesigner sieht, dass seine Marketing-Seite sechsmal identische Icon-Überschrift-Text-Karten wiederholt. Er nutzt die Fähigkeit, um Kartengrößen zu variieren, asymmetrische Layouts einzuführen und Nicht-Karten-Inhaltsbereiche zu mischen.
Team verbessert visuelle Hierarchie
Ein Startup-Team hat eine Landingpage für eine Funktion, auf der kein Element hervorsticht. Der Squint-Test zeigt keine klare Hauptaktion. Sie rufen die Fähigkeit auf, um großzügigen Weißraum, variierte Abstufung und strategisches Gewicht anzuwenden, um die Aufmerksamkeit der Benutzer zu lenken.
Probiere diese Prompts
Überprüfen Sie meine aktuellen Abstufungswerte und etablieren Sie eine konsistente Skala. Das Layout wirkt beliebig und ich möchte systematische Abstufung.
Meine Seite verwendet überall identische Kartenraster. Helfen Sie mir, visuelle Vielfalt zu schaffen und gleichzeitig Zusammenhalt zu wahren.
Wenden Sie den Squint-Test auf mein Layout an. Die wichtigsten Elemente stechen nicht hervor.
Überprüfen Sie meine Verwendung von CSS Grid im Vergleich zu Flexbox. Verwende ich das richtige Werkzeug für jedes Layout-Muster?
Bewährte Verfahren
- Rufen Sie /impeccable auf, bevor Sie diese Fähigkeit verwenden, um Designkontext und Anti-Pattern-Bewusstsein zu etablieren
- Wenden Sie den Squint-Test an, um die Hierarchie zu überprüfen – verschwimmen Sie Ihre Sicht, um primäre, sekundäre und gruppierte Elemente zu identifizieren
- Verwenden Sie gap für Geschwister-Abstufung anstelle von Margins, um Margin-Collapse-Komplikationen zu vermeiden
- Wählen Sie Flexbox für 1D-Layouts (Navigationsleisten, Schaltflächengruppen) und Grid für 2D-Layouts (Dashboards, Seitenstruktur)
- Verwenden Sie clamp() für fließende Abstufung, die elegant über Viewport-Größen skaliert
Vermeiden
- Verwendung beliebiger Abstufungswerte außerhalb einer definierten Skala – Zufälligkeit zerstört visuellen Zusammenhalt
- Alle Abstufung gleich zu machen – Vielfalt in enger gegenüber großzügiger Abstufung schafft Rhythmus und Hierarchie
- Karten in Karten zu verschachteln – verwenden Sie stattdessen Abstufung und Trennlinien für interne Hierarchie
- Standardmäßig Hero-Metrik-Layouts mit gefälschten Statistiken zu verwenden – zeigen Sie tatsächliche Benutzerdaten oder vermeiden Sie das Muster
- Jedes Element zu zentrieren – linksbündiger Inhalt mit asymmetrischen Kompositionen wirkt gestalteter
- Verwendung beliebiger z-Index-Werte (999, 9999) – bauen Sie eine semantische Skala auf (Dropdown → sticky → Modal)