visual-design-foundationsvon Seth Hobson

Visual Design Foundations Skill.

Ein Claude Code- und Codex-Skill für Brand- und Design-System-Arbeit: Typografie, Farbtheorie, Abstands-Systeme und Ikonografie für kohärente Visuals.

Brand & Design Systems

OpenDesign herunterladen Anleitung ansehen

wshobson/agents · plugins/ui-design/skills/visual-design-foundations/SKILL.mdSKILL.md

--- name: visual-design-foundations description: Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency. --- ## When to Use This Skill ## Core Systems ## Quick Start: Design Tokens in Tailwind ## Typography Best Practices ## Color Theory ## Spacing Guidelines

Front Matter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 7.218 Zeichen insgesamt

01 Was es tut

Was der visual-design-foundations Skill in Claude Code und Codex bewirkt

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill vermittelt, wie man kohärente, barrierefreie visuelle Systeme mit Typografie-Skalen, Farbtheorie, Abstandssystemen und Icon-Grundlagen aufbaut. Er behandelt die Einrichtung von Design-Tokens mit modularen Typ-Skalen, 8-Punkt-Raster-Abständen, semantischen Farbpaletten mit WCAG-Kontrastanforderungen und Icon-Größensystemen.

Der Skill liefert konkrete Implementierungsmuster für Tailwind CSS, responsive fließende Typografie, Dark-Mode-Theming mit semantischen Tokens und Barrierefreiheitsvalidierung. Er adressiert typische Herausforderungen im visuellen Design wie inkonsistente Abstände, schlechten Kontrast und willkürliche Magic Numbers, indem er verhältnisbasierte Skalen und wiederverwendbare Token-Systeme definiert.

Was er erzeugt

Design-Token-Definitionen in CSS Custom Properties oder Tailwind-Konfiguration
Icon-Komponente mit Größenvarianten

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Modulare Design-Tokens Etablieren
Definieren Sie Typografie-Skalen mit verhältnisbasierter Größenabstufung (0,75rem bis 3rem), 8-Punkt-Raster-Abständen (4px bis 64px) und semantischen Farb-Tokens für Marke, Zustände und Neutrals.
02
Responsive Typografie Anwenden
Verwenden Sie fließende Typografie mit clamp() für viewport-responsive Größenanpassung und halten Sie die optimale Lesebreite bei maximal 65 Zeichen.
03
Barrierefreie Farbpaletten Implementieren
Erstellen Sie Farbsysteme, die die WCAG-Kontrastverhältnisse erfüllen: 4,5:1 für Fließtext, 3:1 für große Texte und UI-Komponenten, mit programmatischer Kontrastprüfung.
04
Konsistente Icon-Systeme erstellen
Definieren Sie Icon-Größenskalen von 12px bis 32px mit wiederverwendbaren Komponenten, die Size-Props akzeptieren und flex-shrink-0-Verhalten beibehalten.
05
Dark Mode mit semantischen Tokens gestalten
Verwenden Sie semantische Token-Benennung nach Zweck statt nach Erscheinungsbild, damit Themenwechsel über Datenattribute ohne Komponentenänderungen möglich sind.
06
Vertikalen Rhythmus beibehalten
Wenden Sie konsistente Abstandsregeln auf benachbarte Elemente an, indem Sie definierte Skalenwerte verwenden, um visuelle Harmonie im gesamten Interface zu schaffen.

02 Finden Sie Ihren Favoriten

Wann Sie den visual-design-foundations Skill verwenden

Verwenden Sie den Skill visual-design-foundations in Claude Code oder Codex, wenn es sich um Brand- und Designsystem-Aufgaben dieser Art handelt. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Etablierung von Design-Tokens für ein neues Projekt
Erstellen oder Verfeinern eines Abstands- und Größensystems
Erstellen barrierefreier Farbpaletten
Gestalten von Ikonsystemen und visuellen Assets
Designs auf visuelle Konsistenz prüfen

Was Sie bereitstellen sollten

Theming-SpezifikationenAnforderungen für die Implementierung von Dark Mode oder Multi-Theme-Systemen mit semantischen Token-Strategien

03 Innerhalb des Skills

Regeln, die das visual-design-foundations Skill Claude Code und Codex vorgibt

4 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt — der Teil der Datei, der das Ergebnis verändert.

8-Punkt-Grid-Abstände verwenden
Alle Abstandswerte müssen Vielfache von 4px sein, von 0,25rem (4px) bis 4rem (64px), unter Verwendung der definierten Spacing-Scale-Tokens.
Strikte Zeilenhöhen-Bereiche anwenden
Überschriften müssen eine Zeilenhöhe von 1,1 bis 1,3 verwenden, Fließtext 1,5 bis 1,7 und UI-Labels 1,2 bis 1,4 für gute Lesbarkeit.
Textbreite auf 65 Zeichen begrenzen
Setzen Sie max-width auf 65ch für Fließtext, um eine optimale Lesebreite zu gewährleisten und Augenbelastung auf breiten Bildschirmen zu vermeiden.
Komponenten-Abstandsbereiche anwenden
Card-Padding muss 16-24px betragen, Section-Gaps 32-64px, Form-Field-Gaps 16-24px und Icon-Text-Gaps 8px, unter Verwendung der Spacing Scale.

04 In Betrieb nehmen

Installieren Sie visual-design-foundations in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie visual-design-foundations zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/wshobson/agents --skill visual-design-foundations

Generisches skills-CLI-Format für plugins/ui-design/skills/visual-design-foundations/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Brand- und Design-System-Arbeitsaufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Create a design token system for [project name] with an 8-point spacing grid, modular typography scale from 12px to 48px, and an accessible color palette including primary brand color [hex value], semantic status colors for success/warning/error, and a complete neutral gray scale. Implement both light and dark mode variants using semantic token naming. Include Tailwind configuration and verification that all text combinations meet WCAG AA contrast requirements.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Prüfen Sie, dass alle Farbkombinationen von Text und UI-Komponenten die WCAG-Kontrastverhältnisse mittels programmatischer Prüfung erfüllen
Testen Sie, dass das Font-Loading font-display swap verwendet, um Layout-Verschiebungen zu verhindern
Stellen Sie sicher, dass responsive Typografie mithilfe von clamp-Funktionen gleichmäßig über Viewport-Größen skaliert

In OpenDesign importieren Sie visual-design-foundations über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill-Datei: plugins/ui-design/skills/visual-design-foundations/SKILL.md Inhaltsprüfsumme bei der Verifizierung aufgezeichnet; Commit 4236bb9
License: MIT Aus LICENSE.
Repository-Sterne: 39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository wshobson/agents, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für visual-design-foundations.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann dieses Skill verwendenListet Szenarien wie das Einrichten von Tokens, Erstellen von Paletten, Prüfen der Konsistenz und Implementieren von Dark Mode auf
KernsystemeDefiniert eine modulare Typografieskala, ein 8-Punkt-Abstandsraster und eine semantische Farb-Token-Struktur mit CSS Custom Properties
Schnellstart: Design Tokens in TailwindEnthält ein Tailwind-Konfigurationsbeispiel, das das Theme um eigene Fonts, Größen, Farben und Abstandswerte erweitert
Typografie – Best PracticesBehandelt Font-Pairing-Kombinationen, responsive fließende Typografie mit clamp und die Vermeidung von Layout-Shifts beim Laden von Fonts
FarbtheorieBeschreibt WCAG-Kontrastanforderungen, eine Dark-Mode-Implementierungsstrategie und eine Funktion zur programmatischen Kontrastprüfung
AbstandsrichtlinienLegt Abstandsbereiche für Komponenten fest und zeigt vertikale Rhythmusmuster für Fließtext
IconografieDefiniert ein Icon-Größensystem von 12px bis 32px und liefert eine TypeScript-Implementierung einer Icon-Komponente
Best PracticesSieben Prinzipien, darunter das Festlegen von Constraints, das Dokumentieren von Entscheidungen, das Testen der Zugänglichkeit und die Verwendung semantischer Benennungen
Häufige ProblemeListet Probleme wie inkonsistente Abstände, schlechten Kontrast, Font-Überladung, Magic Numbers und fehlende Dark-Mode-Planung auf

Die eigene Beschreibung des Skills

„Wenden Sie Typografie, Farbtheorie, Abstandssysteme und Ikonografie-Prinzipien an, um kohärente visuelle Designs zu erstellen. Verwenden Sie den Skill beim Etablieren von Design-Tokens, beim Aufbau von Style Guides oder zur Verbesserung visueller Hierarchie und Konsistenz."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 7.218 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

Visual Design Foundations

Führen Sie visual-design-foundations auf einer echten Brand- und Designsystem-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie visual-design-foundations über den SKILL.md-Link, fügen Sie die obige Eingabe ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen