Design-System-Komponenten im Produkt sichtbar machen
Autor
Julian Bennecker
Senior Software Developer
bei SYZYGY Techsolutions
Lesedauer
5 Minuten
Publiziert
24.11.2025
Konsistente UI in großen agilen Projekten ist oft eine Herausforderung – besonders in einem SAFe-Setup mit vielen Teams. Das Design System wird zentral als NPM-Package bereitgestellt, während andere Teams eigene, projektspezifische Komponenten beisteuern. Am Ende landet alles gemeinsam in der Website. Doch wer behält den Überblick, welche Elemente aus dem Design System stammen und wo individuelle Lösungen im Einsatz sind?
Das Problem
In großen Enterprise- oder SAFe-Projekten arbeiten oft dutzende Personen gleichzeitig am Produkt. Jeder kann neue Komponenten beisteuern oder bestehende anpassen. Kontrolle, Zuständigkeiten und Freigabeprozesse werden dadurch komplex. Selbst bei sorgfältiger Dokumentation ist es in der Praxis schwer, im laufenden Produkt zu erkennen, ob ein UI-Element aus dem zentralen Design System kommt oder eine individuelle Lösung ist.
Das führt zu Problemen bei:
- Meetings & Reviews – man diskutiert über UI-Details, ohne sicher zu wissen, ob sie standardisiert sind.
- Tests & Abnahmen – Abweichungen vom Design System fallen oft erst spät auf.
- Konsistenz & Wartung – individuelle Lösungen schleichen sich ein und erschweren langfristige Pflege.
Die Lösung
Um diese Frage direkt im laufenden Produkt beantworten zu können, haben wir eine Browser Extension entwickelt, die Design-System-Komponenten sichtbar macht – sofort, ohne den Code zu öffnen.
Die Extension hebt alle Design-System-Komponenten mit einem roten Rahmen hervor und blendet den Namen der jeweiligen Komponente direkt am Element ein. So erkennt man auf einen Blick, welche UI-Bausteine aus dem zentralen System stammen – und wo individuelle Lösungen im Einsatz sind.
Wie funktioniert das technisch?
So einfach wie wirkungsvoll:
- Unsere Komponenten werden im HTML mit speziellen data-Attributen versehen.
- Die Extension injiziert CSS, das diese Elemente optisch hervorhebt.
- Über einen Button in der Browser-Toolbar lässt sich das Highlighting ein- oder ausschalten.
Das Ergebnis: Ein schneller visueller Check, der ohne Code-Analyse funktioniert – egal ob im Review, beim Testen oder in der Abnahme.
Der Code (beispielhaft und vereinfacht)
HTML
Dieses Beispiel zeigt, wie wir unsere Komponenten im Markup mit einem data-component-Attribut versehen. Das Attribut enthält den Namen der Komponente, der später im UI sichtbar gemacht wird.
<header data-component="TopBar">
<nav data-component="Navigation">
<a data-component="Link" href="#">Home</a>
<a data-component="Link" href="#">Kontakt</a>
</nav>
</header>CSS
Das CSS sorgt dafür, dass jedes Element mit einem data-component-Attribut hervorgehoben wird:
- Alle betroffenen Elemente erhalten einen roten Rahmen (outline).
- Über das ::before-Pseudo-Element wird der Wert des data-component-Attributs ausgelesen und direkt über dem Element angezeigt.
[data-component] {
outline: 4px solid #e01d14;
outline-offset: 2px;
position: relative;
}
[data-component]::before {
content: attr(data-component);
position: absolute;
top: -24px;
left: -4px;
background: #e01d14;
color: white;
padding: 2px 8px;
font: 600 12px/1.2 system-ui, sans-serif;
border-radius: 3px;
white-space: nowrap;
z-index: 10000;
pointer-events: none;
}JavaScript
Das Script implementiert die Logik des Popups in der Extension:
- In HIGHLIGHT_CSS steckt der CSS-Code, der injiziert werden soll.
- Über injectButton.addEventListener wird festgelegt, dass beim Klick das CSS entweder hinzugefügt oder wieder entfernt wird.
- Über isInjected merkt sich die Extension, ob das CSS gerade aktiv ist. Entsprechend ändert sich auch der Button-Text.
const HIGHLIGHT_CSS = `/* ... siehe oben ... */`;
let isInjected = false;
injectButton.addEventListener("click", async () => {
const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
if (isInjected) {
await browser.scripting.removeCSS({ target: { tabId: tab.id }, css: HIGHLIGHT_CSS });
injectButton.textContent = "Highlight Components";
isInjected = false;
} else {
await browser.scripting.insertCSS({ target: { tabId: tab.id }, css: HIGHLIGHT_CSS });
injectButton.textContent = "Remove Highlighting";
isInjected = true;
}
});Das Tool im Einsatz
Das Feedback aus dem Team ist durchweg positiv. Wir nutzen die Extension bei:
- Design Reviews – um sofort zu sehen, ob UI-Elemente dem Standard entsprechen.
- Tests & Abnahmen – um Abweichungen frühzeitig zu erkennen.
- Präsentationen – um Stakeholdern die Konsistenz im Produkt zu demonstrieren.
- Entwicklung – jeder Dev, UX- oder UI-Designer kann schnell prüfen, ob er auf dem richtigen Baustein aufsetzt.
Gerade in Meetings spart das Tool Zeit und Diskussionen – weil die Antwort auf „Ist das aus dem Design System?“ sofort sichtbar ist.
Alternativen & Next Steps
Die hier gezeigte Lösung ist nur ein Beispiel. Ob Firefox oder Chrome Extension – die Idee lässt sich leicht übertragen. Auch andere, ähnlich einfache Ansätze sind denkbar, etwa:
- Tampermonkey-Skripte für schnelles CSS-Injection.
- Bookmarklets für einmalige Checks.
- Integrierte Dev-Tools im eigenen Framework.
Langfristig könnte die Extension um weitere Features ergänzt werden – etwa eine Filterfunktion, um nur bestimmte Komponenten hervorzuheben, oder ein Export der gefundenen Elemente für Dokumentationszwecke.
Der Weg dahin
Aus einer simplen Beobachtung („Es wäre doch praktisch, Design-System-Komponenten direkt sichtbar zu machen“) ist in kurzer Zeit ein echtes Tool geworden.
Mit Unterstützung von AI-Tools war die Extension erstaunlich schnell gebaut – die AI half uns, technische Stolpersteine zu lösen und den Boilerplate-Code für die Extension zu erstellen.
Was ursprünglich nur eine kleine Spielerei war, hat sich als richtig nützlich erwiesen – und die Umsetzung hat nicht nur Mehrwert gebracht, sondern auch richtig Spaß gemacht.
Fazit
Gerade in großen Enterprise-Projekten ist es entscheidend, out-of-the-box zu denken, um komplexe Fragestellungen zu lösen.
Die Kombination aus einer einfachen, aber genialen Idee, gezieltem Einsatz von AI und händischem Coding hat hier mit überraschend wenig Aufwand ein Tool entstehen lassen, das echten Mehrwert bringt.
Oft sind es die kleinen Dinge, die ein Projekt spürbar voranbringen – und diese Extension ist genau so ein Fall: Sie macht Design-System-Komponenten unmittelbar sichtbar, schafft Klarheit in komplexen Projektszenarien und stärkt die Konsistenz im Produkt.
Ein kleines Experiment, das sich als großer Gewinn für die tägliche Arbeit erwiesen hat.
Head of Technology
