Design für selbst gebaute Software: Warum die KI Dein Corporate Design braucht

Deine Software funktioniert gut, doch sie sieht aus wie viele andere.

Es gibt gerade einen Moment, den viele erleben und über den kaum jemand schreibt. Du hast mit Claude Code, Lovable oder einem ähnlichen Werkzeug etwas gebaut, das tatsächlich läuft. Die Funktionen sitzen, die Datenbank steht, der Login geht. Und dann schaust Du auf den Bildschirm und da ist diese eine Ernüchterung: Es ist hell, aufgeräumt, sauber und vollkommen austauschbar. Blaue Buttons, graue Karten, das gleiche Icon-Set, das jede zweite Anwendung benutzt. Nichts daran ist falsch, und genau das ist das Problem.

Das liegt nicht daran, dass Du zu wenig Ahnung hättest. Es liegt daran, dass ein Sprachmodell ohne Vorgabe immer den Durchschnitt baut. Es hat Millionen Oberflächen gesehen und liefert Dir deren Mittelwert, weil der Mittelwert der sicherste Vorschlag ist. Ein Modell kann Dir keine Haltung geben, die Du ihm nicht vorher gegeben hast.

Ich habe das gerade selbst durchlaufen, mit einem Werkzeug, das ich mit Claude Code für meine eigene Arbeit gebaut habe. Und weil danach die erste Anfrage kam, ob ich das auch für fremde Software mache, schreibe ich hier auf, wie es funktioniert. Für Kunden, die jemanden dafür suchen, und für Designerinnen und Designer, die dasselbe anbieten wollen.

Der eigentliche Fehler: Design als letzter Schritt

Der übliche Reflex ist, am Ende einzelne Stellen zu verschönern. Der Button bekommt einen anderen Farbwert, die Überschrift wird größer, irgendwo kommt ein Schatten dazu. Das Ergebnis ist eine Oberfläche mit Flicken, und weil das Modell bei der nächsten Änderung wieder auf seinen Durchschnitt zurückfällt, machst Du dieselbe Arbeit in zwei Wochen erneut.

Design ist bei selbst gebauter Software kein Anstrich am Ende, sondern eine Vorgabe am Anfang. Die KI braucht kein Feedback zu Geschmacksfragen, sie braucht ein Fundament, aus dem sie ableiten kann. Genau darum geht es im Folgenden.

Das Fundamentprinzip

Ich nenne das Vorgehen das Fundamentprinzip, weil es in dieser Reihenfolge läuft und in keiner anderen.

Zuerst legst Du das Fundament unter die Anwendung. Nicht als Beschreibung, nicht als Stimmungsbild, sondern als vorhandenes, funktionierendes Gestaltungssystem. Bei mir war das meine eigene Website, und zwar vollständig: Schriften, Farbwelt, Look, Bildwelt, Iconwelt, Wording und der spielerische Anteil, der bei mir dazugehört. Dieses System existierte bereits und musste nicht erfunden werden, es musste nur übersetzt werden.

Dann lässt Du die KI übersetzen. Bei mir war das Claude Code, also dasselbe Werkzeug, mit dem die Anwendung ohnehin entsteht. Die Aufgabe an das Modell lautet nicht mehr „mach das schöner“, sondern „übertrage dieses Gestaltungssystem auf diese Oberfläche“. Das ist eine Aufgabe, die ein Sprachmodell erstaunlich gut lösen kann, weil es ableiten und nicht erfinden muss. Bei mir waren damit ungefähr achtzig Prozent erledigt, und zwar in einem Durchgang.

Und danach ziehst Du von Hand nach. Die restlichen zwanzig Prozent sind die, die man nicht beschreiben kann, sondern sehen muss. Abstände, die nicht atmen; eine Hierarchie, die kippt, weil zwei Elemente gleich laut sind, oder ein Zustand, an den niemand gedacht hat, etwa die leere Liste oder das lange Wort im engen Feld. Diesen Teil justiere ich direkt, weil ich weiß, wie es aussehen soll, und weil ich mir jedes Zwischenergebnis anschaue, bevor ich weitergehe.

Was dabei konkret entschieden wurde

Damit das nicht abstrakt bleibt, hier die Entscheidungen, die aus dem generischen Erstwurf ein eigenständiges Produkt gemacht haben.

Der Grund wurde dunkel, mit einem violetten Einschlag und weichen Lichtern an den Rändern, weil das die Bildwelt meines Auftritts ist und nicht, weil Dunkelmodus gerade gefragt ist. Für Aktionen gibt es genau eine Farbe, ein kräftiges Magenta, und alles Positive im Finanzbereich erscheint in Mint. Mehr Farben gibt es nicht, denn jede weitere hätte die Rangfolge wieder aufgeweicht.

Pro Bildschirm existiert ein einziger hervorgehobener Knopf, alles Weitere bleibt neutral und leise. Das ist der Eingriff, der am meisten verändert hat, weil ein Sprachmodell jede Aktion gleich laut baut und der Blick dann nirgends landet.

Wiederkehrende Bedeutungen bekamen ein festes Zeichen, etwa einen kleinen Funken für alles, was KI-gestützt abläuft, sodass man diese Stellen erkennt, ohne sie zu lesen. Zahlen stehen groß, ihre Bezeichnung klein und grau darüber, weil man beim Arbeiten den Wert sucht und nicht die Beschriftung. Farbe übernimmt dort, wo sonst eine Textspalte stehen müsste, etwa als Ampelpunkt für den Zustand einer Website, was eine Übersicht erheblich schneller lesbar macht.

Und die Sprache wurde Teil der Gestaltung. Unter jeder Überschrift steht ein Satz, der erklärt, wozu der Bereich gut ist, in derselben persönlichen Ansprache, die ich auch sonst benutze. Dazu kommt ein spielerischer Anteil, der ernsthafte Zahlen begreifbar macht, bei mir zum Beispiel eine Matrix, die Kunden nach Freude und Umsatz sortiert und daraus ablesbar macht, wo Ausbauen sinnvoll ist und wo über den Preis gesprochen werden muss. Solche eigenen Begriffe sind kein Spleen, sie machen ein Produkt merkfähig.

Und ein Punkt, der bei Neura anders liegt als in Kundenprojekten: Neura ist barrierefrei, aber für mich. Es ist mein Werkzeug und ich bin die einzige Nutzerin, also sind Kontrast, Schriftgrößen, Fokus und Bewegung genau auf meine Anforderungen zugeschnitten und nicht auf einen gedachten Durchschnittsfall. Bei Software, die andere benutzen, gilt das nicht. Da gehören Kontrastwerte, sichtbare Fokusrahmen, Tastaturbedienung und ausreichend große Klickflächen in die Vorgaben, und zwar von Anfang an, weil sie sich nachträglich nur mit Schmerzen einbauen lassen. Deshalb stehen sie bei mir in denselben festgelegten Werten wie Farbe und Schrift, statt in einer Liste, die am Ende abgehakt wird.

Warum genau die letzten zwanzig Prozent den Unterschied machen

Neura, mein eigenes Werkzeug, soll mich beim Arbeiten unterstützen, indem alles an einem Ort liegt und viele Funktionen nebeneinander bereitstehen. Das klingt harmlos und ist gestalterisch der schwierigste Fall überhaupt, denn eine Anwendung, die vieles gleichzeitig kann, hat von sich aus keine Rangfolge. Alles ruft gleich laut.

Ein Sprachmodell verstärkt das, weil es jede Funktion gleich wichtig behandelt. Es weiß nicht, was Du morgens zuerst brauchst und was Du einmal im Monat anfasst. Diese Entscheidung kann nur jemand treffen, der versteht, wie mit der Software tatsächlich gearbeitet wird. Deshalb ist der handwerkliche Teil am Ende nicht Kosmetik, sondern der Teil, der aus einer Sammlung von Funktionen ein benutzbares Produkt macht.

Insgesamt hat der Weg bei Neura drei bis vier Wochen gedauert, mit mehreren Runden, weil ich nach jedem Schritt geschaut habe, was das Modell gemacht hat, bevor ich den nächsten gegangen bin. Das ist kein Umstand, das ist die Methode.

Wofür die Oberfläche eigentlich da ist

Es gibt einen Gedanken, der bei Neura jede Entscheidung bestimmt hat: Software soll den Zusammenhang aufbewahren, nicht der Kopf.

Und weil dieser Beitrag ehrlich sein soll: Ich habe Schwierigkeiten mit der Konzentration. Ich möchte aber nicht, dass das meine Arbeit beeinflusst, also habe ich aufgehört, dagegen anzukämpfen, und angefangen, nach Lösungen zu suchen. Neura ist das, was dabei herausgekommen ist: ein Werkzeug, das sich den Zusammenhang merkt, damit ich es nicht in jedem Moment selbst tun muss.

Zwischen einem Anruf, einer Mail und der nächsten Aufgabe geht mir manchmal die Information verloren, wo ich eigentlich stehengeblieben war. Die meisten Werkzeuge lassen einen damit allein und erwarten, dass man sich den Zusammenhang selbst merkt.

Deshalb liegen in Neura alle Postfächer an einem Ort, nicht aus Ordnungsliebe, sondern damit die Software selbst merkt, wenn eine Kundenantwort liegengeblieben ist, und mich daran erinnert, bevor es unangenehm wird. Deshalb gibt es eine Stelle, die beim Öffnen zeigt, woran zuletzt gearbeitet wurde, und einen roten Faden, der zu jedem Kunden die Vorgeschichte bereithält. Deshalb liegen Notizen dort, wo sie gebraucht werden, statt in einem separaten Programm. Und deshalb zeigt jeder Bereich immer nur so viel, wie in diesem Moment nötig ist, mit einer klaren Rangfolge statt einer Wand aus gleich lauten Elementen.

Das ist die eigentliche Aufgabe von Gestaltung bei Software, die viel kann: Überflutung vermeiden und den Wiedereinstieg möglich machen. Eine KI baut das nicht von allein, weil sie nicht weiß, wie ein Arbeitstag verläuft. Ich baue Werkzeuge, die mitdenken, weil ich nicht möchte, dass Konzentration die Voraussetzung für gute Arbeit ist.

Was Du dafür brauchst, wenn Du es selbst versuchen willst

Du brauchst ein Gestaltungssystem, das schon existiert und in sich stimmig ist. Wenn Du eine Website hast, deren Auftritt Du magst, hast Du es bereits, und dann ist der Weg kurz. Wenn Du keins hast, dann ist das der ehrliche Punkt, an dem die Arbeit vorher beginnt, denn ohne Fundament wiederholt die KI einfach ihren Durchschnitt in einer anderen Farbe.

Du brauchst außerdem konkrete Werte statt Adjektive. Ein Modell kann mit „modern und hochwertig“ nichts anfangen, weil es tausend widersprüchliche Beispiele dafür kennt. Mit einer festgelegten Schrift, einer festgelegten Farbpalette, definierten Abstufungen und einer Regel, welche Schriftgröße wofür gilt, kann es sofort etwas anfangen.

Und denk dabei an die Barrierefreiheit

Sie ist keine Zusatzaufgabe für später, sondern gehört in dieselbe Werteliste wie Farbe und Schrift. Ein Sprachmodell baut sie nicht von allein ein, und es fragt auch nicht danach. Nachträglich einzubauen ist sie deutlich teurer als von Anfang an mitzudenken. Ein paar Werte, mit denen Du sicher liegst:

• Fließtext nicht unter 16 px, angenehmer sind 17 bis 18 px. Zeilenhöhe rund das Anderthalbfache der Schriftgröße, Zeilenlänge 60 bis 75 Zeichen.
• Die kleinste Schrift, etwa für Bildunterschriften oder Labels, nicht unter 12 bis 13 px, und dann erst recht mit vollem Kontrast.
• Kontrast: Fließtext mindestens 4,5:1 zum Hintergrund, große Schrift ab etwa 24 px (oder 19 px fett) mindestens 3:1. Für Bedienelemente, Ränder und Zustände gelten ebenfalls 3:1.
• Klickflächen mindestens 24 × 24 px, auf dem Handy lieber 44 × 44 px, mit etwas Abstand dazwischen.
• Ein sichtbarer Fokusrahmen für alle, die mit der Tastatur arbeiten: mindestens 2 px, deutlich abgesetzt, niemals einfach abgeschaltet.
• Farbe nie allein als Träger einer Bedeutung. Der Ampelpunkt braucht ein Wort daneben, sonst ist er für farbenblinde Menschen stumm.
• Bewegung nur, wenn sie erwünscht ist: prefers-reduced-motion abfragen und Animationen dann weglassen.

Bei den Schriften kannst Du bei Google Fonts bleiben, es kommt nur darauf an, welche. Gut lesbar sind Schriften mit offenen Formen und unterscheidbaren Buchstaben: Atkinson Hyperlegible wurde eigens für Menschen mit wenig Sehkraft entworfen und unterscheidet I, l und 1 sowie O und 0 sehr deutlich. Inter hat eine große x-Höhe und ist auf dem Bildschirm hervorragend zu lesen. Source Sans 3 ist ruhig und trägt auch längere Texte. IBM Plex Sans bleibt selbst in zahlenlastigen Oberflächen klar. Lexend wurde auf Lesegeschwindigkeit hin gezeichnet. Für Zahlenkolonnen lohnen sich IBM Plex Mono oder JetBrains Mono, oder Du stellst bei Deiner Schrift tabular-nums ein, damit die Ziffern gleich breit stehen und Beträge sauber untereinander laufen.

Eine Bitte noch: Lade diese Schriften selbst gehostet aus Deinem eigenen Projekt, nicht direkt von Googles Servern. Sonst wandert bei jedem Seitenaufruf die IP-Adresse Deiner Nutzerinnen und Nutzer mit, und das willst Du weder ihnen noch Dir zumuten.

Und Du brauchst die Bereitschaft, jedes Ergebnis anzusehen. Ich folge der KI nicht blind. Ich steuere sie, nicht sie mich. Das ist die einzige Stelle, an der ich in solchen Projekten wirklich streng bin, und es ist gleichzeitig der Grund, warum am Ende etwas herauskommt, das nach dem Absender aussieht und nicht nach dem Werkzeug.

Die Übergabe: damit es hält, wenn Du weiterbaust

Der schwierigste Teil kommt nach dem Design. Denn Du baust weiter, mit Deinem Entwickler oder mit derselben KI, die vorher den Durchschnitt gebaut hat. Und beim nächsten Feature steht wieder die Frage im Raum, welche Farbe der Knopf bekommt. Wenn die Antwort darauf nur in meinem Kopf liegt, war die ganze Arbeit eine Momentaufnahme.

Deshalb übergebe ich keine Bilder, sondern Regeln, die im Code stehen und die ein Sprachmodell lesen kann.

Alle Werte an einer Stelle. Farben, Schriftgrößen, Abstände, Rundungen und Schatten liegen als benannte Variablen zentral, nicht verteilt über hundert Dateien. Das kräftige Magenta heißt dann nicht mehr „#e2358f irgendwo im Code“, sondern trägt einen Namen wie Aktion, und wer es ändern will, ändert es einmal. Das ist zugleich der beste Schutz gegen den Rückfall in den Durchschnitt: Es gibt schlicht keine zweite Stelle, an der heimlich eine neue Farbe entstehen könnte.

Bausteine mit Namen und Zweck. Nicht nur „Button“, sondern der eine hervorgehobene Knopf, die leise Nebenaktion, die Karte, die Tabellenzeile, der leere Zustand. Zu jedem gehört ein Satz, wann er benutzt wird. Ein Modell trifft erstaunlich gute Entscheidungen, sobald es weiß, dass es auswählen darf, statt erfinden zu müssen.

Eine Regeldatei, die die KI mitliest. Das ist der Teil, den die meisten übersehen. Die Vorgaben gehören als Text ins Projekt, genau dorthin, wo das Werkzeug bei jeder Anfrage hineinschaut. In ganzen Sätzen steht dort, was gilt: eine hervorgehobene Aktion pro Bildschirm, keine neuen Farben, Zahl groß und Bezeichnung klein, Farbe nur dann, wenn sie etwas bedeutet. Ein Sprachmodell vergisst zwischen zwei Sitzungen alles. Die Datei vergisst nichts.

Zustände, nicht nur Ansichten. Zu jedem Baustein gehört, wie er aussieht, wenn nichts da ist, wenn geladen wird, wenn etwas schiefgeht und wenn der Text länger wird als gedacht. Genau an diesen Stellen sickert später wieder das Generische ein, weil sie im ersten Wurf niemand gebaut hat.

Eine kurze Abnahmeliste. Fünf Fragen, die nach jedem neuen Feature durchgegangen werden: Gibt es genau eine hervorgehobene Aktion? Sind ausschließlich festgelegte Farben im Spiel? Steht der Wert größer als seine Bezeichnung? Trägt jede Farbe eine Bedeutung? Sind leerer Zustand, Ladezustand und Fehlerfall gebaut? Das dauert zwei Minuten und verhindert die schleichende Rückkehr zum Mittelwert.

Und einmal gemeinsam durchgehen. Ich übergebe nicht per Zip-Datei. Wir gehen die Oberfläche zusammen durch, und ich sage zu jeder Entscheidung, warum sie so gefallen ist. Wer den Grund kennt, trifft die nächste Entscheidung selbst richtig, auch wenn ich längst nicht mehr im Projekt bin.

Für Kunden: Was ich in solchen Projekten übernehme

Wenn Du eine Anwendung selbst gebaut hast und sie soll nach Deinem Unternehmen aussehen statt nach einer Vorlage, dann übernehme ich genau diesen Weg. Ich lege Dein bestehendes Corporate Design als Fundament unter die Software, sorge dafür, dass Schrift, Farbe, Icons, Bildsprache und Wording durchgehend gelten, bringe eine Rangfolge in die Oberfläche, und kümmere mich um die Zustände, die im ersten Wurf fehlen.

Du bekommst dabei kein Bilderpaket, das jemand nachbauen muss, sondern eine Vorgabe, die im Code landet, also festgelegte Werte, benannte Bausteine und eine Übergabe, mit der Dein Entwickler oder Dein KI-Werkzeug weiterarbeiten kann, ohne dass beim nächsten Feature alles wieder auseinanderfällt.

Was ich nicht mache, ist blind das umsetzen, was ein Modell vorschlägt. Ich schaue mir jeden Schritt an, korrigiere und sage Dir auch, wenn mir etwas nicht gefällt. Das ist keine Strenge um ihrer selbst willen, sondern der Grund, warum am Ende etwas dasteht, hinter dem wir beide stehen können. Wenn Du jemanden suchst, der schnell durchwinkt, passen wir vermutlich nicht zusammen, und auch das darf man freundlich feststellen.

Häufige Fragen

Kann ich mein Corporate Design überhaupt in eine selbst gebaute Software übertragen?

Ja, und das ist der schnellste Weg zu einem eigenständigen Ergebnis. Am besten geht es in dieser Reihenfolge: Sammle zuerst die harten Werte Deines Auftritts an einer Stelle, also die Schriften mit ihren Größen, die Farbwerte samt ihrer Bedeutung, Abstände, Rundungen und den Ton, in dem Du sprichst. Kein Stimmungsbild, sondern eine Liste, die man abschreiben kann. Wenn Du eine Website hast, deren Auftritt Du magst, steht diese Liste im Grunde schon in deren Stylesheet.

Diese Liste legst Du als Datei ins Projekt, dorthin, wo Dein KI-Werkzeug bei jeder Anfrage hineinschaut, und gibst einen einzigen klaren Auftrag: dieses System auf die bestehende Oberfläche übertragen, ohne neue Farben oder Schriften zu erfinden. Danach gehst Du Bildschirm für Bildschirm durch und korrigierst, was nur das Auge sieht. Genau das ist das Fundamentprinzip weiter oben, in drei Sätzen.

Muss der Code dafür umgebaut werden?

In der Regel nicht grundlegend. An der Logik ändert sich nichts, es wandern nur die Einzelwerte aus den Bauteilen an eine gemeinsame Stelle.

Wo diese Stelle liegt, hängt davon ab, womit gebaut wurde. In reinem CSS sind es benannte Variablen ganz oben im Stylesheet, im :root-Block, auf den alles andere zugreift. Bei Tailwind steht dasselbe in der Theme-Konfiguration. In React oder Vue reicht eine einzelne Theme-Datei, die die Werte exportiert. Wichtig ist nur, dass es genau eine solche Stelle gibt und nicht drei. Dazu kommt die Regeldatei für die KI, in der in Worten steht, wann welcher Wert gilt, damit beim nächsten Feature niemand wieder eine eigene Farbe erfindet.

Wie lange dauert so ein Projekt?

Der große Sprung passiert früh und schnell, die Feinarbeit braucht die Zeit. Bei meinem eigenen Werkzeug waren es drei bis vier Wochen mit mehreren Abstimmungsrunden.

Brauche ich dafür Figma?

Nicht zwingend. Entscheidend ist nicht das Werkzeug, sondern dass die Vorgaben als konkrete Werte vorliegen und im Code ankommen. Bei Neura ist das Design komplett im Kopf entstanden und direkt im Code gelandet, ich arbeite inzwischen ganz ohne Figma. Wenn ein Team mitschauen und Zwischenstände abnehmen will, kann ein Entwurf trotzdem sinnvoll sein. Für Dich allein ist er meistens ein Umweg.

Was, wenn ich noch kein Corporate Design habe?

Das kommt auf Dein Ziel an. Läuft die Software vor allem für Dich selbst, darf das Corporate Design auch beim Bauen entstehen. Du triffst dabei ohnehin lauter kleine Entscheidungen über Farbe, Schrift und Ton; wenn Du sie einmal sortierst und festhältst, hast Du am Ende ein System, das auch für Website und Drucksachen trägt. Bei mir war es andersherum, die Website stand zuerst, und deshalb war der Weg kurz.

Wirkt die Software dagegen nach außen, gegenüber Kunden oder Investoren, würde ich mit der Marke anfangen. Sonst entscheidet die Software darüber, wie Dein Unternehmen aussieht, statt umgekehrt.

Lohnt sich das für ein MVP?

MVP steht für Minimum Viable Product, also die erste lauffähige Fassung, die gerade genug kann, um sie echten Menschen zu zeigen. Und ja, gerade dort lohnt es sich: Ein MVP ist oft der erste Eindruck bei Kunden oder Investoren, und ein austauschbares Aussehen wird genau in diesem Moment teuer.

Was passiert, wenn ich nach der Übergabe selbst weiterbaue?

Genau dafür ist die Übergabe gemacht. Praktisch bekommst Du drei Dinge: eine Datei mit allen Werten, die angepassten Bausteine und eine Regeldatei, die in ganzen Sätzen erklärt, was gilt.

Liegt Dein Projekt in Git, kommt das als eigener Branch oder als Pull Request, den Du in Ruhe ansiehst und dann zusammenführst. Nichts wird hinter Deinem Rücken überschrieben, und Du kannst jederzeit zurück. Ohne Git bekommst Du dieselben Dateien als Paket, mit einer kurzen Notiz, welche wohin gehört.

Das Einrichten dauert Minuten, nicht Stunden. Die Wertedatei wird einmal zentral eingebunden, an derselben Stelle, an der auch Dein übriges CSS geladen wird. Die Regeldatei legst Du unverändert ins Projektverzeichnis, genau dorthin, wo Dein KI-Werkzeug von selbst hineinschaut, bei Claude Code etwa als Projektdatei im Wurzelverzeichnis. Arbeitest Du mit einem Baukasten wie Lovable, kommen die Regeln stattdessen in die Projektanweisungen und die Werte in die Theme-Einstellungen.

Und dann gehen wir es einmal zusammen durch, meist reicht eine halbe Stunde: ziehen, anschauen, zusammenführen. Dabei zeige ich Dir an einem echten Beispiel, wie Du das nächste Feature formulierst, damit es sich an die Regeln hält. Danach brauchst Du mich dafür nicht mehr.

Und falls Du gerade auf eine Oberfläche schaust, die funktioniert, aber nicht nach Dir aussieht: Das ist kein Grund, an Dir zu zweifeln. Das ist ein völlig normaler Zwischenstand, und Du bist damit gerade in ziemlich guter Gesellschaft. Schreib mir einfach, ich schaue es mir in Ruhe an und sage Dir ehrlich, ob Dein bestehender Auftritt als Fundament ausreicht und was der kürzeste Weg dorthin wäre. Auch dann, wenn die Antwort lautet, dass Du das gut allein hinbekommst.