Open-Source-Claude-Plugin erstellt interaktive visuelle Tuner mit Live-Vorschau

Was es tut

Ein Entwickler hat ein Open-Source-Plugin für Claude Code erstellt, das interaktive visuelle Einsteller zur Feinabstimmung von CSS- und Animationswerten generiert. Anstatt des typischen Hin-und-Her-Chat-Prozesses zum Anpassen von Werten wie Schatten, Farben und Abständen erstellt das Plugin eine einzelne HTML-Seite mit Schiebereglern und einer Figma-artigen unendlichen Leinwand für die Live-Vorschau.

Wie es funktioniert

Benutzer geben /ai-fine-tuner in Claude Code ein. Claude liest dann die tatsächliche Quelldatei, reproduziert das echte Element auf einer interaktiven Leinwand und bietet Schieberegler zur präzisen Einstellung der Werte. Die Oberfläche unterstützt Zoom per Pinch-Geste, Schwenken, Umschalten zwischen Dunkel- und Hellmodus und enthält eine "In die Zwischenablage kopieren"-Schaltfläche. Nach den Anpassungen fügen Benutzer die Werte wieder ein, und Claude wendet alle Werte genau an.

Hauptmerkmale

• Funktioniert für Animationen mit vollständiger Keyframe-Vorschau inklusive Zeitsteuerung und Easing-Steuerung
• Vorgefertigte Editor-Oberfläche mit unendlicher Leinwand, Zoom und Voreinstellungen
• Claude füllt nur das spezifische Element und die Werte des Benutzers aus
• Schnell und zuverlässig ohne halluzinierte UI-Elemente

Technische Details

Das Plugin wird installiert über: claude plugin install ai-fine-tuner@https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git

Es verwendet eine Source Available-Lizenz, die kostenlos nutzbar ist, aber nicht in konkurrierende Produkte umverpackt werden darf.

Ressourcen

• Live-Demo: https://muhamadjawdatsalemalakoum.github.io/aifinetuner/
• GitHub-Repository: https://github.com/muhamadjawdatsalemalakoum/aifinetuner