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-excellencefür die Arbeit mit bestehenden Projekten und/design-excellencefü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-excellenceDer Entwickler freut sich über Feedback und Pull Requests für Verbesserungen.
📖 Read the full source: r/ClaudeAI
👀 Siehe auch
Rivet Actors fügt SQLite-Speicher hinzu: eine Datenbank pro Agent, Mandant oder Dokument
Rivet Actors unterstützt jetzt SQLite-Speicher, wobei jeder Actor seine eigene SQLite-Datenbank erhält. Dies ermöglicht Millionen unabhängiger Datenbanken für KI-Agenten, mehrinstanzenfähige SaaS-Anwendungen, kollaborative Dokumente oder benutzerspezifische Isolation.
Lumyr: Dashboard-Generierung mit Claude, Python und Streamlit-Automatisierung
Lumyr ist ein Tool, das live, teilbare Dashboards aus einfachen englischen Beschreibungen generiert, indem es Claude für die Dashboard-Erstellung nutzt und die Python- und Streamlit-Ebene automatisiert. Benutzer müssen kein Python schreiben, Streamlit öffnen, etwas bereitstellen, Hosting einrichten oder Infrastruktur verwalten.
Browser-Harness: LLMs direkten CDP-Zugriff gewähren, um Browseraufgaben eigenständig zu korrigieren
Browser Harness entfernt Browser-Frameworks und gewährt LLMs direkten CDP-Websocket-Zugriff, sodass sie fehlende Tools während der Aufgabe selbst schreiben können. Demonstriert durch die selbstständige Erstellung einer upload_file()-Funktion.
Shipshots MCP-Server: Claude entwirft App Store-Screenshots und Vorschau-Videos
Shipshots ist ein visueller Editor mit einem MCP-Server, der Claude ermöglicht, Marketingmaterialien durch Tool-Aufrufe zu gestalten. Es generiert App-Store-Screenshots, animierte Vorschauvideos und Social-Media-Grafiken basierend auf Textbeschreibungen.