maryam-salawudeen/design-range

Design Range

Wenn man es sich selbst überlässt, designt Claude jedes Produkt auf die gleiche Weise: Inter oder Geist, ein Indigo/Violett-Verlauf, ein zentrierter Hero mit zwei Buttons, drei Feature-Karten mit Icons in getönten Kreisen, rounded-2xl überall, weiche graue Schatten. Es sieht okay aus – und es sieht aus wie jede andere KI-gemachte Website. Dieser Skill existiert, um dieses Muster bewusst zu durchbrechen.

Der Kernschritt ist einfach: Wähle den Stil nicht selbst aus, würfle ihn. Einem Modell gesagt, es solle „einen Stil wählen“ landet immer wieder bei denselben wenigen Optionen. Deshalb wird die Auswahl an ein Skript übergeben, das aus einer Bibliothek zusammenhängender Richtungen eine Stichprobe zieht und vermeidet, was das Projekt kürzlich verwendet hat. Deine Aufgabe ist es, diese Richtung dann vollständig umzusetzen und mit handwerklichem Geschick auszuführen.

Arbeitsablauf

1. Die Situation einschätzen

• Was wird gebaut? Ordne es einem Produkttyp zu: marketing (Landingpages, Websites, Portfolios zählen hier auch dazu, wenn du möchtest), saas (App-Bildschirme, in denen man arbeitet), dashboard (Analysen, Admin, Monitoring), ecommerce (Shops, Produkt- und Kategorieseiten), mobile (native oder mobile-first App-Bildschirme), portfolio.
• Gibt es eine bestehende Marke oder ein bestehendes Designsystem? Wenn das Projekt bereits festgelegte Token, eine design-direction.md besitzt oder der Benutzer um eine Funktion innerhalb einer bestehenden App bittet, behalte dessen Richtung bei. Abwechslung ist für neue Projekte, Redesigns und wenn der Benutzer nach etwas anderem fragt. Konsistenz innerhalb eines Produkts ist ein Feature; Gleichheit über Produkte hinweg ist der Fehler.
• Hat der Benutzer einen Vibe genannt? („luxuriös“, „verspielt“, „dunkel und technisch“). Übersetze dies in Filter (--energy, --mode) oder eine spezifische --show <id>, zeige aber trotzdem Alternativen, es sei denn, er war sehr spezifisch.
• Taste-Datei. Wenn references/taste.md Inhalt hat, lies ihn. Sie enthält die persönlichen Vorlieben und Abneigungen des Benutzers und überschreibt die Bibliothek, falls diese in Konflikt geraten. Die Zeilen exclude: und favor: werden automatisch vom Roll-Skript angewendet; der Rest (Lieblingsschriftarten, Farben, Moves, die ihm gefielen) liegt bei dir, um ihn in die jeweilige Richtung einzubringen.

2. Richtungen würfeln

python3 <skill-dir>/scripts/roll.py --product <type> [--count 3] [--mode light|dark] [--energy quiet|medium|loud]

Führe es vom Projektstamm aus. Es liest zwei Verläufe: die projekteigene .design-history.json und eine gemeinsame ~/.claude/design-range-history.json, die alle Projekte umfasst, und vermeidet beide, sodass das nächste Produkt nicht das gleiche Aussehen wie das vorherige bekommt. Es verteilt auch die Akzentfarben: Die Palette jeder Option wird so gewählt, dass ihr Akzentfarbton weit von den anderen Optionen und von kürzlich verwendeten Akzenten entfernt ist, damit die „Abwechslung“ nicht in einer einzigen Farbfamilie bei unterschiedlichen Schriftarten zusammenfällt. Es gibt 3 kontrastierende Optionen aus, jede ein vollständiges Briefing: Stimmung, Schriftarten mit einsatzbereiten CSS-URLs, eine benannte Palette, ein Layout-Archetyp, Formensprache, Bewegung, Signature-Moves, Dinge, die vermieden werden sollten, und einen Tailwind v4 @theme-Block.

Andere Befehle: --list (alle Richtungen), --show <id> --product <type> (eine Richtung vollständig, optional --font N --palette N --layout <id>).

3. Den Benutzer wählen lassen (wenn er da ist)

Präsentiere die Optionen kompakt, jeweils einen kurzen Block: Name, einzeilige Stimmung, das Schriftpaar, die Palette als Hex-Werte, die Layout-Idee. Frage, welche es sein soll, und erwähne, dass man mischen kann („Schriftarten von Option 2 mit Palette von Option 3“) oder neu würfeln.

Wenn der Benutzer sag ist, sie und verschiebe sie.“) oder neu würfeln kann.

Wenn der Benutzer gesagt hat „Bau es einfach“ oder du ohne menschliche Aufsicht arbeitest, wähle für sie und wähle nach Passung. Die Zufälligkeit dient dazu, deine Gewohnheiten zu durchbrechen, nicht, um einen Nachtclub-Look auf einen Abendplaner zu setzen. Frage bei jeder Option: Würden die Kunden dieser Marke sich darin wiedererkennen? Passt die Stimmung zu dem, was das Produkt tut (ruhig für Wellness und Geld, energisch für Sport und Nachtleben, präzise für Daten, warm für Essen und Zuhause)? Wähle die Option, die am besten passt. Wenn keine passt, würfle einmal neu (--count 4 oder filtere mit --energy/--mode) und wähle aus der neuen Menge. Eine überraschende Wahl ist gut, wenn du in einem Satz sagen kannst, warum sie zum Produkt passt; sage diesen Satz, wenn du berichtest, welche Richtung du verwendet hast. Halte die Erstellung nicht auf, um auf eine Wahl zu warten, die niemand treffen wird.

4. Aufzeichnen und eine Richtungsdatei schreiben

python3 <skill-dir>/scripts/roll.py --record <id> --font N --palette N --layout <layout-id> --product <type>

Dies schreibt sowohl den Projektverlauf als auch den gemeinsamen Verlauf. Speichere dann das gewählte Briefing als design-direction.md im Projektstamm. Zukünftige Sitzungen (und du selbst in einer Stunde) lesen sie, um innerhalb dieses Produkts konsistent zu bleiben, und der gemeinsame Verlauf stellt sicher, dass das nächste Produkt nicht das gleiche Aussehen bekommt.

5. Bauen

Lies vor dem Bauen die passende Plattformreferenz, da jeder Produkttyp eigene handwerkliche Regeln hat:

Produkt	Lese
marketing, portfolio	references/marketing.md
saas	references/saas.md
dashboard	references/dashboard.md
ecommerce	references/ecommerce.md
mobile	references/mobile.md

Stack: React + Tailwind standardmäßig (siehe „Stack-Setup“ unten). Dann:

• Verdrahte zuerst die Token. Lade die Schriftarten, füge den @theme-Block ein und gestalte mit den semantischen Namen (bg-bg, bg-surface, text-text, text-muted, border-border, bg-accent, font-display). Das Skript hat bereits den Kontrast geprüft: Verwende text-accent-ink, wenn akzentfarbener Text auf bg oder surface sitzt (er entspricht dem Akzent, wenn der Akzent bereits lesbar ist), und text-on-accent für Beschriftungen auf mit Akzent gefüllten Buttons und Badges. Wenn das Briefing eine Kontrast-Zeile zeigt, sagt sie, was angepasst wurde. Rohe Tailwind-Palettenklassen wie indigo-500 oder slate-100 sind der Weg, wie der Standardlook zurückkommt – halte sie aus Komponenten heraus.

• Setze die Richtung vollständig um. Verwende sichtbar mindestens zwei ihrer Signature-Moves und behandle die „vermeiden“-Liste als harte Einschränkungen. Eine zögerlich angewandte Richtung (korrekte Schriftarten, aber sonst alles Standard) kollabiert zurück in den generischen Look. Wenn das Briefing radius 0 vorgibt, ist nichts abgerundet. Wenn es harte Offset-Schatten vorgibt, gibt es keine unscharfen.

• Lass den Layout-Archetyp die Seite formen. Das gewürfelte Layout (z.B. sticky-scroll-story, three-pane, hub-and-sheet) soll das zentrierte-Drei-Karten-Skelett durchbrechen. Baue darum herum.

• Erweitere die Palette, ersetze sie nicht. Du wirst Hover-, Active- und subtile Tönungen brauchen. Leite sie aus den gegebenen Farben ab (color-mix(in oklch, var(--color-accent) 85%, black) oder Opazitäts-Modifikatoren wie bg-accent/10), anstatt nach neuen Farbtönen zu greifen.

• Echte Inhalte. Schreibe plausible, spezifische Texte für das Produkt. Lorem ipsum und „Feature Eins“ verbergen, ob das Design tatsächlich funktioniert.

• Bring es in Bewegung. Statische Seiten wirken wie Vorlagen, und die Taste-Datei des Benutzers bittet in jedem Bau um Bewegung. Jeder Bau bekommt alle vier der folgenden, ausgedrückt in der eigenen Bewegungspersönlichkeit der Richtung (schnell für Brutalismus und Sport, federnd für Spielkiste, langsam und filmisch für cinematisch, sanft für organisch, gestuft für Retro-OS):

  1. Eingangschoreografie beim Laden: Die Helden-Elemente treffen in einer kurzen gestaffelten Sequenz ein (Überschrift, dann Text, dann Aktionen, 60-120ms auseinander), nicht alle auf einmal und nicht eine einzige langsame Einblendung.
  2. Hover- und Drück-Rückmeldung auf alles Klickbare, im Stil der Richtung: ein harter Schatten beim Drücken, eine federnde Skalierung, ein Unterstrich-Slide, ein Glühen, ein Wackeln.
  3. Eine Signatur-Animation aus den Feldern motion oder signature des Briefings (Schimmer, drehendes Glyphen, sich verwandelnder Blob, Ken Burns, Schreibmaschine, Laufschrift, sich drehende Formen). Es ist der Moment, an den man sich erinnert, also gib ihm einen sichtbaren Platz.
  4. Scroll-Reveals für Abschnitte unter dem Falz, wo sie passen (IntersectionObserver oder CSS animation-timeline: view() mit einem Fallback).

  Animiere transform und opacity anstelle von Layouteigenschaften, damit es flüssig bleibt, halte UI-Feedback unter ~300ms und platziere alles Dekorative hinter @media (prefers-reduced-motion: no-preference) (oder schalte es unter reduce aus), damit Leute, die Bewegung ausschalten, eine ruhige, vollständige Seite bekommen.

6. Gleichheits-Check vor dem Abschluss

Sieh dir an, was du gebaut hast, und behebe jedes der folgenden, es sei denn, die Richtung ruft explizit danach:

• Inter, Roboto, Arial oder system-ui als sichtbare Display-Schriftart
• Lila/Indigo/Blau-zu-Violett-Verlauf irgendwo
• Zentrierter Hero, Überschrift + Untertitel + zwei Buttons, dann ein 3er-Raster aus Icon-Karten
• Jeder Container rounded-xl/2xl mit shadow-md/lg
• Icons in pastellgetönten Kreisen
• Gray-50-Seite mit weißen Karten als gesamte visuelle Idee
• Der gesamte Text in denselben wenigen Größen; kein typografischer Kontrast
• Verlaufstext in der Überschrift (außer Y2K Chrome oder Glass Aurora)

Dann eine schnelle handwerkliche Prüfung: Textkontrast erfüllt WCAG AA (4,5:1 Body, 3:1 großer Text; passe muted an, falls eine Palette auf ihrem Hintergrund durchfällt), jedes interaktive Element hat Hover-, Focus-visible- und Disabled-Zustände, es funktioniert bei 375px Breite, und Animationen respektieren prefers-reduced-motion.

Stack-Setup

Tailwind v4 (Standard): Setze die Schrift-<link>s in index.html (oder next/font / @import url(...) am Anfang der CSS), dann den gewürfelten @theme-Block in die Haupt-CSS-Datei nach @import "tailwindcss";. Klassen wie bg-accent, font-display, text-muted funktionieren automatisch.

Tailwind v3: Setze die gleichen Werte unter theme.extend.colors und theme.extend.fontFamily in tailwind.config.js mit den gleichen Namen.

Next.js: Bevorzuge next/font/google für Google-Schriftarten (gleiche Namen, Unterstriche für Leerzeichen) und bilde sie auf die CSS-Variablen ab. Fontshare-Schriftarten werden über die CSS-URL geladen.

React Native / Expo (für mobile): Verwende NativeWind mit der Palette in tailwind.config.js und lade Schriftarten mit @expo-google-fonts/<font-name> oder expo-font. Fontshare-Schriftarten benötigen die heruntergeladenen Schriftdateien in assets/fonts. Wenn der Benutzer nur einen visuellen Mockup möchte, ist eine mobile-große React-Webseite (390x844 Rahmen) in Ordnung und viel schneller; frage bei Unklarheit.

Single-Datei-Vorschauen: Wenn es noch kein Projekt gibt und der Benutzer es nur sehen möchte, ist eine einzelne HTML-Datei mit dem Tailwind-CDN (<script src="https://cdn.tailwindcss.com"></script> für v3-Konfiguration oder @tailwindcss/browser@4 mit einem Inline-<style type="text/tailwindcss">@theme {...}</style>) plus React via ESM akzeptabel.

Wenn der Benutzer noch mehr Abwechslung wünscht

• Neu würfeln: Führe das Skript erneut aus; es vermeidet bereits kürzlich ausgewählte Optionen.
• Remixen: Nimm die Schriftart einer Richtung mit der Palette einer anderen. Überprüfe, ob das Ergebnis immer noch stimmig wirkt (eine Pixel-Schriftart mit einer Luxus-Palette ist ein Witz, was nur in Ordnung ist, wenn das der Punkt ist).
• Neue Richtung: Wenn der Benutzer einen Look beschreibt, den die Bibliothek nicht hat, füge ihn im gleichen Format zu assets/directions.json hinzu, sodass er in zukünftige Würfe einbezogen wird. Überprüfe, ob seine Schriftarten auf Google Fonts oder Fontshare existieren.
• Taste-Datei: Wenn der Benutzer sagt, was er liebt oder hasst („niemals Serifen verwenden“, „ich liebe Brutalismus“), biete an, es zu references/taste.md hinzuzufügen, sodass es jedes Mal angewendet wird.