Nach dem Namen fehlte meiner KI-Assistenz noch ein Gesicht. Auch hier habe ich ihr keine Farben und keine Schriften vorgegeben, sondern nur einen Satz: Es soll dir gerecht sein. Daraus wurden ein Logo, eine eigene Farbwelt und ein Styleguide, der bis heute jede neue Seite bestimmt.
Was ich wollte: ein Gesicht für die KI-Assistenz
Ein Name allein macht noch keinen Auftritt. Wenn ich meine KI-Assistenz schon selbst entwickle, sollte sie auch ein eigenes Erscheinungsbild bekommen: ein Logo, und dazu einen Styleguide, also feste Regeln für Farben, Schriften und Abstände.
Wie das aussehen sollte, habe ich bewusst nicht vorgegeben. Keine Farben, keine Schriften, kein Vorbild. Meine einzige Vorgabe war ein Satz: Es soll dir gerecht sein.
Was ich gemacht habe: Logo und Farbwelt aus einem einzigen Satz
Ich habe KIRA genau diese Aufgabe gegeben: Entwirf ein Logo und einen Styleguide, die dir gerecht werden. Was dabei herauskam, sieht man heute bei jeder Anmeldung:
- Ein Ring mit einem K in der Mitte, in einem Verlauf von Lila zu Grün.
- Der Schriftzug KIRA in kräftigen, weit gesetzten Buchstaben, im selben Verlauf.
- Der Leitsatz „Reflexion & Ambitionen“, also die Buchstaben R und A aus Kapitel 3.
- Ein dunkler, leicht blauer Hintergrund, auf dem Lila und Neongrün leuchten.
Wann genau das Ring-Logo entstanden ist, steht nirgends. Sicher ist nur, dass es spätestens am 17. März schon da war: An diesem Tag nennt mein Änderungsprotokoll den Ring und das K als Teile, die unverändert bleiben.
Aus Farben werden Regeln
Die Farbwelt ist in wenigen Tagen gewachsen. Am 11. März kam ein Umbau, der bis heute zu sehen ist: halb durchsichtige Flächen wie aus Glas, farbige Leuchtränder beim Darüberfahren, und ein Hintergrund mit einem lila Schimmer oben links und einem grünen unten rechts.
Am 15. März bekam der Styleguide eine eigene Seite in der Plattform: „CI & Style Guide“. Dort steht alles auf einer Seite zum Ansehen, von den Farben über Schriftgrößen und Abstände bis zu Buttons, Karten und Formularen.
Wichtiger als die Seite ist aber eine Datei, die man nicht sieht. Der Styleguide steht auch als Regeldatei in meinem Projekt, und Claude liest sie bei jeder Arbeit an der Plattform mit. Ganz oben steht:
„Verbindlich für JEDE UI-Änderung an fragkira.at. Keine Ausnahmen.“
Erster Satz der Regeldatei für den Styleguide
Darin steht außerdem ein eigener Abschnitt über typische Fehler, die eine KI beim Bauen von Oberflächen macht. Ein paar davon:
- Kein reines Grau. Graue Werte wirken leblos, jede Farbe ist leicht getönt.
- Kein reines Schwarz. Selbst der dunkelste Wert ist leicht blau.
- Keine neuen Schriftgrößen. Es gibt eine feste Liste, alles andere ist verboten.
- Keine federnden Animationen. Sie wirken veraltet und unseriös.
- Alles, was man antippen kann, ist am Handy mindestens 44 Pixel groß.
Was schwierig war: ein Farbverlauf in der Schrift
Ein Farbverlauf in einer Schrift sieht einfach aus. Mich hat er einige Runden gekostet.
Am 14. März sollte der Schriftzug KIRA im Kopf der Seite genauso aussehen wie im Menü. Drei Versionen am selben Tag haben daran gedreht: zuerst derselbe Stil wie im Menü, dann sogar dieselbe Vorlage, und schließlich ein Filter, der die Farbe künstlich aufhellt. Jede Korrektur hat das Symptom ein wenig verschoben, aber keine die Ursache behoben.
Die lag woanders. Der Kopf der Seite bleibt beim Scrollen oben stehen, und genau dort zeichnet der Browser einen Farbverlauf in einer Schrift nicht zuverlässig. Die Lösung war, den Schriftzug als kleine Grafik zu bauen statt als Text mit Farbverlauf. Am 17. März zog auch die Anmeldeseite nach.
Seitdem steht das als Regel im Styleguide, samt Begründung. Damit niemand, auch keine KI, denselben Umweg noch einmal geht.
Was du daraus mitnehmen kannst: Tipps für Logo und Styleguide
- Gib das Ziel vor, nicht die Gestaltung. „Es soll dir gerecht sein“ hat als Auftrag gereicht. Du kannst immer noch korrigieren, wenn dir etwas nicht gefällt.
- Halte fest, was entstanden ist. Farben, Schriftgrößen und Abstände gehören als feste Werte aufgeschrieben. Sonst sieht jede neue Seite ein bisschen anders aus.
- Schreib die typischen Fehler mit auf. Eine Liste mit Verboten hilft einer KI mehr als jede Beschreibung, wie es schön aussehen soll.
- Leg den Styleguide dorthin, wo die KI ihn liest. Eine Seite zum Ansehen ist für dich, eine Regeldatei ist für die KI.
- Kommt derselbe Fehler dreimal, such die Ursache. Eine vierte Korrektur am Symptom bringt nichts.
Fragen, die du der KI stellen kannst
- „Entwirf ein Logo und einen Styleguide, die zu dir passen. Erklär mir, warum du diese Farben gewählt hast.“
- „Schreib den Styleguide als Regeldatei: feste Werte für Farben, Schriftgrößen und Abstände, und eine Liste mit Dingen, die verboten sind.“
- „Prüf diese Seite gegen den Styleguide und nenn mir jede Abweichung mit Datei und Zeile.“ Diese Frage stammt schon aus der Sorte, die einen Beleg verlangt statt einer Meinung.
Merksatz:
Ein Styleguide ist das Gedächtnis für das Aussehen.
Wie es weitergeht: das erste Dashboard
Name, Adresse, Gesicht: KIRA hatte jetzt eine Identität. Parallel dazu war schon in den ersten beiden Tagen ein Ort entstanden, an dem ich wirklich mit ihr arbeite. Wie aus der Anmeldeseite das erste kleine Dashboard mit Tagesplan, Notizen und Zielen wurde, erzähle ich in Kapitel 5.
Was du noch wissen solltest
CI steht für Corporate Identity, also das einheitliche Erscheinungsbild einer Marke. Bei KIRA heißt die Seite mit allen Gestaltungsregeln deshalb „CI & Style Guide“.
Das ist die übliche Schreibweise für Farben im Web, ein sogenannter Hex-Code. Die sechs Zeichen sind drei Paare für Rot, Grün und Blau, jedes von 00 für gar nichts bis ff für volle Stärke. 0a1628 hat also wenig Rot, etwas Grün und am meisten Blau, deshalb wirkt der Hintergrund dunkel mit einem Blaustich. Mit solchen festen Werten sieht eine Farbe überall exakt gleich aus.
Eine Beschreibung wie „modern und hochwertig“ kann eine KI auf viele Arten auslegen, ein Verbot wie „kein reines Schwarz“ dagegen kaum. Ohne klare Vorgaben greift eine KI gern zu Lösungen, die sie besonders oft gesehen hat, und genau daher kommen die typischen Fehler. Ein Verbot lässt sich außerdem nachprüfen: Entweder steht der Wert in der Datei, oder er steht nicht drin.
Eine Regeldatei ist eine gewöhnliche Textdatei im Projekt. Claude Code lädt beim Start bestimmte Anweisungsdateien von selbst, und dort kann man auf weitere Dateien wie den Styleguide verweisen, damit sie mitgelesen werden. Wichtig ist, dass die Regeln als klare, prüfbare Sätze dastehen, also feste Farbwerte statt „schön und stimmig“.
Weil ein Finger viel ungenauer ist als ein Mauszeiger. Apple empfiehlt in seinen Gestaltungsrichtlinien seit Langem rund 44 Punkte als Mindestgröße für alles, was man antippen kann, und auch die Richtlinien für barrierefreie Webseiten nennen diesen Wert. Kleinere Ziele führen zu Fehlgriffen, besonders unterwegs oder bei Menschen, deren Hände nicht ganz ruhig sind.
