Kreativ-Exzellenz-Plugin für Claude Code verbessert Animationsqualität durch Interaktionsthese

Ein Entwickler hat das Creative Excellence Plugin für Claude Code erstellt, um die Qualität der vom KI-Assistenten generierten Animationen und Motion Designs zu verbessern. Das Plugin adressiert das häufige Problem, dass Claude generische Hover-Effekte, zufällige Farbverläufe, Glassmorphism und einfache Animationen erzeugt, indem es einen strukturierten Ansatz für Motion Design implementiert.

Funktionsweise

Die Kerninnovation ist das Konzept der 'Interaktions-These'. Bevor Claude Code schreibt, muss er ein Bewegungskonzept in einem Satz beschreiben, wie zum Beispiel 'knackige 150ms ease-out mit Slide+Fade' oder 'filmische Clip-Path-Enthüllungen mit gestaffeltem Text'. Der Benutzer genehmigt oder lehnt dieses Konzept ab, bevor die Programmierung beginnt, was unpassende Animationen wie Bounce-Effekte in seriösen Anwendungen wie Banking-Apps verhindert.

Nach der Genehmigung bestimmt Claude automatisch den passenden Technologie-Stack (GSAP, Framer Motion, native CSS-Animationen usw.), ruft nur relevante Teilfähigkeiten ab, implementiert die Animation und führt grundlegende Überprüfungen durch, einschließlich der Unterstützung von prefers-reduced-motion, Exit-Animationen und Layout-Performance.

Plugin-Funktionen

• Zwei Einstiegspunkte: /creative-excellence für die Arbeit mit bestehenden Projekten und /design-excellence für die komplette Pipeline von der Ideenfindung über die Implementierung bis zum Audit
• 8 Teilfähigkeiten, die abdecken: Bewegungsprinzipien, GSAP, Framer Motion, native CSS-Animationen, Three.js/R3F, generatives Canvas, Design-Auditing und Design-Systeme
• SCHLECHT/GUT-Code-Vergleiche und konkrete 'Nicht tun'-Regeln, um zu verhindern, dass Claude schlecht improvisiert
• Basierend auf untersuchten Repositories, einschließlich mxyhi/ok-skills, kylezantos/design-motion-principles und freshtechbro/claudedesignskills

Installation

Das Plugin ist kostenlos und Open Source unter github.com/AThevon/creative-excellence. Installation mit:

/plugin marketplace add [email protected]:AThevon/creative-excellence.git
/plugin install creative-excellence

Der Entwickler freut sich über Feedback und Pull Requests für Verbesserungen.