high-end-visual-design
Premium-Agenturqualität-Schnittstellen entwerfen
Die meisten KI-Tools erzeugen generische, vorlagenbasierte UI-Designs, denen es an Eleganz fehlt. Diese Fähigkeit bietet exakte Design-Regeln für Schriften, Abstände, Schatten, Kartenstrukturen und Animationen, um Schnittstellen zu erstellen, die aussehen, als kämen sie von einer hochwertigen Design-Agentur.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "high-end-visual-design". Erstelle eine Hero-Sektion für ein KI-Startup mit dunklem Glassmorphism-Stil
Erwartetes Ergebnis:
- Eine schwebende Navbar mit einer Glas-Pillenform sitzt oben mit großzügigen Abständen. Der Hero verwendet einen tiefen OLED-Schwarz-Hintergrund mit einem subtilen lila radialen Gradienten. Die Headline verwendet eine große Grotesk-Schrift mit einer Augenbrauen-Tag-Badge darüber. Ein Call-to-Action-Button mit einem verschachtelten Folgepfeil-Symbol befindet sich darunter. Der gesamte Bereich verwendet großzügiges vertikales Padding mit sanften Cubic-Bezier-Übergängen bei interaktiven Elementen.
Verwendung von "high-end-visual-design". Gestalte eine Kartenkomponente für ein Premium-Dashboard
Erwartetes Ergebnis:
- Die Karte verwendet das Doppelrahmen-Muster mit einem äußeren Hüllen-Wrapper bei 1,5 Rem Eckenradius und einem subtilen Ring-Rahmen. Der innere Kern hat seine eigene Hintergrundfarbe mit einem Inset-Highlight-Schatten und einem berechneten kleineren Radius für konzentrische Kurven. Hover-Zustände beinhalten eine subtile Skalierung und diagonale Icon-Translation. Die Karte sitzt auf einem dunklen Hintergrund mit ambientem diffundiertem Schatten.
Sicherheitsaudit
SicherThe static analyzer flagged 107 patterns, but all are false positives. The 94 external_commands detections are markdown inline code backticks (e.g., `Vanguard_UI_Architect`, `backdrop-blur-2xl`), not shell execution. The 13 high-risk cryptographic detections are CSS hex color values (e.g., #050505, #FDFBF7) misidentified as weak algorithms. The 4 system reconnaissance detections are triggered by dollar signs in prices ($150k) and unrelated text. The file contains only markdown design guidance with no executable code, no network access, and no filesystem operations. Safe to publish.
Qualitätsbewertung
Was du bauen kannst
Premium-Landingpage erstellen
Generiere eine hochkonvertierende Landingpage mit Glassmorphism-Effekten, gestaffelten Animationen und asymmetrischem Bento-Grid-Layout.
Vorhandenes Dashboard neu gestalten
Verwandle ein einfaches Admin-Dashboard in eine Agentur-qualität-Schnittstelle mit verschachtelter Kartenarchitektur und sanften Hover-Interaktionen.
Portfolio-Website erstellen
Erstelle eine Editorial-Style-Portfolio mit massiver Typografie, sanften Schatten und filmischen Scroll-Animationen.
Probiere diese Prompts
Erstelle eine Hero-Sektion für ein SaaS-Produkt mit dem ätherischen Glas-Archetyp und asymmetrischem Bento-Layout.
Baue einen Drei-Stufen-Preiskarten-Bereich mit doppeltem Rahmen-Architektur und magnetischen Hover-Effekten auf dem primären Call-to-Action-Button.
Gestalte eine schwebende, pillenförmige Navigationsleiste mit einem sich verwandelnden Hamburger-Menü, das sich zu einer Vollbild-Überlagerung mit gestaffelten Link-Enthüllungen erweitert.
Erstelle einen Testimonial-Bereich im Editorial-Luxus-Archetyp mit Z-Achsen-Kaskaden-Layout, Serif-Typografie und scroll-ausgelösten Fade-up-Animationen.
Bewährte Verfahren
- Wähle immer einen Vibe-Archetyp und einen Layout-Archetypen, bevor Code generiert wird, um konsistente Design-Sprache zu gewährleisten
- Verwende transform und opacity für alle Animationen, um GPU-Leistung zu erhalten und Layout-auslösende Eigenschaften zu vermeiden
- Wende backdrop-blur-Filter nur auf feste oder sticky Elemente an, niemals auf scrollende Container
Vermeiden
- Verwende niemals generische Schriften wie Inter, Roboto oder Arial in Premium-Designs
- Verwende niemals lineare oder ease-in-out Übergänge, die flache und leblose Bewegungen erzeugen
- Verwende niemals window.scroll Event-Listener für Scroll-Animationen, da sie kontinuierliche Reflows verursachen und die mobile Leistung beeinträchtigen