SHELEG Design

Was macht SHELEG Design?

Überblick

Eine Seite wirkt kinematografisch nicht durch viele Animationen, sondern durch eine einzige Quelle der Wahrheit (gemessene Scrollposition), die viele günstige, geschichtete, unabhängig degradierbare Reaktionen antreibt. Zentralisiere den Scroll-Status in einem Store; die Schichten lesen ihn pro Frame und reagieren in ihrer eigenen Sprache. Nichts überblendet – Dinge werden neu aufgebaut. Jede Schicht degradiert zu einem ruhigen, statischen Zustand.

NOTWENDIGE REFERENZ – für den kinematografischen Pfad: Lies SHELEG_DESIGN.md bevor eine scrollgesteuerte Seite implementiert wird – Architektur, Morph-Mathematik, die DOM↔WebGL-Brücke, die Build-Anleitung (§11), die Dateizuordnung. Produkt-UI-Arbeit ist von dieser Lektüre befreit; die eine Regel, die sie befolgen muss, wird hier wiederholt: Wenn die Bewegungs-Token eines Pakets von den SHELEG-Standards abweichen, gewinnt das Paket.

NOTWENDIG VOR JEDER ANIMATION: Lies MOTION_DOCTRINE.md. SHELEG_DESIGN.md erklärt, wie Bewegung aufgebaut wird; die Lehre entscheidet, ob sie überhaupt gebaut werden soll – die Häufigkeitstabelle, die Animationen auf Pfaden mit hoher Wiederholungsrate unterbindet, der Easing-Baum und das ease-in-Verbot, die maximale Dauer, die verbotenen Formen und der Vertrag für reduzierte Bewegung.

Verwendungszweck

• Landing-/Marketing-/Hero-Seiten, bei denen Bewegung ein erklärtes Ziel ist; Partikel- oder WebGL-Hintergründe, die mit dem Scrollen verbunden sind; scrollgebundene Diagramme, Schrittabläufe, Schienen, Parallax-Effekte
• Eine bestehende Scroll-Seite, die nervös, ruckelig oder phasenverschoben wirkt
• Produkt-UI, die ein geschlossenes visuelles System benötigt – Dashboards, Admin, interne/Entwickler-Tools, Tokens, Hell/Dunkel – nur das Stilpaket, über workbench
• KI-Produktoberflächen: Chat- und Agenten-UI, Streaming-Ausgabe, Ausführungslogs, Modellfehler, generierte Inhalte und Bestätigungszustände (AI_PRODUCT_PATTERNS.md)
• Übertragen eines visuellen Systems über die Figma-Grenze in beide Richtungen (FIGMA_BRIDGE.md)

Wende die kinematografische Bewegungsschicht niemals an auf: Produkt-UI, Dokumentationsseiten, statische Inhaltsseiten – oder Seiten, deren visuelles System oder Text noch nicht fertiggestellt ist. Produkt-UI verwendet nur die Stilpaket-Hälfte und nichts anderes.

Kernmuster – fünf Prinzipien, in dieser Reihenfolge

1. Ein Taktgeber. Alle Bewegung leitet sich von einem einzigen gemessenen Scroll-Zustand ab; keine Schicht misst das Scrollen selbst, daher können Schichten niemals phasenverschoben driftn.
2. Pro Frame lesen, selten benachrichtigen. Heiße Konsumenten (WebGL/Canvas/Schienen) lesen den Store imperativ, ohne Framework-Rendering; nur grobe Aktions-/Abschnittsänderungen benachrichtigen das Framework.
3. Halten, dann neu aufbauen. Eine Formation ~80 % eines Abschnitts halten, dann in einer kurzen, phasenversetzten, bogenförmigen Welle umwandeln. Überblendungen sind verboten.
4. Verdiente Bewegung. Scrub nur für Instrumente, die den Zustand über die Zeit beschreiben; Hover-/Eingangsbewegung bleibt unter 500 ms und blockiert nie Inhalte.
5. Degradation zur Ruhe. Reduzierte Bewegung / grober Zeiger / kein WebGL reduziert sich auf eine statische, vollständig lesbare Seite. Der Effekt ist ein Bonus, niemals eine Abhängigkeit.

Stilpakete

Die Bewegungsmethodik ist stilunabhängig; die visuelle Identität kommt von einem Stilpaket in styles/. Jede Paketdatei beginnt mit ihrer eigenen vollständigen Beschreibung – diese Tabelle dient der Auswahl, nicht dem Lesen anstelle des Pakets:

Paket	Look	Wähle für
instrument-console	fast schwarze Luftfahrtkonsole, ein elektrisches Blau, Mono-Telemetrie	Technik / Systeme / Infrastruktur · Kernvertrag
editorial-luxury	Creme und Espresso-Tinte, Salbei-Akzent, Fraunces/Newsreader	Redaktionell / Forschung / Premium-B2B · Kernvertrag
workbench	ruhige Hell/Dunkel-Produkt-UI, Rahmen als Hierarchie, Mono-Daten	Dashboards / Admin / interne & Entwickler-Tools (eigenständig) · Kernvertrag
briefing-room	dunkle 16:9-Präsentation, ein Blauton in OKLCH, gerasterte Kunst	Investor- und Vorstandsdeck, Briefings, Talks als Seite (eigenständig) · Kernvertrag
atrium	cremiges Tageslicht, ein Terrakotta, geriffeltes Glas über Fotografie	Verbraucher-Gesundheit, Langlebigkeit, Wellness, vertrauenswürdiges DTC · Kernvertrag
orchard	warme Hafer-Platten, Salbei plus Bonbon-Orange, weiche 3D-Pillen	freundliche Verbraucher-Biotechnologie, DTC-Wellness, Kits & Nahrungsergänzungsmittel · Kernvertrag
field-notes	grünstichiges Papier mit feinen Linien, Rost-Akzent, Passkreuze	Open Source & Entwickler-Tools, die mit Überprüfbarkeit verkauft werden (eigenständig)
showroom	weiße Galerie, fast schwarze Tinte, ein siebenschichtiger Rahmenschatten	Produktorientierte Unternehmen, deren bestes Argument die App auf dem Bildschirm ist
blueprint	weißes Papier, ein 32px-Raster, Passmarken, kein Radius	Infrastruktur, die mit Präzision verkauft wird – Vektorsuche, Speicher, Query-Engines
prism	schillernde Wäsche mit einer harten Kante, grotesk über Mono-Fließtext	Die Eingangstür eines OSS-Infrastrukturprojekts, bei dem Schritt eins ein Befehl ist
maquette	fast schwarzer Tisch, cremefarbene axonometrische Modelle, helles Aqua	Unternehmensdateninfrastruktur, die an einen Architektur-Käufer verkauft wird
cyclorama	Pastellfeld in einer 32s-Schleife, Schreibmaschine-Serife, orange Füllung	Unternehmens-KI-Transformation und angewandte KI-Beratungen
scoreboard	warmes Papier, Tinte primär, heißes Orange (nur zur Markierung), Pixel-Ziffern	Produkte, deren Argument eine sich anhäufende Zahl ist – Wachstum, Anzeigen, SEO

Ein materialisiertes Kit beantwortet einen Teil dessen, was ein Kernpaket auslässt. npx sheleg-design-skill --kit <pack> erzeugt src/styles.css, dessen Komponentenhälfte authored CSS für die Zustände ist, die ein Kernpaket nicht spezifiziert – :hover, :focus-visible, :disabled, ausgewählt. Es wird nicht mit diesem Skill ausgeliefert, daher wird ein Agent, der nur dieses Bundle liest, sie erfinden. Hole zuerst das Kit und behandle jeden Unterschied zwischen Kit und Paket als Fehler in einem von ihnen, nicht als Entscheidung.

Sechs der dreizehn Pakete unterliegen dem Kernvertrag, und das ändert, was du bekommst. Ein mit Kernvertrag gekennzeichnetes Paket spezifiziert nicht ## Komponenten, ## Hero, ## Responsive oder ## Signaturelement – daher sind pro-Komponenten-Zustände, der Öffnungs-Viewport und seine Zeilenobergrenze, die Kollapsregeln und das einzelne Element, an das man sich auf einer Seite erinnert, deine Entscheidung, und du sprichst sie laut aus, wenn du sie triffst. Die anderen sieben Pakete beantworten alle vier Punkte. Diese Asymmetrie ist das Einzige an der Bibliothek, das dich am ehesten dazu bringt, einen Wert zu erfinden und zu glauben, du hättest ihn gelesen: Was ein Kernpaket aussagt, ist auf zwei Dezimalstellen genau, und diese Präzision ist kein Beweis für die Hälfte, die es verschweigt. Jedes Paket erklärt seinen eigenen Umfang in einer Vertrag:-Zeile über seinem Register.

Lies das ausgewählte Paket vollständig, bevor du irgendetwas stylest – es liefert die Palette, Schriftart, Textur, Bewegungs-Token-Werte, charakteristische Motive und Verbote. Jedes Paket enthält eine fertige Token-Schicht in styles/tokens/<pack>.css – kopiere diese Datei wörtlich, anstatt Tabellen zu transkribieren. Für einen neuen Stil kopiere styles/STYLE_PACK_TEMPLATE.md und behalte jede Überschrift – Register / Palette / Schriftart / Textur & Oberfläche / Komponenten / Hero / Responsive / Bewegungs-Tokens / Charakteristische Motive / Signaturelement / Bewegungs-Geschmack (nur kinematografische Pakete) / Mikrointeraktionen / Verbote / Stolperfallen – und erstelle dann sein tokens/<pack>.css in derselben Änderung; erfinde niemals Token-Werte ad hoc.

Kalibrierung – drei Stellräder

Ein Paket beantwortet welches Register. Es beantwortet nicht wie weit. Zwei Landingpages auf demselben Paket, eine für eine regulierte Versicherung und eine für ein Designstudio, sind nicht dieselbe Seite. Drei Stellräder tragen diesen Unterschied aus, und sie werden einmal, laut und bevor irgendein Layout existiert, eingestellt.

• DESIGN_VARIANCE 1–10 – 1 ist perfekte Symmetrie, 10 ist bewusste Asymmetrie und keine zwei Abschnitte gleichen sich.
• MOTION_INTENSITY 1–10 – 1 ist statisch, 10 ist kinematografisch und physisch.
• VISUAL_DENSITY 1–10 – 1 ist eine Galeriewand, 10 ist ein Cockpit.

Ausgangswert 7 / 5 / 4. Gib die Werte und eine Begründung an, bevor du baust; bitte den Benutzer nicht, eine Datei zu bearbeiten, und weiche nicht stillschweigend von dem ab, was du angekündigt hast.

Ablesen aus dem Brief

Der Brief klingt wie	VARIANCE	MOTION	DENSITY
minimalistisch, ruhig, redaktionell, „leise wie Linear“	5–6	3–4	2–3
Premium-Konsumenten, markengeführt, „fühlt sich teuer an“	7–8	5–7	3–4
Agentur, Portfolio, experimentell, Award-Köder	9–10	7–9	3–4
Landing-/Marketing-Seite, kein weiteres Signal	7	5	4
Produkt-UI: Dashboards, Admin, interne Tools	4–5	2–3	6–8
Vertrauen zuerst: reguliert, öffentlicher Sektor, klinisch	3–4	2–3	4–5
Präsentationsdeck	5–6	1–2	3–4
Redesign, bestehende Identität bewahren	übernehmen	übernehmen +1	übernehmen
Redesign, explizite Überarbeitung	+2	+2	übernehmen

Ein Brief kann zwei Zeilen treffen, und sie können um den Faktor drei uneins sein. „Ein leises internes Admin-Dashboard“ trifft sowohl „leise wie Linear“ (DENSITY 2–3) als auch „Produkt-UI“ (DENSITY 6–8). Die Vorrangregel: Die Zeile, die die Oberfläche benennt, gewinnt über die Zeile, die eine Stimmung benennt. Eine Oberfläche entscheidet, wie viel hineinpassen muss; eine Stimmung entscheidet, wie damit umgegangen wird – in einem Produkt-UI-Paket wird „Leise“ durch Zurückhaltung bei Farbe und Bewegung erkauft, nicht durch Leere. Sage, welche Zeile du genommen hast und warum, wenn zwei ausgelöst werden.

Wie sie binden

• Das Paket gewinnt bei den Werten, die Stellräder gewinnen beim Ausmaß. Ein Stellrad erfindet niemals eine Farbe, eine Schriftart oder einen Radius – diese kommen aus der Token-Schicht des Pakets. Es entscheidet, wie viel Asymmetrie das Raster trägt, wie viel der Seite sich bewegt und wie dicht gepackt sie ist.
• MOTION_INTENSITY wird durch die Häufigkeitstabelle begrenzt, nicht umgekehrt. Eine 9 auf einem Einstellungsbildschirm bedeutet immer noch, dass der Tastaturpfad nicht animiert. Lies zuerst MOTION_DOCTRINE.md §1; das Stellrad erhöht nur das, was nach dem Wegschneiden durch diese Tabelle übrig bleibt.
• Behauptete Bewegung wird gezeigt. Über 4 bewegt sich die Seite tatsächlich – Eingang auf dem Hero, Enthüllung bei Schlüsselabschnitten, Reaktion bei der primären Aktion. Eine statische Seite, die eine 7 ankündigt, ist kaputt. Wenn funktionierende Bewegung nicht in den Umfang passt, reduziere das Stellrad auf 3 und liefere eine saubere, statische Seite aus; baue niemals eine halbfertige Bewegung, die stockt, abbricht oder springt.
• Ein eigenständiges Paket setzt seine eigene Obergrenze. workbench und briefing-room sind nicht kinematografisch; MOTION_INTENSITY über 3 bei einem von beiden ist ein Missverständnis des Pakets, keine mutige Entscheidung. field-notes ist standardmäßig eigenständig und kann sich für die kinematografische Schicht entscheiden – es hat einen Abschnitt ## Bewegung Geschmack, der sagt, wie – daher ist es das einzige eigenständige Paket ohne harte Obergrenze. Lies diesen Abschnitt, bevor du das Stellrad bei diesem Paket aufdrehst.

Das handwerkliche Niveau – was „fertig“ bedeutet, in dieser Reihenfolge

Wenn jeder einen Prototypen generieren kann, ist Handwerkskunst das einzige verbleibende Unterscheidungsmerkmal. Designer bewerten, was es bedeutet (Figma, State of the Designer 2026, n=906): visuelle Verfeinerung 58 % · durchdachte Problemlösung 47 % · klare intuitive UX 36 % · Emotion und Freude 35 % · Konsistenz 15 %. Lies das als eine Definition von „fertig“ in dieser Reihenfolge:

1. Verfeinerung – das Paket ausnahmslos angewendet: Tokens, keine Literale; kein ad-hoc Hex, Radius oder Schriftgröße irgendwo im Diff.
2. Systemdenken – die visuelle Entscheidung lebt an einem Ort (der Token-Schicht, dem SCENES-Register) und alles andere liest sie.
3. Klare UX – Struktur und Verhalten sind nicht die Hälfte dieses Skills; wenn die Abläufe und Zustände nicht entschieden sind, höre auf und entscheide sie zuerst.
4. Emotion – nur verdiente Bewegung (Prinzip 4), und niemals auf Kosten von 1–3.
5. Konsistenz – ein Easing, ein Dauer-Set, ein Akzent, ein Atom pro Aufgabe auf jedem Bildschirm.

Auf Abruf – drei Dinge, die die Paketschicht nicht entscheidet

• Szenentiefe – sechs Schichten (SURFACE_COMPOSITION.md), bevor CSS für eine kinematografische Seite geschrieben wird. Eine Szene hat Ebenen; alles auf einer Ebene zu haben ist der Fehler, den keine Menge an Easing repariert.
• Diagramme – übergib das Paket an dataviz (gleiche Datei), bevor du ein Diagramm in einem Paket zeichnest. Token-Namen sind nicht einheitlich über die dreizehn Pakete – nur --bg und --ink funktionieren überall – und eine undefinierte benutzerdefinierte Eigenschaft wirft keinen Fehler, sie fällt stillschweigend zurück. Eine zu erraten ist der leiseste Weg, ein falsches Diagramm auszuliefern.
• Mobile Oberflächen (MOBILE_SURFACES.md), wenn der Brief ein nativer App-Bildschirm oder eine mobile Web-Ansicht ist – keine Desktop-Seite, deren einziges mobiles Anliegen das Zusammenklappen ist. Fünf mobile Regeln, die die Pakete jeweils alleine bestimmen, eine sechste beantwortet kein Paket (die Schriftraster folgt der Viewport-Breite, nicht der Textgröße des Benutzers), und die Hälfte, die kein Paket auf einem Telefon entscheidet: Plattformkonvention.

Auswahl zwischen Paketen – verwende sie, stelle sie dir nicht vor

Wenn mehr als ein Paket ein Produkt tragen könnte, argumentiere nicht darüber. Rendere sie.

Setze die Kandidatenpakete auf eine bestehende, gefüllte Seite – echte Kopfzeile, echte Daten, echte Dichte – umgeschaltet durch einen ?variant=<pack>-Suchparameter, und wechsle zwischen ihnen im Browser. Nur die Token-Schicht ändert sich; das Markup bleibt.

Ein Wegwerf-Route mit Platzhalter-Inhalten ist ein Vakuum: Jedes Paket sieht darin gut aus, was genau der Grund ist, warum es nichts klärt. Wenn es wirklich noch keine gefüllte Seite gibt, ist die Wahl verfrüht – baue die Seite in dem Paket, das das Register des Briefs angibt, und überprüfe die Entscheidung, sobald es etwas Reales zum Umschalten gibt. Wenn der Brief überhaupt kein Signal gibt, sind die Standardeinstellungen workbench für Produkt-UI und showroom für eine Marketing-Seite: Beide sind ruhig genug, dass ein späterer Wechsel das Layout, nicht die Identität kostet. (Hier stand früher „das Standardpaket“ ohne eines zu nennen, was kein Fallback ist.)

Das Vergleichsgestell ist ein Gerüst, kein Liefergegenstand: Es wird mit derselben Änderung entfernt, die die Entscheidung festhält.

KI-gesteuerte Produktoberflächen

Das Design von KI-Produkten ist jetzt die drittgefragteste Fähigkeit in derselben Umfrage (37 %) – vor Bewegung und Informationsarchitektur – und die Oberflächen sind neu: Ein Modell, das streamt, ein Agent, der handelt, eine Antwort, die falsch sein könnte. Lies AI_PRODUCT_PATTERNS.md vor dem Entwerfen von:

• Lauf-Logs, die Model-Fevers oder aufgelesene Metadaten pro Schritt zeigen
• Streaming-Text, der als Tinte eintrifft, nicht als Blöcke
• Bestätigungs- und Generierungszustände, die nicht mit Ladefehlern verwechselt werden
• Agenten-Aktionslisten, die sich selbst aufzeichnen
• Strukturierte Ausgaben (JSON/Tabelle/Karte), die ohne Framework-Rendering aktualisiert werden

Dieses Dokument enthält vorgefertigte Lösungen für die drei häufigsten Fehler in diesem Bereich: Timer als Proxy für Fertigstellung, Skeleton biegt sich und Flackern bei Zustandswechseln.

Niemals animation-getriggerte Aktionen. Benutze ontransitionend oder onanimationend nicht für Geschäftslogik. Ein kollabiertes Formular hat seinen Absende-Button nicht entfernt – es hat ihn keine 300 ms erhalten. Agenten, die sich auf diese Ereignisse stützen, zerstören sich selbst unter Last. Verwende schreibgeschützte DOM-Mutationen, wenn du auf das Ende eines Stilwechsels warten musst.

Allgemeine Befehlskonvention

npx sheleg-design-skill install [--pack <pack>] [--kit] [--force]

• install ohne Argumente installiert die Dateien des Standardpakets und erzeugt src/styles.css aus dem Kit.
• --pack <pack> wählt ein Paket aus der obigen Tabelle aus.
• --kit materialisiert auch das Kit (Standard, wenn nicht anders angegeben, außer --bare).
• --force überschreibt bestehende Dateien ohne Aufforderung.
• npx sheleg-design-skill whats-new zeigt die Änderungen der letzten Version.

Lizenz

MIT