Design System Health Checker
Kontext
Als Figma im Juni 2026 generative Plugins freigab — direkt im Canvas per Prompt eigene Tools bauen, ohne klassisches Entwicklungs-Setup — habe ich das genutzt, um ein Problem zu lösen, das mich schon länger beschäftigt hat: Design-System-Audit-Tools prüfen, ob ein Wert überhaupt mit einem Token verknüpft ist, aber nicht, ob dieser Token noch aus der richtigen, aktuellen Quelle stammt.
Problem
Kein am Markt verfügbares Plugin erkennt kontaminierte Referenzen — Komponenten oder Tokens, die korrekt benannt sind, aber auf eine falsche oder veraltete Library zeigen. Presence statt Provenance. Für Teams, die mehrere Design-System-Versionen parallel gepflegt oder migriert haben, bleibt genau das der blinde Fleck.
Vorgehen
Angefangen als schneller Test — ein Tool, das erkennt, wenn eine kopierte Komponente noch auf die alte Library zeigt. Über mehrere Iterationen per Prompt-basiertem Vibe-Coding erweitert: von der reinen Kontaminations-Erkennung zu einem vollständigen Audit-Tool mit acht Prüfkategorien, Health-Score und optionalen KI-gestützten Fix-Vorschlägen.
Lösung
DSTracer — ein Figma-Plugin, das wahlweise eine Library, eine Seite oder eine Auswahl prüft — entweder gegen die lokalen File-Tokens oder gegen ein verknüpftes Design System als Referenz. Es deckt systematische Probleme über acht Kategorien hinweg auf (Fremdkomponenten, Properties, Farben, Typografie, Abstände, Radien, Effekte, Layer-Namen), berechnet einen Gesundheits-Score und schlägt pro Problem konkrete Fixes vor — inklusive Sammel-Fix für alle behebbaren Fälle auf einmal.
Ergebnis
Ein funktionierendes, mehrfach iteriertes Audit-Tool — gebaut in einer Zeit, in der die meisten Designer generative Plugins gerade erst entdecken. Es zeigt, wie weit sich mit KI-gestütztem Prompting in kurzer Zeit ein reales, mehrschichtiges Werkzeug bauen lässt — ganz ohne klassisches Software-Engineering-Setup.
Kunde
Eigenes Projekt
Tools & Techniken
Projektart