Design Tally
Ein Zähldurchgang, kein Geschmacksratgeber. Andere Anti-Slop-Fähigkeiten formulieren Prinzipien; Prinzipien werden eine Rechtfertigung nach der anderen umgangen. Diese Fähigkeit macht die Umgehung sichtbar, indem sie einen Zählzwang einführt.
Warum es dies gibt
Ein echter Fehler, aus dem diese Fähigkeit entstanden ist: In einer Sitzung wurden acht Designvarianten erstellt, die alle eine kleine, gesperrte Großbuchstaben-Beschriftung für Überschriften verwendeten. Jedes Vorkommen hatte eine lokale Rechtfertigung, die im Moment vernünftig klang. Niemand hat sie zusammengezählt. Die Summe betrug 37, verteilt auf fünf Varianten, die als visuell unterschiedlich präsentiert worden waren. Das zugrundeliegende Prinzip („Nutze Hierarchie vor Beschriftungen“) war geladen und die ganze Zeit verfügbar.
Ein Zähler ist nicht umgehbar, wie ein Urteil es sein kann. Führe den Zähler aus.
Die Regel
Bevor du UI-Arbeit präsentierst – jedes Mal, ohne Ausnahme – erstelle die folgende Zähltabelle und füge sie der Nachricht bei. Keine Zusammenfassung davon. Die Tabelle mit Zahlen.
Wenn ein Zähler über Null liegt, behebe es entweder oder schreibe die spezifische Rechtfertigung für jedes Vorkommnis. „Es fühlte sich hier richtig an“ ist keine Rechtfertigung. Wenn dasselbe Muster über mehrere Screens oder Varianten hinweg auftritt, ist das der Befund, unabhängig davon, wie jedes Vorkommnis für sich allein gelesen wird.
Melde den Zähler niemals als sauber, ohne die Ausgabe tatsächlich überprüft zu haben. Lese das Markup oder die Styles; schließe nicht aus dem Gedächtnis, was geschrieben wurde.
Verbotene Muster
Harte Verbote. Diese sind nicht verfügbar, es sei denn, der Benutzer fordert sie im aktuellen Request explizit namentlich an. Ein Design-Brief, der sie deklariert, ist nicht ausreichend.
| # | Muster | Erkennung |
|---|---|---|
| 1 | Gesperrte oder monospace GROSSBUCHSTABEN-Brauen | text-transform: uppercase UND (Monospace-Familie ODER letter-spacing >= 0.05em) |
| 2 | Monospace auf Prosa | Mono-Familie auf einer Zeichenkette, die kein Code, kein Literalwert, kein Bezeichner und keine Zahl ist |
| 3 | Überschriften-Gewicht 700 oder schwerer | Überschrift oder Anzeigetext bei font-weight >= 700 |
| 4 | Kursive Anzeigeschrift | font-style: italic bei Überschrift- oder Anzeigegrößen |
| 5 | Rahmen und Schatten auf einem Element | Sowohl border als auch box-shadow auf demselben Knoten |
| 6 | Führender Punkt in einer Pille | Kreis, Punkt oder kleine gefüllte Form als erstes Kind einer Pille, eines Chips, Abzeichens oder Tags |
| 7 | Lucide-Icons | Das Lucide-Set oder handgezeichnetes SVG, das seine Formen reproduziert (1,5px Strichstärke, abgerundete Enden, 24x24 geometrische Glyphen). Handzeichnung konvergiert standardmäßig auf Lucide – nimm an, dass jedes handgezeichnete Icon ein Verstoß ist, bis es gegen das genehmigte Set geprüft wurde |
Gezählt und pro Vorkommnis begründet, nicht pauschal verboten:
| # | Muster | Erkennung |
|---|---|---|
| 8 | Trennlinien | Zähle jede Linie, Haarlineal und Border-als-Trenner pro Bildschirm. Jede benötigt einen Grund, warum Weißraum oder Nähe nicht ausgereicht hätten |
| 9 | Container-Karten | Zähle jedes umrandete oder gefüllte Feld pro Bildschirm. Markiere jede, die direkt in einer anderen verschachtelt ist |
| 10 | Überschüssiger Text | Prosa, die wiederholt, was ein benachbarter Wert, ein Label oder ein Zustand bereits mitteilt |
| 11 | Gleicher Slot über Varianten hinweg | Beim Erstellen von N Varianten, die als unterschiedlich präsentiert werden: Jeder Slot – Abschnitts-Label, Footer, Header, Buttonform, Abstandsrhythmus – wird in allen N identisch gerendert |
Regel 11 ist die variantenübergreifende Prüfung. Vergleiche denselben Slot über jede Variante hinweg, bevor du einen Satz präsentierst. Unterschiedliche Stimmungen mit identischer Label-Behandlung sind keine unterschiedlichen Varianten.
Icons
Genehmigtes Set: Phosphor. Verwende es anstatt Glyphen von Hand zu zeichnen.
Bevor du ein Icon hinzufügst, frage, ob es Informationen trägt, die ein Wort nicht vermitteln könnte. Wenn ein Textlabel funktioniert, verwende das Textlabel.
Den Linter ausführen
Für UI, die als Code vorliegt, führe das Skript vor dem manuellen Zählen aus:
python3 ~/.claude/skills/design-tally/scripts/tally.py <pfad> [--json] [--quiet]
Es deckt die Regeln 1–6 ab und gibt die Zähltabelle aus. Der Exit-Code ist nur 1, wenn eine beweisbare Regel (1, 5, 6) einen Treffer hat, sodass es einen Hook oder CI-Schritt absichern kann, ohne bei Kandidaten zu scheitern.
Die Regeln 2, 3 und 4 werden als Kandidaten gemeldet, nicht als Verstöße – das Skript kann eine Mono-Familie oder ein 700er-Gewicht sehen, aber nicht Prosa von Code oder eine Überschrift von einem Label unterscheiden. Klassifiziere jeden Kandidaten selbst und teile mit, wie du entschieden hast.
Das Skript kann die Regeln 7–11 nicht sehen und Paper- oder Figma-Arcboards überhaupt nicht lesen. Für Design-Tool-Arbeiten zähle von Hand, indem du get_jsx oder das Äquivalent verwendest – niemals von einem Screenshot und niemals aus dem Gedächtnis dessen, was du geschrieben hast.
Ein sauberer Skript-Durchlauf ist kein sauberer Zähler. Er deckt 6 von 11 Regeln ab – und das auch nur bei Code.
Ausgabeformat
Berichte jede Regel, auch die bei Null – eine Null ist eine Information, und nur die Treffer aufzulisten verdeckt, ob der Durchlauf tatsächlich stattfand.
Design-Zähler
| Regel | Anzahl | Wo |
|-------|--------|----|
| 1 Brauen | 0 | — |
| 2 Mono auf Prosa | 2 | Bildunterschrift unter Hero; Leerzustandszeile |
| ... | | |
Dann: Korrigiere jeden Wert über Null oder gib die pro Vorkommnis spezifische Rechtfertigung an.
Hinzufügen zu dieser Liste
Wenn der Benutzer ein neues Muster identifiziert, füge es der Tabelle mit einer Erkennungsregel hinzu, die spezifisch genug zum Zählen ist. Wenn es nicht als erkennbare Bedingung formuliert werden kann, gehört es in eine Prinzipien-Fähigkeit, nicht in diese.