Was ist ein Designsystem, und was kann es, was ein CD-Manual nicht kann? Mit Fällen aus unseren Projekten, ehrlichen Einwänden und den Grenzen von KI.
Drei Anwendungen, ein Unternehmen, drei Erscheinungsbilder. So sah es aus, als uns die Eckert Schulen im August ihre eigene Software gezeigt haben, darunter eine Software für Begutachtungen, eine mobile Web-App für Teilnehmende und der erste Entwurf einer Lernplattform. Alle drei sind im eigenen Haus entstanden. Sie funktionieren. Boris hat es in seiner Zusammenfassung an den Kunden so beschrieben: „Im Design geht aber jede Anwendung einen eigenen Weg, ein gemeinsames Erscheinungsbild fehlt.“
Ein CD-Manual haben die Eckert Schulen, wir haben es sogar selbst für sie entwickelt. Wie ein Eingabefeld aussieht oder wie sich ein Button verhält, steht darin aber nicht. Das hat jede Anwendung für sich beantwortet. Hier hilft ein Designsystem.
Das Wichtigste in Kürze
- Was ist ein Designsystem? Eine gemeinsame Sammlung aus Regeln und fertigen Bausteinen für alles, was eine Marke digital erzeugt. Farben, Schriften und Elemente wie Buttons sind einmal festgelegt und werden überall wiederverwendet.
- Reicht ein CD-Manual nicht? Für Logo, Farben und Druck oft schon. Für Websites, Anwendungen und KI-Werkzeuge fehlen meist die Bausteine, deshalb baut sie oft jedes Team neu.
- Hilft ein Designsystem bei KI? Eigene Tests und eine erste Studie sprechen dafür. Prüfen muss trotzdem ein Mensch.
- Lohnt sich das für jedes Unternehmen? Nicht in jedem Umfang. Die Grundlagen gehen schnell, ein ganzes System nicht.
Was ist ein Designsystem, und was hat es mit dem CD-Manual zu tun?
Ein CD-Manual beschreibt, wie die Marke aussehen soll, ein Designsystem macht diese Regeln für alles Digitale direkt nutzbar. Es legt die Grundwerte der Marke fest, also Farben, Schriften und Abstände, und baut daraus fertige Bausteine wie Buttons, Formularfelder oder Kontaktboxen, auf die Gestaltung und Entwicklung gemeinsam zugreifen.
Der Designer Brad Frost hat für den Aufbau den Begriff Atomic Design geprägt. Aus den Grundwerten entstehen Atome wie ein Button, daraus Moleküle wie ein Suchfeld mit Button, daraus Organismen wie eine Kopfzeile, am Ende Vorlagen und fertige Seiten. Ändert sich unten etwas, zieht es sich durch alle Ebenen nach oben.
So ist ein Designsystem aufgebaut.
Das CD-Manual bleibt dabei die Grundlage der Marke. Für die Website der Stadt Regensburg und die Seiten ihrer Ämter und Einrichtungen haben wir das Design in Figma entwickelt. Daraus haben wir eine Styleguide-Plattform gebaut, auf der alle Bausteine fertig bereitliegen. Von dort nehmen die Entwickler:innen der Stadt sie für die Umsetzung.
Die Styleguide-Plattform der Stadt Regensburg: Jeder Baustein liegt fertig bereit, mit Beschreibung und Code.
Was passiert, wenn sich ein Bestandteil des Designs ändert?
Mit einem Designsystem passt du einen Bestandteil an genau einer Stelle an, und die Änderung greift überall, wo er verknüpft ist. Ohne System heißt das, jede Datei und jede Anwendung einzeln anzufassen. Und weil jede Person einen Wert ein wenig anders abschreibt, kommen mit den Jahren immer neue Varianten dazu. In einem Website-Projekt habe ich zuletzt viele verschiedene Grüntöne gefunden, die alle denselben Farbton meinen. In den Grundwerten gibt es dieses Grün jetzt nur noch einmal, mit einem festen Namen.
Auch Barrierefreiheit hängt daran. Bei unserem eigenen Designsystem ist mir aufgefallen, dass unser Grauton für Nebentexte zu wenig Kontrast hat. Ich korrigiere diesen einen Wert, danach stimmt er an allen Stellen, die ihn verwenden.
Gilt ein Designsystem nur für Websites?
Nein, ein Designsystem kann alles versorgen, was digital entsteht, von der Website bis zur PowerPoint-Präsentation. Immer mehr Kunden fragen uns, ob sie mit KI Präsentationen oder Word-Dokumente in ihrem eigenen Design erstellen können. Dafür braucht die KI dieselben Regeln wie eine Website. Stehen sie einmal im Designsystem, lassen sich daraus Folienmaster, Formatvorlagen für Word und Vorlagen für Social Media ableiten, und eine KI kann sie beim Erstellen direkt lesen, ohne sie aus alten Dateien herauszusuchen. Eine PowerPoint-Vorlage haben viele Unternehmen schon, wie eine Folie aufgebaut ist, steht darin aber oft nicht.
Auch Sprachregeln wie Anrede und feste Begriffe gehören hinein, damit Texte aus der KI nach deiner Marke klingen, dazu Regeln für die Bildsprache. Im Employer Branding sehen Stellenanzeigen, Karriereseite und Recruiting-Posts dann aus einem Guss aus.
Eine Quelle, alle Formate.
Warum hilft ein Designsystem bei der Arbeit mit KI?
Eine KI hält deine Marke nur ein, wenn sie deine Regeln kennt, und ein Designsystem liefert ihr diese Regeln in einer Form, die sie nutzen kann. Ich habe das ausprobiert und zwei getrennten KI-Sitzungen denselben Auftrag gegeben, fünf Folien zum Thema „Warum ein Designsystem?“ für ein Kundengespräch. Die erste kannte nur unseren Namen. Ihre Folien waren sauber, aber fremd, in Schwarz, Beige, Orange und einer Standardschrift. Die zweite bekam unser Designsystem mit Farben, Schrift, Maßen und den Regeln unserer Präsentationsvorlage. Sie nutzte unsere Schrift, den grünen Textmarker, das Signet und die feste Position von Kopfzeile und Titel.
Derselbe Auftrag, zwei KI-Sitzungen: links nur mit unserem Namen, rechts mit unserem Designsystem.
Eine erste Studie deutet in dieselbe Richtung. Ein Forschungsteam hat auf der Fachkonferenz CHI 2026 verglichen, wie man einer KI ein Designsystem am besten mitgibt. Mit vorgefertigten Bausteinen hielt sie die Regeln zu 95,08 Prozent ein, gemessen an sechs erzeugten Oberflächen.
Prüfen und verfeinern muss weiter ein Mensch. Die KI nimmt mir Fleißarbeit ab, etwa alle Zustände eines Buttons durchzudeklinieren. Statt zwei oder drei Varianten zeige ich heute fünf oder sechs und wähle aus, was zur Marke passt. Den letzten Schliff an Bannern und Headern mache ich selbst, denn ohne eigene Grafiken und Bilder wirken auch Präsentationen mit allen richtigen Farben und Schriften auf mich schnell austauschbar.
Muss ein Designsystem groß sein, damit es sich lohnt?
Nein, ein Designsystem kann klein anfangen und mit den Projekten wachsen. Bis auf die Master Library für die Anwendungen von SENNEBOGEN ist in meinen Projekten in diesem Jahr kein Designsystem als eigener Auftrag entstanden. Bei wenigen Elementen lege ich nur Schriften, Farben und Buttons an, die die Entwicklung ohnehin braucht, aber so, dass sie wiederverwendbar sind. Sobald in einem Unternehmen Inhalte mit KI entstehen sollen, spricht aus meiner Sicht wenig dagegen. Das gilt auch im Kleinen. Ich bin Mitglied in einem Musikverein, dort erstellen drei bis vier Leute Dokumente, Flyer, Plakate und Social-Media-Beiträge. Selbst hier hilft ein Designsystem, das die KI nutzen kann, damit das Erscheinungsbild einheitlich wird und es auch bleibt.
Ein paar Punkte würde ich trotzdem bedenken.
- Großes System: Bei der SENNEBOGEN Master Library greifen die Bausteine ineinander, Bedienbarkeit und Barrierefreiheit müssen überall stimmen. Der Aufwand ist hoch, lohnt sich aber, sobald die Bausteine wiederverwendet werden.
- Pflege: Ein Designsystem wächst mit den Projekten, deshalb ist die Pflege der wichtigste Punkt. Im Design Systems Report 2026 des Softwareanbieters zeroheight nennen 56 Prozent der befragten Fachleute fehlende Ressourcen oder fehlendes Personal als eine der größten Herausforderungen.
- Datenschutz: Ein Designsystem enthält nur die Marke, keine Kunden- oder Personendaten. Was jemand im Chat mit der KI eingibt, deckt es allerdings nicht ab.
- Werkzeugbindung: Seine Werte lassen sich in Figma, in KI-Werkzeugen und in PowerPoint-Vorlagen nutzen, man bereitet sie nur einmal je Werkzeug auf.
Die SENNEBOGEN Master Library auf einen Blick.
Für uns als Agentur gilt ein Satz der Designerin Ariel Salminen. Man könne nicht einfach eine Agentur ein Designsystem bauen lassen und erwarten, dass das System allein etwas löst (Salminen).
Was heißt das für dein Unternehmen?
Ein Designsystem fängt mit einer Bestandsaufnahme an, und ein guter Anlass ist der nächste größere Schritt im Digitalen. Das kann eine neue Website sein, eine neue Anwendung, ein zweiter Dienstleister an deiner Marke oder der Wunsch, mit KI Präsentationen und Dokumente im eigenen Design zu erstellen. Bei den Eckert Schulen ist es die Frage, wie die drei eigenen Anwendungen künftig ein gemeinsames Erscheinungsbild bekommen. Wir schauen uns zusammen an, welche Bausteine bei dir schon existieren und wo sie auseinanderlaufen. Daraus ergibt sich, ob ein paar Grundwerte reichen oder ob sich mehr lohnt. Warum Agentur und internes Team dabei zusammengehören, steht in diesem Beitrag.
Titelbild: mit KI erzeugt (getimg.ai) und mit Adobe Firefly erweitert, gestaltet nach unserer Bildsprache.
