Vercels Designsystem-Spezifikation ist wirklich ein lehrbuchreifes Beispiel für das, was ich gesehen habe.
Heute habe ich ihre DESIGN.md gründlich studiert. Mit sowohl einem hellen als auch einem dunklen Thema beschreibt sie vollständig Farben, Schriftarten, Abstände, Komponenten, Bewegung und Textregeln in einer ausführbaren Designmethodik.
Ich habe das Gefühl, dass ich diesem Weg für die design.md aller meiner zukünftigen Produkte folgen kann.
Details sind hier:
Einige Freunde wissen vielleicht nicht genau, was DESIGN.md ist. Einfach ausgedrückt ist es eine Designvorgabe für KI zum Lesen. Wenn die KI uns beim Schreiben von Code hilft, muss sie wissen, welche Farben, Schriftgrößen und Abstände zwischen Elementen verwendet werden sollen.
Ohne diese Datei sehen die von der KI erstellten Oberflächen jedes Mal anders aus, mit einem inkonsistenten Stil.
Nachdem ich Vercels DESIGN.md gelesen habe, wurde mir klar, dass eine gute DESIGN.md weit mehr ist, als der KI nur mitzuteilen, welche Hex-Codes oder Schriftgrößen verwendet werden sollen. Sie repräsentiert eine ganze Reihe von Design-Denkweisen. Das hat meine Wahrnehmung ziemlich auf den Kopf gestellt.
Heute werde ich aufschlüsseln, warum diese Datei so gut ist.
1
Lass uns zuerst über Farbe sprechen.
Als ich anfing, DESIGN.md zu schreiben, war der Farbabschnitt eigentlich sehr einfach. Ich habe ein paar Farbwerte aufgelistet, der KI gesagt, welche die Primär-, Sekundär- und Akzentfarbe ist, und das war's im Grunde.
Aber wenn man es so schreibt, weiß die KI immer noch nicht, wie diese Farben verschiedenen Interaktionszuständen entsprechen.
Zum Beispiel: Welche Farbe sollte der Standardzustand eines Buttons haben? Wie viel dunkler sollte er beim Hovern werden? Welche Farbe sollte er im Moment des Klickens haben? Wenn diese Details nicht explizit definiert sind, können die von der KI generierten Ergebnisse jedes Mal anders ausfallen.
Vercels Ansatz löst dieses Problem vollständig.
In ihrem Designsystem ist jede Farbserie in 10 Abstufungen von 100 bis 1000 unterteilt, und jede Zahl entspricht einem festen Oberflächenzustand.
100 ist der Standard-Hintergrund für Elemente, 200 ist der Hintergrund beim Hovern und 300 ist der Hintergrund beim Klicken. Weiter oben ist 400 der Standard-Rahmen, 500 der Rahmen beim Hovern und 600 der Rahmen beim Klicken.
700 wird für Volltonfarbblöcke verwendet, wie Tags oder den Button selbst; 800 ist der Hover-Zustand für diese Blöcke. 900 wird für sekundären Text und Symbole verwendet, und 1000 wird für primären Text und Symbole verwendet.
Es sieht aus wie eine einfache Nummerierung, aber dahinter steckt eine vollständige Interaktionslogik.
100 bis 300 verwalten die Hintergrundzustände. 400 bis 600 verwalten die Rahmenzustände. 700 und 800 verwalten die Zustände von Volltonfarbblöcken. 900 und 1000 verwalten die Informationshierarchie.
Mit anderen Worten: Vercel sagt der KI eigentlich, dass es hier mehrere Zustände gibt. Farbe ist nur die Manifestation dieser Zustände.
Die Vorteile davon sind sehr direkt.
Wenn die KI Code schreibt, muss sie nicht raten, wie viel dunkler ein Button beim Hovern werden soll, noch muss sie raten, wie sich der Rahmen ändern soll. Der Standardzustand entspricht 100, Hover 200 und Klick 300; die Regeln sind vordefiniert.
Darüber hinaus bietet Vercel auf dieser Basis sowohl helle als auch dunkle Themen an, verwendet aber genau dieselben Token-Namen.
Zum Beispiel gray-1000. Im hellen Thema ist es #171717, nahe an reinem Schwarz. Im dunklen Thema wird es #ededed, nahe an reinem Weiß.
Für ein Designsystem sind diese beiden Farben eigentlich dasselbe.
Sie repräsentieren beide die wichtigsten Informationen auf der Seite. Entwickler und KI konzentrieren sich bei der Generierung von Oberflächen auf die semantische Bedeutung von gray-1000 und nicht auf den spezifischen Hex-Wert dahinter. Wenn das Thema wechselt, ordnet das System diese semantische Bedeutung automatisch der entsprechenden Farbe zu.
2
Nachdem das Farbproblem gelöst ist, ist eine weitere wichtige Einschränkung der Rhythmus der Seite.
Vercels Abstandssystem basiert auf Vielfachen von 4px und bietet insgesamt nur 9 Werte: 4, 8, 12, 16, 24, 32, 40, 64, 96. Alle Abstände im gesamten Produkt werden aus diesen Zahlen ausgewählt.
Meine erste Reaktion war, dass es etwas begrenzt schien. Was ist, wenn ich 20px brauche? Was ist, wenn ich 28px brauche?
Ich habe einen Designer-Freund gefragt, und er sagte, dass für die überwältigende Mehrheit der Produkte 9 Abstandsstile im Grunde ausreichen.
Wenn es zu viele Abstandsmöglichkeiten gibt, geht der Rhythmus der Seite verloren. Viele schreckliche Websites haben sehr willkürliche Abstandsdesigns. Das ist eigentlich ein großes Tabu im Produktdesign.
Hervorragende Designsysteme geben keine unendlichen Möglichkeiten; sie schränken die Möglichkeiten aktiv ein.
Vercel bietet direkt eine Reihe klarer Rhythmusvorschläge: 8px zwischen Elementen innerhalb einer Gruppe, 16px zwischen Gruppen und 32 bis 40px zwischen Abschnitten. Das definiert tatsächlich den Atemrhythmus der Seite.
Benutzer bemerken diese Abstände vielleicht nicht, aber sie werden natürlich spüren, welche Teile zum selben Ganzen gehören und wo ein neuer Inhaltsbereich beginnt.
Oft sieht eine Seite nicht deshalb angenehm aus, weil der Designer eine ausgefeilte Technik verwendet hat, sondern weil dieser Rhythmus durchgehend konsistent gehalten wird.
Die Typografie folgt derselben Logik.
Vercels Schriftsystem ist identisch mit der Logik von Farbe und Abstand.
Der gesamte Text wird in mehrere feste Rollen kategorisiert: Überschrift, Beschriftung, Fließtext und Button.
Unter jeder Rolle werden Tokens in verschiedenen Größen bereitgestellt, und jeder Token hat vordefinierte Schriftart, Größe, Gewicht, Zeilenhöhe und Zeichenabstand.
Früher, wenn ein Designer vor einem Textstück stand, dachte er vielleicht darüber nach, ob er 14px oder 15px verwenden sollte und welche Zeilenhöhe angemessen ist.
Mit einem Designsystem ändert sich die Denkweise. Die KI bestimmt zuerst, welche Rolle dieser Text spielt. Ist es eine Überschrift, ein Fließtext oder eine sekundäre Information? Sobald die Rolle bestimmt ist, ist auch der entsprechende Stil bestimmt.
Weg von einer Schriftgrößen-Denkweise hin zu einer rollenbasierten Denkweise. Von visueller Entscheidungsfindung zu semantischer Entscheidungsfindung. Hier liegt der wahre Wert eines Designsystems. Genial.
Wenn man das sieht, wird einem klar, dass Vercel, ob es sich um Abstände oder Schriftarten handelt, dasselbe tut: die freie Gestaltung in der Ausführungsphase so weit wie möglich reduzieren, Regeln im Voraus festlegen, sodass die Ausführung nur die Auswahl einer Rolle erfordert.
Das gilt für Designer, für Entwickler und für KI.
3
Darüber hinaus wird auch die Textgestaltung als wichtiger Teil von Vercels Designvorgabe behandelt. Das ist der Teil, der in den meisten DESIGN.md-Dateien am ehesten fehlt.
Vercel definiert diese Details sehr genau.
Zum Beispiel muss der Button-Text eine Aktion plus ein Objekt sein. Wie "Projekt bereitstellen" oder "Mitglied löschen". Man kann nicht einfach vage Wörter wie "Bereitstellen", "OK" oder "Löschen" schreiben.
Der Grund ist einfach. Wenn der Benutzer "Löschen" sieht, muss er noch darüber nachdenken, was genau gelöscht wird. Mit einer Aktion und einem Objekt kann der Benutzer sofort ein vollständiges Verständnis entwickeln.
Fehlermeldungen sind ähnlich. Vercels Regeln sind klar. Sag dem Benutzer zuerst, was passiert ist. Sag dem Benutzer dann, was er als Nächstes tun soll.
Zum Beispiel, wenn ein Build fehlschlägt, weil die Paketdatei die Größenbeschränkung überschreitet, ist die Lösung, die Größe zu reduzieren oder die Beschränkung anzupassen. Nachdem der Benutzer drei Sätze gelesen hat, weiß er sofort, wo das Problem liegt und was er als Nächstes tun soll.
Fehlerhinweise in vielen Produkten sind "Vorgang fehlgeschlagen, bitte später erneut versuchen." Der Informationsgehalt eines solchen Hinweises ist nahezu null. Die einzige Information, die der Benutzer nach dem Lesen erhält, ist, dass es fehlgeschlagen ist. Warum es fehlgeschlagen ist und was als Nächstes zu tun ist, muss er immer noch raten.
Textvorgaben in einem Designsystem reduzieren im Wesentlichen dieses Rätselraten.
Vercel hat auch die Benachrichtigungsnachrichten nach Abschluss eines Vorgangs standardisiert, die nur angeben müssen, welche Änderung stattgefunden hat. Zum Beispiel "Projekt gelöscht", nicht "Projekt erfolgreich gelöscht".
Weil die Tatsache, dass das Hinweisfenster erscheinen kann, bereits anzeigt, dass der Vorgang abgeschlossen ist. Das Wort "erfolgreich" ist redundante Information.
Als nächstes kommt die Bewegung.
Dieser Teil ist besonders interessant, weil er genau das Gegenteil meiner Intuition ist. Ich würde denken, je mehr Animation, desto raffinierter das Produkt.
Also, ein wenig Animation beim Hovern eines Buttons oder beim Einblenden eines Menüs hinzuzufügen, lässt es hochwertig erscheinen. Viele Vibe-Coding-Produkte scheinen jetzt in diese Richtung zu gehen.
Aber Vercels Haltung ist völlig anders. Sie haben sogar explizit geschrieben, dass in vielen Interaktionsszenarien 0 Millisekunden oft die beste Wahl ist. Mit anderen Worten: keine Animation, sofort abgeschlossen.
Wenn ein Button vom Standardzustand in den Hover-Zustand wechselt, ist diese Änderung bereits klar genug. Das beste Feedback ist, dass es sofort passiert; das Hinzufügen einer zusätzlichen Animation lässt die Oberfläche stattdessen träge wirken.
Natürlich erfordern einige Szenarien Bewegung.
Zum Beispiel ein plötzlich erscheinendes Popup. Wenn es überhaupt keinen Übergang gibt, wissen die Leute nicht, woher es kam. Hier hat Animation einen Wert.
Vercel gibt sogar die Dauer für verschiedene Szenarien an. Normale Zustandsänderungen dauern etwa 150 Millisekunden, Popover etwa 200 Millisekunden und Modals etwa 300 Millisekunden.
Je größer die Änderung, desto mehr Reaktionszeit wird gegeben. Je kleiner die Änderung, desto direkter das Feedback.
Die Logik dahinter ist immer dieselbe: Bewege dich nicht, wenn es nicht nötig ist, und wenn du dich bewegen musst, halte es schnell, leicht und zurückhaltend.
Der letzte Teil, der einen tiefen Eindruck bei mir hinterlassen hat, ist die Barrierefreiheit.
Um ehrlich zu sein, habe ich diesem Teil früher selten besondere Aufmerksamkeit geschenkt. Denn die meiste Zeit, solange die Oberfläche eines Produkts gut aussieht und die Funktionen funktionieren, scheint es genug zu sein. Aber Vercel hat diesen Teil sehr ernst geschrieben.
Sie verlangen ausreichenden Kontrast zwischen Text und Hintergrund. Zustandsänderungen dürfen sich nicht nur auf Farbe verlassen; sie müssen mit Symbolen oder Textbeschreibungen kombiniert werden.
Alle interaktiven Elemente müssen einen klaren Fokus-Zustand haben und dürfen nicht aus Gründen der visuellen Sauberkeit entfernt werden.
Diese Regeln bedeuten, dass das Designsystem allen dient, einschließlich Menschen mit geringer Farbempfindlichkeit, denen, die mit der Tastatur navigieren, und denen, die bei hellem Licht auf ihr Handy schauen.
Diese DESIGN.md ist zu professionell. Ich denke, wenn alle in Zukunft neue Produkte entwickeln, können sie ihre eigene DESIGN.md basierend auf den Ideen dieser beiden MD-Dateien schreiben.
