high-end-visual-designvon Leonxlnx

High End Visual Design Skill.

Ein Skill für Claude Code und Codex für UI-Design: vermittelt hochwertige Agentur-Details: Typografie, Abstände, Schatten, Karten und Bewegung.

Web & UI

OpenDesign herunterladen Anleitung ansehen

Leonxlnx/taste-skill · skills/soft-skill/SKILL.mdSKILL.md

--- name: high-end-visual-design description: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic. --- ## 1. Meta Information & Core Directive ## 2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS) ## 3. THE CREATIVE VARIANCE ENGINE ## 4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY) ## 5. MOTION CHOREOGRAPHY (FLUID DYNAMICS) ## 6. PERFORMANCE GUARDRAILS

Front Matter und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 10.545 Zeichen insgesamt

01 Was es tut

Was der high-end-visual-design Skill in Claude Code und Codex leistet

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 bringt Coding-Agents dazu, Visual Design auf Agentur-Niveau im Wert von 150.000 $+ zu erzeugen, indem er exakte typografische Entscheidungen, räumlichen Rhythmus, Schattentechniken, Card-Strukturen und fließende Bewegungsmuster festlegt. Er verbietet generische Standards (Inter, Roboto, dickstrichige Icons, harte Schatten, Standard-Easing) und erzwingt hochwertige Alternativen wie Geist oder Clash Display, ultraleichte Icons und benutzerdefinierte Cubic-Bezier-Übergänge.

Jede Ausgabe muss einen einzigartigen Vibe-Archetyp (Ethereal Glass, Editorial Luxury oder Soft Structuralism) mit einem Layout-Archetyp (Asymmetrical Bento, Z-Axis Cascade oder Editorial Split) kombinieren, um Wiederholungen zu vermeiden. Komponenten verwenden verschachtelte Double-Bezel-Umhüllungen, Button-in-Button-Trailing-Icons, massiven Leerraum (py-24 bis py-40) und scroll-interpolierte Einblendanimationen. Jede Bewegung simuliert reale Physik ausschließlich über transform und opacity, mit strikten Performance-Leitplanken für Mobile.

Was er erzeugt

Makelloser, pixelgenauer React/Tailwind/HTML-Code, der die gewählten Vibe- und Layout-Archetypen mit Double-Bezel-Komponentenstrukturen, benutzerdefinierter Cubic-Bezier-Bewegung und mobil-responsivem Kollaps umsetzt

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Variance Engine auslösen
Bevor der Agent Code schreibt, wählt er stillschweigend einen Vibe-Archetyp und einen Layout-Archetyp aus vordefinierten Premium-Kombinationen basierend auf dem Kontext des Prompts aus, um eine einzigartig maßgeschneiderte Ausgabe zu gewährleisten.
02
Hintergrund und Typografie gerüstartig aufbauen
Die gewählte Textur (OLED-Schwarz mit radialen Verläufen, warmes Creme mit Rauschüberlagerung oder Silbergrau mit weichen Schatten) festlegen und massive Typografiegrößen mit übertriebenem Makro-Weißraum setzen.
03
Verschachtelte Komponentenstrukturen entwerfen
Alle wichtigen Karten, Eingabefelder und Grids mit der Double-Bezel-Technik aufbauen: Eine äußere Hülle mit dünnem Rahmen und Innenabstand umschließt einen inneren Kern mit eigenem Hintergrund und mathematisch berechnetem kleinerem Radius.
04
Fließende Bewegung choreografieren
Benutzerdefinierte Cubic-Bezier-Übergänge für alle Zustandsänderungen einsetzen, gestaffelte Navigations-Enthüllungen mit translate-y- und Opacity-Verschiebungen sowie magnetische Button-Hover-Physik mit diagonaler Translation und Skalierung.
05
Scroll-Interpolation anwenden
Elemente treten mit einer sanften Fade-up-Animation (translate-y-16 blur-md opacity-0, die sich über 800ms+ auflöst) in den Viewport ein, wobei IntersectionObserver oder Framer Motions whileInView verwendet werden, niemals window-Scroll-Listener.
06
Gegen die Vor-Ausgabe-Checkliste validieren
Den Code anhand einer 11-Punkte-Matrix bewerten, die sicherstellt, dass keine verbotenen Muster vorliegen, die Archetyp-Auswahl korrekt ist, die Double-Bezel-Architektur eingehalten wird, benutzerdefiniertes Easing verwendet wird, der mobile Kollaps funktioniert und die Animationen GPU-sicher sind, bevor geliefert wird.

02 Finden Sie Ihren Favoriten

Wann Sie den high-end-visual-design Skill verwenden

Das high-end-visual-design-Skill in Claude Code oder Codex verwenden, wenn die Aufgabe UI-Design dieser Art ist. Passform und Grenzen unten sind der eigenen Datei des Skills entnommen.

Gut geeignet

Entwicklung von Digitalerlebnissen auf Agenturniveau ab 150.000 $ für SaaS-, KI-, Tech-, Lifestyle-, Immobilien-, Konsumgüter-, Gesundheits- oder Portfolio-Projekte, die obsessive Mikrointeraktionen und filmischen räumlichen Rhythmus erfordern
Erstellung von Interfaces, die haptische Tiefe und makellose fließende Bewegung mit benutzerdefinierten Cubic-Bezier-Übergängen und scroll-interpolierten Eintrittsanimationen ausstrahlen müssen

Grenzen kennen

Projekte, die Inter, Roboto, Arial, Open Sans oder Helvetica als Typografie erfordern, können diese Skill nicht verwenden
Designs, die standardmäßige, dickstrichige Lucide-, FontAwesome- oder Material-Icons benötigen, sind mit der Anforderung dieser Skill an ultraleichte Icons nicht kompatibel
Interfaces mit randlosen, oben festgeklebten Sticky-Navbars oder symmetrischen 3-spaltigen Bootstrap-artigen Grids ohne massive Weißraumlücken verstoßen gegen die Layout-Vorgaben
Bewegungsmuster mit Standard-linear- oder ease-in-out-Übergängen oder unmittelbaren Zustandsänderungen ohne Interpolation sind ausdrücklich verboten

Was Sie bereitstellen sollten

Prompt-Kontext für die Archetyp-AuswahlDie Nutzeranfrage sollte den Projekttyp (SaaS, Lifestyle, Portfolio usw.) angeben, damit der Agent die passende Kombination aus Vibe- und Layout-Archetyp aus der Variance Engine auswählen kann.

03 Innerhalb des Skills

Regeln, die die high-end-visual-design Skill Claude Code und Codex vorgibt

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

Alle generischen Standardwerte verbieten
Niemals Inter, Roboto, Arial, Open Sans, Helvetica, dickstrichige Lucide- oder Material-Icons, 1px durchgezogene graue Rahmen, harte Drop-Shadows (shadow-md, rgba(0,0,0,0.3)), randlose Sticky-Navbars, symmetrische Bootstrap-Grids oder linear-/ease-in-out-Übergänge verwenden.
Niemals dasselbe Layout zweimal wiederholen
Der Agent muss dynamisch verschiedene hochwertige Layout-Archetypen und Texturprofile kombinieren und dabei strikt an der Elite-Designsprache festhalten, sodass keine zwei Ausgaben identisch aussehen.
Nur hochwertige Typografie und Icons verwenden
Gehen Sie davon aus, dass Geist, Clash Display, PP Editorial New oder Plus Jakarta Sans als Schriftarten verfügbar sind. Verwenden Sie nur ultraleichte, präzise Icon-Linien wie Phosphor Light oder Remix Line.
Die Double-Bezel-Technik auf alle wichtigen Komponenten anwenden
Platzieren Sie hochwertige Karten oder Container niemals flach.
Doppelter Standard-Innenabstand für Makro-Whitespace
Verwenden Sie py-24 bis py-40 für Section-Padding, damit das Design großzügig atmen kann. Standard-Padding reicht für ein hochwertiges Gefühl nicht aus.
Nur Transform und Opacity animieren
Animieren Sie niemals top, left, width oder height, da diese Layout-Neuberechnungen auslösen. Verwenden Sie ausschließlich transform und opacity für GPU-beschleunigte, performance-sichere Bewegung.
backdrop-blur ausschließlich auf fixierte Elemente beschränken
Wenden Sie backdrop-blur ausschließlich auf fixierte oder sticky Elemente wie Navbars und Overlays an.
Alle asymmetrischen Layouts unterhalb von 768px zusammenklappen
Jedes asymmetrische Layout oberhalb des md:-Breakpoints muss auf Viewports unter 768px konsequent auf w-full, px-4, py-8 zurückfallen.

04 In Betrieb nehmen

high-end-visual-design in Claude Code oder Codex installieren

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

high-end-visual-design zu Claude Code, Codex oder Ihrem Agent hinzufügen

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

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill high-end-visual-design

Generische skills-CLI-Form für skills/soft-skill/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste UI-Design-Aufgabe geben

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

Starter prompt

Design a hero section for [SaaS product name] that feels like a $150k agency build. The product is an AI-powered analytics platform targeting enterprise clients. Include a floating navigation pill, a massive headline with an eyebrow tag, and a primary CTA with nested trailing icon. Use the Ethereal Glass vibe with deepest OLED black background and radial mesh gradients. Apply the Asymmetrical Bento layout with varying card sizes showcasing three key features. Ensure all elements have scroll-interpolated entry animations and the layout collapses gracefully on mobile.

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 keine verbotenen Schriftarten (Inter, Roboto, Arial, Open Sans, Helvetica), Icons (dickstrichige Lucide, FontAwesome, Material), Rahmen (1px solid gray), Schatten (shadow-md, harte Drop-Shadows), Layouts (randständige, sticky Navbars, symmetrische Grids) oder Bewegungsmuster (linear, ease-in-out) vorhanden sind
Bestätigen Sie, dass ein Vibe-Archetyp (Ethereal Glass, Editorial Luxury oder Soft Structuralism) und ein Layout-Archetyp (Asymmetrical Bento, Z-Axis Cascade oder Editorial Split) bewusst ausgewählt und angewendet wurden
Prüfen Sie, dass alle wichtigen Karten und Container die Double-Bezel-Architektur mit verschachtelten Ebenen verwenden: äußere Schale (Haarlinien-Rahmen, Padding, großer Radius) umschließt inneren Kern (eigener Hintergrund, kleinerer berechneter Radius)
Stellen Sie sicher, dass das Section-Padding mindestens py-24 beträgt und das Layout mit übertriebenem Makro-Whitespace atmet
Validieren Sie, dass alle Übergänge benutzerdefinierte cubic-bezier-Kurven verwenden und kein lineares oder ease-in-out-Easing vorhanden ist
Bestätigen Sie, dass Scroll-Entry-Animationen vorhanden sind, sodass kein Element statisch wirkt, und dass alle Animationen ausschließlich transform und opacity nutzen, ohne layout-auslösende Eigenschaften wie top, left, width oder height zu animieren

In OpenDesign importieren Sie high-end-visual-design über seinen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend 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: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill-Datei: skills/soft-skill/SKILL.md Inhalts-Checksumme bei Verifizierung erfasst; Commit ccbc156
License: MIT Aus LICENSE.
Repository-Sterne: 86.946 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository Leonxlnx/taste-skill, das 11 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für high-end-visual-design.
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

Meta-Informationen & KerndirektiveDefiniert die Vanguard_UI_Architect-Persona, das Agenturziel von 150.000 $+ und das Variance Mandate, das eindeutige Ergebnisse verlangt
DIE „ABSOLUTE ZERO“-DIREKTIVE (STRIKTE ANTI-PATTERNS)Listet alle verbotenen Schriftarten, Icons, Rahmen, Schatten, Layouts und Bewegungsmuster auf, die zu einem sofortigen Design-Fehlschlag führen
DIE CREATIVE VARIANCE ENGINELegt drei Vibe-Archetypen und drei Layout-Archetypen fest, die für einzigartige, hochwertige Ergebnisse mit Mobile-Collapse-Regeln kombiniert werden
HAPTISCHE MIKRO-ÄSTHETIK (COMPONENT MASTERY)Beschreibt die verschachtelte Double-Bezel-Architektur, das Button-in-Button-Trailing-Icon-Muster und den makro-großzügigen Whitespace-Rhythmus mit Eyebrow-Tags
MOTION-CHOREOGRAFIE (FLUID DYNAMICS)Definiert individuelle cubic-bezier-Übergänge, Fluid Island Nav mit Hamburger-Morph, magnetische Button-Hover-Physik und Scroll-Interpolationsanimationen
PERFORMANCE-LEITPLANKENBeschränkt Animationen auf transform und opacity, begrenzt backdrop-blur auf fixierte Elemente und erzwingt z-index-Disziplin
AUSFÜHRUNGSPROTOKOLLDefiniert eine exakte fünfstufige Sequenz von der stillen Archetyp-Auswahl über Scaffolding, Architektur und Choreografie bis zur pixelgenauen Auslieferung
CHECKLISTE VOR DER AUSGABEListet elf verbindliche Prüfpunkte gegen verbotene Muster, Archetyp-Anwendung, Double-Bezel-Architektur, Bewegungsqualität, mobiles Zusammenfalten und Performance auf

Die eigene Beschreibung des Skills

Lehrt die KI, wie eine High-End-Agentur zu gestalten. Definiert die exakten Schriften, Abstände, Schatten, Card-Strukturen und Animationen, die eine Website hochwertig wirken lassen. Blockiert alle üblichen Standardeinstellungen, die KI-Designs billig oder generisch aussehen lassen.

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 10.545 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum high-end-visual-design Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Enthält dieser Skill JavaScript-Bibliotheken oder Frameworks?

Der Skill konzentriert sich auf visuelle Designmuster und empfiehlt für Scroll-Reveals IntersectionObserver oder Framer Motions whileInView, enthält oder installiert diese Bibliotheken jedoch nicht.

Es wird ausdrücklich angewiesen, niemals window.addEventListener('scroll') zu verwenden, da dies fortlaufende Reflows verursacht und die mobile Performance killt. Sie müssen die Animationsbibliotheken selbst bereitstellen.

High End Visual Design

Führen Sie high-end-visual-design an einer echten UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie high-end-visual-design über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill high-end-visual-design

Was der high-end-visual-design Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann Sie den high-end-visual-design Skill verwenden

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die die high-end-visual-design Skill Claude Code und Codex vorgibt

Alle generischen Standardwerte verbieten

Niemals dasselbe Layout zweimal wiederholen

Nur hochwertige Typografie und Icons verwenden

Die Double-Bezel-Technik auf alle wichtigen Komponenten anwenden

Doppelter Standard-Innenabstand für Makro-Whitespace

Nur Transform und Opacity animieren

backdrop-blur ausschließlich auf fixierte Elemente beschränken

Alle asymmetrischen Layouts unterhalb von 768px zusammenklappen