Webdesign-Experte

Erfahrener Webdesigner, der unverwechselbare visuelle Systeme für Webanwendungen erstellt.

Entscheidungspunkte

Layout-Ansatz Auswahl

WENN content-lastig (Blog, Dokumentation, Lernplattform)
├─ 12-Spalten-Rastersystem
├─ Hohe Textdichte mit klarer Hierarchie
└─ Konsistente Ränder für Lesbarkeit

WENN Marketing-/Conversion-fokussiert (SaaS, E-Commerce-Landingpage)
├─ Hero-Section-first-Design
├─ Asymmetrische Layouts für Dramatik erlaubt
└─ Große Leerräume, um Aufmerksamkeit zu lenken

WENN E-Commerce-/Katalog-lastig
├─ CSS Grid auto-fit für Produkte
├─ Kartenbasierte Layouts
└─ Filter/Suche prominent

WENN Dashboard/App-Oberfläche
├─ Sidebar + Hauptinhalt
├─ Datendichte priorisiert
└─ Navigation immer zugänglich

WENN Redaktions-/Magazinstil
├─ Gemischte Rastersysteme
├─ Große Bilder mit Zitaten
└─ Visuelle Vielfalt vor Konsistenz

Strategie für Farbpalette

WENN B2B/Unternehmenszielgruppe
├─ Blau als Primärfarbe (Vertrauen, Professionalität)
├─ Neutral-lastige Palette
└─ Minimale Akzentfarben

WENN Verbraucher-/Lifestyle-Marke
├─ Wärmere Primärfarben (Orange, Grün, Lila)
├─ Saisonale Akzentoptionen
└─ Emotional getriebene Entscheidungen

WENN Vielverkehrs-/Barrierefreiheitskritisch
├─ 4,5:1 Kontrastminimum durchgesetzt
├─ Farbenblind-getestete Kombinationen
└─ Dark-Mode-Varianten erforderlich

Entscheidungsbaum für visuelle Hierarchie

WENN Benutzerziel = sofortige Aktion (Anmeldung, Kauf)
├─ Hero-CTA oberhalb der Falte (obligatorisch)
├─ Einzelne primäre Aktion pro Seite
└─ Visuelles Gewicht auf Conversion-Elementen

WENN Benutzerziel = Konsum von Inhalten
├─ Inhaltsvorschau/-zusammenfassung zuerst
├─ Mehrere Engagement-Pfade in Ordnung
└─ Leseerfahrung optimiert

WENN Benutzerziel = Erkundung (Portfolio, Katalog)
├─ Raster-/Galerie-Layout primär
├─ Schnelles Scannen optimiert
└─ Miniaturansicht → Detail-Fluss

Fehlermodi

Design-by-Committee-Syndrom

Symptome: Mehrere visuelle Stile auf derselben Seite, widersprüchliche Markenbotschaften, kein klares Designsystem
Erkennungsregel: Wenn Sie 3+ verschiedene Button-Stile oder Schriftfamilien auf einer Seite sehen
Behebung: Designprinzipien-Dokument erstellen, Single Source of Truth durchsetzen, Zustimmung der Beteiligten zu Einschränkungen einholen

Dekoration über Funktion

Symptome: Animationen ohne Zweck, visuelle Elemente, die das Verständnis nicht fördern, langsames Laden aufgrund von Grafiken
Erkennungsregel: Wenn Sie nicht erklären können, wie jedes visuelle Element dem Benutzer hilft, sein Ziel zu erreichen
Behebung: Elemente entfernen, die nicht den Benutzerbedürfnissen dienen, jede Animation mit Benutzervorteil rechtfertigen

Mobile-Alternative-Muster

Symptome: Horizontales Scrollen auf Mobilgeräten, winzige Touch-Ziele, Desktop-Navigation auf kleinen Bildschirmen
Erkennungsregel: Wenn die mobile Version Zoomen oder horizontales Scrollen erfordert, um sie zu nutzen
Behebung: Mobile-First beginnen, auf echten Geräten testen, mindestens 44px Touch-Ziele sicherstellen

Niedrig-Kontrast-Barrierefreiheitsfehler

Symptome: Hellgrauer Text (#999) auf Weiß, schlechte Lesbarkeit bei Sonnenlicht, Benutzerbeschwerden über Textlesbarkeit
Erkennungsregel: Wenn irgendein Text beim Testen das WCAG 4,5:1 Kontrastverhältnis nicht erfüllt
Behebung: Kontrastprüfwerkzeuge verwenden, bei hellen Lichtverhältnissen testen, Option für hohen Kontrast bereitstellen

Zusammenbruch der Informationsarchitektur

Symptome: Benutzer finden primäre Inhalte nicht, Navigation entspricht nicht mentalen Modellen, hohe Absprungraten
Erkennungsregel: Wenn Benutzer die primäre Aufgabe nicht innerhalb von 3 Klicks oder 30 Sekunden erledigen können
Behebung: User Journey Mapping, Kartensortierung für Navigation, Prominenz für Schlüsselaktionen

Arbeitende Beispiele

Beispiel 1: SaaS-Dashboard Redesign

Kontext: B2B-Analyseplattform, Benutzer verbringen täglich 2+ Stunden in der Oberfläche

Entscheidungsprozess:

Zielgruppenanalyse: Power-User, die Effizienz über Ästhetik schätzen
Layout-Wahl: Sidebar-Navigation (immer zugänglich) + Hauptinhaltsbereich
Farbstrategie: Blau als Primärfarbe (#2563eb) für Vertrauen, minimale Akzente zur Reduzierung der kognitiven Belastung
Hierarchie: Datentabellen erhalten den meisten Platz, Aktionen sind sekundär, aber zugänglich

Wichtige Designentscheidungen:

Dichte Informationsanzeige (8px Abstandsskala)
Hoher Kontrast Text (#1f2937 auf #ffffff)
Konsistente Button-Größe (40px Höhe für einfaches Klicken)
Statusindikatoren verwenden semantische Farben (grün = gut, rot = Alarm)

Ergebnisvalidierung:

Aufgabenerledigung um 23% verbessert
Benutzerberichtete "Benutzerfreundlichkeit" erhöht
Support-Tickets zur Navigation um 40% gesunken

Beispiel 2: E-Commerce-Produktseite

Kontext: Modehändler, Mobile-First-Zielgruppe (70% mobilen Traffic)

Entscheidungsprozess:

Traffic-Muster: Mobile Browser, schnelle Entscheider
Layout-Wahl: Einspaltig mobil, zweispaltig Desktop
Visuelle Priorität: Produktbilder > Preis > Bewertungen > Spezifikationen
Conversion-Elemente: In den Warenkorb-Button klebrig auf Mobil, prominent aber nicht aufdringlich

Wichtige Designentscheidungen:

Hero-Produktbild füllt die Bildschirmbreite auf Mobil
Preis in großer, fetter Typografie sofort sichtbar
Zusammenfassung der Bewertungen über den Produktdetails
Größen-/Farbwähler mit sofortigem visuellem Feedback

Anfänger- vs. Experten-Ansatz:

Anfänger würde: Alle Produktinformationen oberhalb der Falte platzieren, kleine Produktbilder verwenden
Experte erkennt: Benutzer benötigen große Bilder zur Bewertung von Mode, preisbewusste Zielgruppe benötigt frühe Bewertungsvalidierung

Messbare Ergebnisse:

Mobile Conversion-Rate um 31% gesteigert
Durchschnittliche Sitzungsdauer erhöht (Benutzer erkunden mehr Produkte)
Warenkorbabbruch um 18% gesunken

Qualitätstore

Validieren eines Designplans

Geben Sie die Einhaltung der Qualitätstore des Designs als strukturierten Plan an (siehe schemas/design-plan.schema.json) und überprüfen Sie ihn deterministisch anstatt nur einen Mockup zu begutachten:

node scripts/design_audit.mjs --input plan.json

Der Prüfer gibt { pass, score, findings, recommendations } zurück und markiert die fünf oben genannten Fehlermodi namentlich: design-by-committee (zu viele Button-Stile/Schriftstärken/Größen), decoration-over-function, mobile-afterthought (320px horizontales Scrollen oder Sub-44px-Touch-Ziele), low-contrast (unter 4,5:1) und information-architecture collapse (Navigation, die nicht dem mentalen Modell des Benutzers entspricht). Siehe examples/expected-output.md für einen erfolgreichen und einen fehlschlagenden Durchlauf nebeneinander.

Referenzen

Datei	Laden, wenn
`references/layout-systems.md`	Das Raster-Entscheidungsbaum, die 8px-Abstandsskala, responsive Breakpoints oder die Mobile-First-/Konsistenz-Checklisten benötigt werden.
`references/color-accessibility.md`	Die minimale Palette, Farbpsychologie-Tabelle, Dark-Mode-Anleitung oder die WCAG 2.1 AA-Checkliste benötigt werden.
`references/tooling-integration.md`	21st.dev- oder Figma-MCP-Werkzeuge verwendet werden müssen, um von der Designrichtung zum Code zu gelangen.
`templates/output-template.md`	Eine wiederverwendbare Designplan-Vorlage benötigt wird, die vor der Prüfung ausgefüllt werden muss.
`examples/expected-output.md`	Die Form eines fertigen Designplan-Audits benötigt wird, sowohl bestanden als auch nicht bestanden.
`schemas/design-plan.schema.json`	Die Struktur eines Designplans programmatisch validiert werden muss.
`scripts/design_audit.mjs`	Deterministische Bewertung eines Designplans gegen die Qualitätstore und benannten Fehlermodi benötigt wird.
`agents/openai.yaml`	Ein Subagenten-Deskriptor für delegierte Designplan-Erstellung benötigt wird.

NICHT-FÜR-Grenzen

Verwenden Sie dieses Skill NICHT für:

Tiefe Typografie-Entscheidungen (Zeilenhöhenberechnungen, Zeichenabstand) → verwenden Sie typography-expert
Farbmathematik oder Palettenerstellung → verwenden Sie color-theory-palette-harmony-expert
Designsystem-Token-Architektur oder CSS-Variablen → verwenden Sie design-system-creator
Retro- oder historische Designstile → verwenden Sie windows-3-1-web-designer
Native Mobile-App-Oberflächendesign → delegieren Sie an native-app-designer
Detaillierte Barrierefreiheitsprüfungen → verwenden Sie accessibility-expert
Animationen und Mikrointeraktionsspezifikationen → verwenden Sie motion-design-expert

Grenzindikatoren:

Wenn der Benutzer nach spezifischen Schriftpaar-Empfehlungen fragt → typography-expert
Wenn der Benutzer HSL-Farbberechnungen benötigt → color-theory-expert
Wenn der Benutzer CSS-Architekturberatung wünscht → design-system-creator
Wenn der Benutzer eine WCAG-Compliance-Checkliste benötigt → accessibility-expert

Layout-QA-Prüfpunkt (mechanisch – vor Versand ausführen)

Bevor Sie eine gerenderte Seite, ein Artefakt, Dashboard, Deck oder Komponente für fertig erklären, führen Sie den mechanischen Überlauf-/Kollisionsprüfer aus. Er rendert die Seite headless und markiert Text-gegen-Text-Kollisionen, abgeschnittene/ellipsis-gekürzte Elemente, Text, der aus seinem Behälter tritt, und horizontales Seiten-Scrollen – die visuellen Mängel, die ein Screenshot verbirgt und die nur bei einer bestimmten Breite oder in einem Theme auftreten.

Lösen Sie layout-overflow-guard aus dem aktiven Skill-Katalog auf, bevor Sie ihn ausführen. Der Befehl unten zeigt den Standard-Claude-Installationspfad; verwenden Sie den Pfad, der von Ihrer Umgebung gemeldet wird. Wenn das Skill fehlt, installieren oder synchronisieren Sie es, anstatt dieses Tor zu überspringen.

python3 ~/.claude/skills/layout-overflow-guard/scripts/check_layout.py <datei-oder-url> \
  --widths 1280,1100,860,720,390 --themes light,dark

Sie müssen nicht check_layout.py lesen – rufen Sie es mit dem Bash-Werkzeug auf und handeln Sie basierend auf seinem Bericht und Exit-Code (ungleich null = ein Fehler). Die Quelle des Skripts gelangt nie in Ihren Kontext; nur seine Ergebnisse. Bringen Sie es auf null Verstöße über jede Breite und beide Themes, bevor Sie ausliefern. Vollständige Details: das layout-overflow-guard-Skill.

Skill-Bundle-Index

Jede Datei in diesem Skill und wann sie zu öffnen ist. Automatisch generiert; führen Sie scripts/index_references.py --fix aus.

root

CHANGELOG.md — Changelog — Alle bemerkenswerten Änderungen am web-design-expert-Skill werden in dieser Datei dokumentiert.
README.md — Webdesign-Experte — Erstellt einzigartige visuelle Web-Systeme: Markenidentität, Farbpaletten, Layout-Komposition und responsive UI-Muster für Webanwendungen.

agents/

agents/openai.yaml — openai (data/schema)

examples/

examples/expected-output.md — Beispielausgabe: Web-Designplan-Audit — Szenario: Ein SaaS-Marketing-Seiten-Redesign wurde als strukturierter Designplan spezifiziert (entspricht schemas/design-plan.schema.json) und ist
examples/sample-input.json — Beispiel-Eingabe (data/schema)

references/

references/color-accessibility.md — Farbe & Barrierefreiheit — Farbpaletten, Psychologie, Dark Mode und WCAG-Compliance.
references/layout-systems.md — Layout-Systeme — Rastersysteme, Abstandsskalen und Layout-Komposition.
references/tooling-integration.md — Design-Tooling-Integration — 21st.dev, Figma MCP und Komponenten-Workflows.

schemas/

schemas/design-plan.schema.json — design-plan.schema (data/schema)

scripts/

scripts/design_audit.mjs

templates/

templates/output-template.md — Web-Designplan-Vorlage — [Ein-Satz-Beschreibung des Produkts/der Seite, die dieser Designplan abdeckt.] Feldnotizen: - primaryActionObviousWithin3s — wahr nur, wenn ein frischer

curiositech/port-daddy

Was ist port-daddy?

In Ihrer bevorzugten KI fragen

Dokumentation