Communitygithub.com

orbit-poster-editorial

Baue eine redaktionelle „Orbit“-Startseite auf tiefschwarzer Tinte und warmem Papier – riesige, eng gesetzte serifenlose Überschriften mit einer konturierten und einer orangefarbenen Zeile, die sich mit der Maus bewegen, ein CSS-Planet in geneigten 3D-Orbits, umgeben von schwebenden Papierkarten (ein Ziel-Ticket, das zyklisch wechselt, eine Passstempelkarte, ein kleiner Fotoabzug) mit Parallax-Effekt, ein Partikel-Netzwerk-Canvas, das auf den Mauszeiger reagiert, ein geneigter orangefarbener Lauftext, Posterkarten, bei denen echte Fotografie in Graustufen mit Multiplikation unter riesigen Buchstaben und einer farbigen Sonnenscheibe vermischt wird (Farbe kehrt bei Mauskontakt zurück), eine „Routenkonsole“ mit Registerkarten, einer riesigen Zahl in einem Orbit-Ring, Support-Karten mit vermischten Fotos und Cursor-Licht sowie einem randlosen orangefarbenen Abschluss-CTA. Verwende diese für Reisemarken, Reiseplaner, Auslandsstudien- oder Umzugsagenturen, Tourismusverbände, Kultur- und Veranstaltungsseiten oder wenn der Nutzer eine redaktionelle, plakative, mausreaktive Startseite wünscht, die Grafikdesign mit eigenen Fotos verbindet. Erzeugt eine HTML-Datei plus ein Asset-Verzeichnis.

Was ist orbit-poster-editorial?

Dieses Skill beschreibt den Aufbau einer redaktionellen, plakatartigen Startseite, die wie eine lebendig gewordene Serie von Reiseplakaten wirkt. Es ist speziell für KI-Agenten wie Claude Code, Cursor oder Codex konzipiert und liefert eine detaillierte Bauanleitung – mit visuellem DNA-System, Abschnitts-Patterns und Signatureffekten. Der Nutzen liegt in der Erzeugung einer einzigen, eigenständigen HTML-Datei, die tiefschwarze Tinten- und warme Papierabschnitte abwechselt, riesige, eng gesetzte Überschriften mit einer konturierten und einer orangefarbenen Zeile verwendet und echte Fotografien durch Graustufen und Multiplikation nahtlos in Poster einbettet (Farbe kehrt bei Mauskontakt zurück). Die Seite enthält eine Helden-„Orbit-Universum“-Komponente mit einem 3D-Planeten, schwebenden Papierkarten, einem Partikel-Netzwerk, das auf den Mauszeiger reagiert, und einer Laufschrift. Weitere Abschnitte sind ein Poster-Wechsler, eine geteilte „Routenkonsole“ mit Registerkarten, eine Support-Kartenleiste und ein vollflächiger orangefarbener Abschluss-CTA. Das Skill behandelt auch praktische Aspekte wie Fotokompression, Bau mit `ffmpeg` und `node`, Barrierefreiheit (Tastaturnavigation, `role="tablist"`) und Reaktionsfähigkeit bei 390px, was es zu einem umfassenden Leitfaden für die plattformübergreifende Generierung einer komplexen, reichhaltigen interaktiven Startseite macht.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/smyrna-pergamum/web-design-skills/tree/HEAD/skills/orbit-poster-editorial
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Orbit Poster Editorial

Eine Startseite, die aussieht wie eine lebendig gewordene Serie von Reiseplakaten. Tintenschwarze und papierhelle Abschnitte wechseln sich ab; die Schrift ist riesig und eng gesetzt; ein orangefarbener Akzent trägt jede Aktion. Der Hero ist ein kleines Universum – ein Planet, Umlaufbahnen und Papierkarten – das sich zur Maus neigt. Weiter unten werden echte Fotografien nicht in Kästchen gesetzt, sondern in die Poster gedruckt: Graustufen, auf die Papierfarbe multipliziert, unter riesigen Buchstaben, bis der Besucher darüberfährt und die Farbe zurückkehrt.

Der Referenzbau ist example/index.html (Atlasio, eine fiktive Reisemarke, Englisch). Detailcode befindet sich in references/components.md; screenshots/ zeigt jeden Abschnitt auf Desktop und Mobilgeräten.

1. Vor dem Design

  1. Sammle 6–8 Fotografien mit Menschen in Bewegung (Bahnhöfe, Bretter, Straßen, Fenster). Weise jedem Foto eine einzelne Aufgabe zu: ein kleiner Druck im Hero, eines pro Poster-Zustand, eines pro Support-Karte. Verwende niemals dasselbe Foto zweimal.
  2. Überprüfe jedes Foto auf Logos und Bildschirme Dritter (Flughafenwerbung, Markenschilder) und schneide sie aus.
  3. Wähle vier „Möglichkeiten“ für den Poster-Wechsler (Reisearten, Städte, Programme, Jahreszeiten) und vier Schritte für die Routenkonsole. Jede benötigt einen einwortigen Postertitel, eine zweizeilige Überschrift, einen Satz und ein konkretes Beispiel („Paris → Wien mit dem Nachtzug“).
  4. Komprimiere Fotos (siehe §5). Die sieben Fotos des Beispiels sind zusammen etwa 750 KB groß.

2. Visuelle DNA

ElementRegel
Tinte#101b22 Seite; Text Papier #edece4; dezent #9ca6a8; Haarlinien #ffffff20.
Papier#edece4 helle Abschnitte mit Postertönen: Salbei #cbd4b2, Lehm #d8c4b5, Dunst #c0cfce, Flieder #c9c2d3; Support-Karten #dbe1cd und #e5d5c6.
AkzentEin Orange #ff6c3a (Planet, Sonnenscheiben, Lauftext, aktiver Tab, Schlussabschnitt). Ein helles Limettengrün #c6d9ab/#c2d3a3 nur für den Punkt in der Überschrift und die Routennummer.
SchriftartDM Sans 800–1000 für Display (Buchstabenabstand -.065 bis -.09em, Zeilenhöhe .8–1); 400–700 für Fließtext. IBM Plex Mono 6–9px Großbuchstaben für jedes Label, Koordinate und Augenbraue.
ÜberschriftDrei gestapelte Zeilen: durchgehend, konturiert (-webkit-text-stroke:1px), orange; jede Zeile bewegt sich unterschiedlich stark mit der Maus.
FotosInnerhalb von Postern und Support-Karten: grayscale(1) contrast(1.1) + mix-blend-mode:multiply auf einer getönten, isolierten Karte; Hover stellt Farbe wieder her und skaliert auf 1.04. Kleine Drucke (Hero) bleiben mit einem Papierrand in Farbe.
FormenRechteckige Ecken überall, außer Planet, Sonnenscheiben, Umlaufbahnen, Pillen im Wechsler.
CursorEin 30px Ring mit einem Punkt, mix-blend-mode:difference; wird über Links größer. Magnetische Buttons driften zum Zeiger hin.

3. Abschnitts-Patterns

  1. Kopfzeile – Wortmarke, ein Mono-„Edition“-Link, drei Anker, ein Bewegungsumschalter (MOTION ON/OFF), ein CTA mit Rahmen, Burger unter 650px. Ein 2px orangefarbener Lese-Fortschrittsbalken sitzt oben auf der Seite.
  2. Hero – Mono-Meta-Zeile, die dreizeilige Überschrift, ein Sternchen, zwei Zeilen Text, ein unterstrichener Link, kleiner Druck. Rechts: das Orbit-Universum (Planet mit Breiten-/Längenringen und einem zweibuchstabigen Wort, drei Umlaufbahnen, Satelliten, gedrehte Mono-Labels) und drei schwebende Karten: Ziel-Ticket (Klicken durchläuft zyklisch die vier Möglichkeiten), Passstempelkarte, Fotoabzug. Untere Leiste: Scroll-Link, „Beweg die Maus“-Hinweis, Volumennummer.
  3. Lauftext – durchgehendes orangefarbenes Band um −1.6° gedreht, riesige Wörter getrennt durch Sternchen.
  4. Möglichkeiten – Überschrift mit einer grauen Mittelphrase, Pillen-Wechsler, dann ein zweispaltiges Board: das Poster (Koordinatenzeile, vermischtes Foto, Sonnenscheibe, riesiges Wort, unteres Label) und die Details (große Nummer, Augenbraue, Überschrift, Text, „eine Route zum Starten“, Tinten-Button, Mono-Hinweis). Poster kippt in 3D mit der Maus.
  5. Routenkonsole – dunkler Abschnitt, Überschrift mit orangefarbener Phrase, vier Tabs als umrandete Zeile (aktiver Tab orange), Panel mit einer riesigen Limettengrün-Nummer in einer langsam rotierenden Orbit-Ellipse und dem Schritt-Text; eine „Entsperren“-Zeile darunter.
  6. Support – großer rotierender Stern + zweifarbige Überschrift; zwei Karten (Selbstbedienung und bezahlter Berater) jede mit einem vermischten Foto, einem Cursor-folgenden Licht und einem unterstrichenen Link; eine „Sprache lernen“-Zeile mit einem orangefarbenen Wort.
  7. Abschluss-CTA – vollflächiger orangefarbener Abschnitt mit einem Raster, einem zweizeiligen riesigen Link („Also, wohin als nächstes?“) mit einem Pfeil, der sich bei Hover bewegt, einem kurzen Versprechen, einem Tinten-Button und einer Mono-Routen-Zeile.
  8. Fußzeile – Wortmarke, ein zweizeiliger Satz, Links; eine untere Mono-Zeile mit einem ehrlichen Hinweis, wenn die Marke fiktiv ist.

4. Signatureffekte

  • Mausfeld: Bei pointermove im Hero werden --px/--py (−1…1) auf :root gesetzt; Überschriftenzeilen, schwebende Karten und das 3D-Orbitsystem lesen sie in translate3d/rotateX/Y mit verschiedenen Multiplikatoren, abgemildert durch einen .6s cubic-bezier(.16,1,.3,1) Übergang. Ein Live-X 050 / Y 050-Koordinations-Readout wird damit aktualisiert.
  • Partikel-Netzwerk: Ein Canvas mit 65 driftenden Punkten (25 auf Telefonen), die unter 95px Abstand verbunden werden; Punkte werden innerhalb von 120px des Zeigers weggedrückt, und orangefarbene Linien verbinden sich mit dem Zeiger innerhalb von 180px. Läuft nur, während der Hero sichtbar ist und Bewegung eingeschaltet ist.
  • Vermischte Fotoposter: Das Foto ist ein absolut positioniertes <img> bei z-index:-2 innerhalb eines isolation:isolate-Posters; Graustufen + Multiplikation drucken es in die Posterfarbe, die Sonnenscheibe multipliziert sich darüber, das riesige Wort sitzt darüber. Durch Wechseln der Möglichkeit wird das alte Foto ausgeblendet (.swap), src getauscht, beim load eingeblendet und die Postertönung und Sonnenfarbe über ein data-theme-Attribut geändert.
  • Kippkarten + Cursor-Licht: Poster und Support-Karten drehen sich bis zu ~7–9° zum Zeiger hin und legen --cx/--cy für einen radialen Highlight frei.
  • Barrierefreie Tabs: Routen-Tabs verwenden role="tablist", roving tabindex, Pfeil-/Home-/End-Tasten.
  • Bewegungsumschalter: Ein Button pausiert jede Animation und setzt das Mausfeld auf Null; prefers-reduced-motion und grobe Zeiger schalten dieselben Dinge automatisch aus.

5. Bauregeln

  • Fotos: ffmpeg -i in.jpg -vf scale=1400:-2 -q:v 5 out.jpg (Hero-Druck ~900px breit). Logos und Bildschirme zuschneiden: -vf "crop=w:h:x:y,scale=1100:-2". Jedes unter ~170 KB halten.
  • Eigenständiges HTML mit doctype, charset und viewport; Schriftarten von Google Fonts; Inline-SVG-Symbole für Pfeile und Sterne; keine anderen Abhängigkeiten.
  • Jedes Foto hat ein echtes alt, das die Szene beschreibt, außer Posterfotos, die dekorativ sind (alt="", aria-hidden), weil das Posterwort und die Details die Bedeutung tragen.
  • Mobil: Hero stapelt sich, das Universum skaliert auf ~66%, Karten schrumpfen mit ihren eigenen Transforms, Postwörter fallen auf 22vw mit word-break:normal, Tabs werden zu einem 2×2-Raster, Cursor-Ring und Kippen sind aus.
  • Kein horizontaler Scroll bei 390px; Skip-Link; sichtbarer :focus-visible Umriss.

6. Text verfassen

  • Kurze Aussagesätze in Dreiergruppen: „Come with a dream. Leave with a plan.“ „Find the place. Draw your own route.“
  • Mono-Labels sprechen wie eine gedruckte Ausgabe: 01 / POSSIBILITIES, MODE 02 / AIR · FAR AWAY BY TOMORROW.
  • Beispiele müssen echt aussehen, aber als Beispiele gekennzeichnet sein; rechtliche oder Einreisebestimmungen verweisen stets auf die offizielle Quelle.

7. Abschluss-Checkliste

  • Jedes Foto wird einmal verwendet, gutgeschrieben, frei von Drittlogos zugeschnitten und komprimiert.
  • Der Hero neigt sich mit der Maus; die Zielkarte und „eine andere Möglichkeit“ durchlaufen zyklisch die vier Zustände synchron mit dem Poster.
  • Poster-Fotowechsel erfolgt ohne Aufblitzen des alten Bildes; Farbe kehrt bei Mauskontakt zurück.
  • Routen-Tabs funktionieren mit der Tastatur.
  • Bewegungsumschalter, reduzierte Bewegung und Berührung stoppen alle das Mausfeld, Canvas, Lauftext und Kippen.
  • 390px: Keine Worttrennung innerhalb von Postertiteln, kein horizontaler Scroll, keine Konsolenfehler.
  • Screenshots neu generiert: node scripts/screenshots.mjs example screenshots.

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

paper-notebook-landing

Redesign or build a landing page in a warm "paper notebook" style — cream paper, chunky soft serif headlines, handwritten marker notes, yellow sticky notes, name-label notebooks, illustrated scenes with roman-numeral feature panels, doodle grids, lined-paper lists, comic-strip storytelling and a giant orange footer. Use when the user asks for a paper-notebook / scrapbook / sticky-note / playful-education look, or wants a friendly, trustworthy landing page for education, student services or family-facing products. Produces a single self-contained HTML file with scroll-driven notebook animation, auto-sizing comic speech bubbles and optional multi-language switching.

smyrna-pergamum/aperture-topology-story

Build a developer-tool, data, network or OSINT product website as a dark engineering grid with one bright idea inside it — a glowing SVG node topology hero (circular icon nodes, mono labels, dashed curved links, packets travelling out and back), a huge glowing condensed display headline, then a pinned scroll story where a circular aperture opens from the central node onto a light paper-grid workspace in which white cards, chips and connectors move between nodes in four phases, and the aperture closes back to dark on a glowing closing line. Ends with calm technical sections - a mono integration strip, a tab-switched architecture diagram with real screenshots, puzzle-tab module blocks, a se...

smyrna-pergamum/neumorphic-club-fintech

Build a premium fintech, card or membership website in two-material neumorphism (soft UI) — a dark relief page with light relief "islands" for cards, panels, coins and the phone (inverted in the light theme), depth only from paired shadows (raised outer / pressed inset), heavy lowercase serif headlines, wide-tracked uppercase eyebrows and one lime "LED" accent — with signature effects - a light source that follows the cursor so every shadow on the page turns with it, engraved text that lights up word by word on scroll, an embossed credit card that tilts with the mouse, a phone rising out of an inset slot, fanning card slabs, pressable reward coins, a rotating lock dial with spotlight text...

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community