ChaseSunstrom/ui-design

Sampo: UI-Design, Bewegung und 3D

Ein Pfad für jede Arbeit, die das Aussehen oder die Bewegung eines Bildschirms betrifft: eine Webseite, einen App-Bildschirm, eine Komponente, eine Animation, eine 3D-Szene oder „mach es gut aussehen lassen“. Er leitet zu den UI-Playbooks (Pfade unten sind relativ zu diesem Skill; dieselben Dateien werden mit sampo playbooks show ui/NAME ausgegeben) und zu den Sampo-Verben, die das Ergebnis messen. Das Ziel ist ein UI mit einem Standpunkt, niemals das generische Karten-Set: jeder Schritt unten setzt entweder eine Entscheidung fest oder beweist eine. Ein Terminal-UI oder ein Claude-Code-Mod verwendet stattdessen ../playbooks/references/ui/terminal-ui.md.

Arbeiten Sie innerhalb einer fokussierten Aufgabe (jeder Schritt bearbeitet Dateien). Lesen Sie pro Schritt nur das genannte Playbook.

1. Richtung: Entscheiden, wie es sich anfühlen soll

• Das Repository hat bereits eine (eine DESIGN.md mit einem Abschnitt ## Direction, einem Markenleitfaden, einem ausgelieferten Designsystem): sie gewinnt. Lesen Sie sie und gehen Sie zu Schritt 2, es sei denn, der Benutzer hat ein neues Aussehen verlangt.
• Keine Richtung, oder der Benutzer möchte verschiedene Looks oder Stile zur Auswahl: Laden: Skill sampo:directions (sechs Einschaltkarten aus einem Satz, die Auswahl gespeichert als DESIGN.md mit einem Kühnheitsniveau).
• Zeigen Sie echte Muster anstatt sie zu beschreiben: sampo page looks schreibt eine Galerie mit einem lebenden Exemplar pro Look-Karte; sampo looks ordnet die zwanzig nach den vergangenen „Behalten“- und „Rückgängig“-Aktionen des Benutzers, also bieten Sie aus deren Spitze an.
• Die Haltung, die Geschmackswörter, die Richtungs-Bank und „Defaults to avoid“: ../playbooks/references/ui/design-direction.md.

2. Tokens: Schriftart, Farbe, Abstand

• ../playbooks/references/ui/type-and-colour.md: Schriftskala und Paarung, OKLCH-Palettenrollen, Dark Mode als eigener Durchgang.
• Vorhandenes CSS: sampo design extract SRC schreibt die Token-Tabelle aus seinen benutzerdefinierten Eigenschaften in den Abschnitt ## Tokens der DESIGN.md (--out - gibt sie stattdessen aus). Aus dem Nichts: sampo design palette SEED --out tokens.css erstellt eine helle und eine dunkle Palette aus einer Farbe (--format css|dtcg|tailwind); es gibt sie auf der Standardausgabe aus, also leiten Sie mit > um. Tokens aus Figma oder einer DTCG .json-Datei: sampo design tokens tokens.json --to md --out DESIGN.md. Hartcodierte Werte: sampo design infer SRC schlägt Tokens vor.
• Marken-Assets: sampo design tokens DESIGN.md --to brand --out public/ schreibt favicon.svg und card.svg.
• Token-Drift: sampo design xray PAGE --out xray.png umrandet jedes Element grün (Token-Farbe) oder rot.
• Beweisen Sie es, bevor Sie darauf aufbauen: sampo design contrast TOKENS überprüft die Rollenpaare (Fließtext 7:1 im Dunkelmodus).

3. Erstellen: Layout und Verhalten

• Starten Sie mit einer strengen Vorlage: sampo new list, dann sampo new web DIR (eine Seite) oder sampo new scene DIR (eine 3D-Szene); sampo new check PATH hält es streng.
• ../playbooks/references/ui/composition.md: Rhythmus, Raster, Tiefe aus einem Licht, der Held, ein Zustandsatlas.
• ../playbooks/references/ui/interaction.md: Feedback-Fristen, Tastaturnavigation, Formularfehler, 360-Px-Touch-Regeln.
• Diagramme: ../playbooks/references/ui/data-viz.md. Story-Seiten: ../playbooks/references/ui/scrollytelling.md.
• Code-seitige Karten: sampo lib show NAME (die Playbooks nennen welche).

4. Bewegung: Entworfen, nicht gestreut

• ../playbooks/references/ui/motion.md: Timing-Tokens, eine Zustands-zu-Bewegungs-Tabelle, Storyboards, reduzierte Bewegung als eigener Pfad.
• Schreiben Sie den Motion Score (motion.toml im Repository-Stammverzeichnis), dann sampo motion check (eine fehlende reduzierte Form, eine unbekannte Kurve, ein Token, das in DESIGN.md fehlt) und sampo motion compile --to css|waapi|three|lab --out FILE, um den Code zu generieren.
• Spiele und verspielte UI: ../playbooks/references/ui/game-feel.md. Sound: ../playbooks/references/ui/sound-design.md.

5. 3D: Eine Szene, die die Seite niemals zerstört

• ../playbooks/references/ui/scene-3d.md: Komposition, Licht und Material, ein Frame-Budget, der Überlebensvertrag (kein WebGL, reduzierte Bewegung, verlorener Kontext), Black-Screen-Triage.
• Beschreiben Sie die Szene einmal als Daten (Kamera, Lichter, Materialien, Meshes, Animationen) in scene.json, dann sampo scene compile scene.json --to three --out scene.js (ein three.js-Modul) oder --to component (eine Komponente).
• Keine Abhängigkeiten: die einteilige WebGL2-Vorlage ../playbooks/references/ui/templates/scene.html (sampo new scene).
• Licht-Rigs und PBR-Voreinstellungen: sampo lib show light-and-material; eine Shader-Textur für eine Oberfläche, niemals die gesamte Richtung: sampo lib list --area looks, dann sampo lib show shader-NAME; Bibliotheken: sampo lib show three-js, sampo lib show react-three-fiber.

6. Prüfen: Durch Hinsehen beweisen

• sampo design lint SRC: allgemeine Design-Fehler und handwerkliche Schnitzer; beheben Sie jeden oder sagen Sie, warum er bleibt. Seine letzte Zeile nennt Tokens aus DESIGN.md, die keine Datei verwendet: binden Sie sie ein oder entfernen Sie sie aus der Tabelle.
• sampo design check: DESIGN.mds opt-in-Gates (## Gates, - brief: advisory|blocking): die Farben der Bedienelemente, Schriftfamilien und Dauern, im Code gefunden; - a11y: …: Token-Kontrastpaare, ein Pfad für reduzierte Bewegung, keine schnellen Blitze, img-alt und ein Fokus-Stil, der sichtbar ist; - debt: advisory 40: nicht getokente Farben, Dauern und Radien pro Datei, unter dem Budget.
• sampo design contrast TOKENS erneut nach jeder Farbänderung; sampo motion check nach jeder Bewegungsänderung.
• sampo critique URL: die Stile, die die Seite wirklich verwendet, gegen die Tokens in DESIGN.md (unbenannt, nahezu dupliziert, Einzelstück); --why SELECTOR zeigt, welche Regel gewonnen hat. --bingo bewertet neun Anzeichen eines vorlagenhaften Looks (exit 1 bei einer vollen Linie); --marks shot.png verwandelt in Bleistiftrot gezeichnete Striche auf einem Screenshot in eine erfasste FIX pro markiertem Element (--note sagt, was jedes verlangt); --brief [ID] prüft, ob die vom Briefing zitierten Phrasen auf der Seite sind.
• ../playbooks/references/ui/visual-qa.md: sampo smoke erfasst die Frame-Matrix (360/768/1440, hell und dunkel, reduzierte Bewegung); Lesen Sie die PNGs und schauen Sie. Vorher und nachher: sampo img diff A.png B.png --out diff.png.
• Die Zustände einer Komponente (Standard, Hover, Fehler, Leer, Laden): sampo stories CHART erfasst jeden in einer Matrix-Seite. sampo shot und sampo stories akzeptieren --profile tv|eink|car|wrist (Größe und Maßstab dieser Oberfläche) und --reduced-motion (prefers-reduced-motion: reduce, für Poster und statische Zustände).
• Zeichnen Sie jeden als Beleg auf dem Schritt der Aufgabe auf; eine UI-Änderung ist nicht allein durch grüne Tests abgeschlossen.

7. Geschmack

Der Benutzer behält einen Look oder macht ihn rückgängig: sampo looks keep LOOK oder sampo looks revert LOOK, sodass die nächste Rangliste daraus lernt.