Communitygithub.com

youssef-110/apple-web

Erstelle Webseiten im Stil der Apple-Produktmarketingseiten (apple.com-Produktseiten) – exakte Schriftgrößen, -abstände, Farben, Easing, Abstände, klebrige durchsichtige Navigation, Scroll-Einblendungen, Kachelgalerien, Statistikblöcke – mit einem fertigen CSS/JS-Bibliothek. Verwende es, wenn der Nutzer eine Apple-ähnliche / apple.com-ähnliche Seite, eine Premium-Produkt-Landingpage, eine 'No AI Slop'-Marketingseite oder Referenzen auf apple.com-Design, Schriften oder Animationen wünscht.

Was ist apple-web?

Diese Fähigkeit ermöglicht es einem KI-Agenten, Produkt-Marketingseiten zu erstellen, die wie apple.com aussehen und sich anfühlen: ruhig, selbstbewusst, typografisch geführt und mit Bewegung, die das Produkt in den Vordergrund stellt. Jeder Wert – von Schriftgrößen und -abständen über Farben und Easing bis hin zu Abschnittsabständen – wurde von einer live apple.com-Produktseite gemessen und ist in der Referenz `reference/measured-tokens.md` dokumentiert. Das System umfasst eine CSS-Bibliothek (`library/apple-web.css`) für Typografie, Layout und Komponenten sowie eine JavaScript-Bibliothek (`library/apple-web.js`) für Scroll-Einblendungen, klebrige Navigation, scrollgesteuerte Animationen, Galerien und Zahlenanimationen – alles ohne Abhängigkeiten. Es ist für die Verwendung mit KI-Agenten wie Claude Code, Cursor oder Codex konzipiert und stellt sicher, dass die Ausgabe nie wie von KI erzeugt aussieht ('No AI Slop'), indem es eine Checkliste mit strengen Regeln für Typografie, Farbe, Layout, Bewegung und Navigation vorgibt.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/youssef-110/apple-web/tree/HEAD
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Apple Web

Erstelle Produkt-Marketingseiten, die sich wie apple.com lesen: ruhig, selbstbewusst, typografisch geführt, mit Bewegung, die das Produkt in den Vordergrund stellt. Jeder Wert in dieser Fähigkeit wurde von einer live apple.com-Produktseite gemessen (Nov 2026) und ist in reference/measured-tokens.md dokumentiert.

Dies ist ein Stilsystem, kein Klon. Kopiere niemals Apples Texte, Produktnamen, Logos, Fotografien, Symbole oder Schriftartdateien. Schreibe originelle Inhalte für das Produkt des Nutzers.

Dateien

PfadVerwendung
library/apple-web.cssTokens, Typografieklassen, Layout, Komponenten. Zuerst einbinden.
library/apple-web.jsScroll-Einblendungen, klebriger Navigationszustand, Scroll-Scrub, Galerien, Count-up. Keine Abhängigkeiten.
demo/index.htmlVollständige funktionierende Seite mit jeder Komponente. Kopiere sie als Ausgangspunkt.
reference/measured-tokens.mdRohmesswerte: Schriftgrößen, Farben, Radien, Easing, Breakpoints.
reference/page-anatomy.mdWie eine Apple-Produktseite sequenziert ist, Abschnitt für Abschnitt.
reference/anti-slop.mdWas eine Seite von KI erzeugt aussehen lässt und die Apple-ähnliche Lösung für jedes Problem.

Arbeitsablauf

  1. Kopiere library/ in das Projekt. Binde apple-web.css im <head> und apple-web.js mit defer ein.
  2. Beginne mit demo/index.html. Behalte die Abschnittsreihenfolge aus reference/page-anatomy.md bei.
  3. Schreibe zuerst den Text. Überschriften bestehen aus 2–5 Wörtern mit einem Punkt ("Schnell. Wirklich schnell."). Fließtext ist grau mit einem hervorgehobenen weißen Satz.
  4. Wähle ein Thema pro Abschnitt: theme-dark (schwarz) oder theme-light (#f5f5f7) oder theme-white. Wechsle bei langen Läufen ab, nicht mehr als drei gleiche hintereinander.
  5. Führe die folgende Checkliste aus, bevor du es als fertig erklärst.

Regeln, die es Apple-typisch machen

Typografie

  • Eine Familie. System SF Pro auf Apple-Geräten, Inter sonst (der Stack im CSS übernimmt das). Keine zweite Display-Schriftart, keine Serifen-Akzente.
  • Schriftstärke 600 für jede Überschrift. 400 für Fließtext. Niemals 700–900, niemals 300.
  • Laufweitenänderungen mit Größe: negativ bei Fließtext (17px → -0.022em) und Helden (64px+ → -0.009em), leicht positiv bei 19–32px. Verwende die Typografieklassen; setze niemals einen einzigen letter-spacing-Wert überall.
  • Überschriften sind kurz und auf Marketingabschnitten zentriert; linksbündig in Lockups neben Medien.
  • Fließtext auf dunklen Abschnitten ist #86868b; hebe einen Satz mit <strong> hervor (rendert #f5f5f7, gleiche Schriftstärke). Kein fetter Fließtext.

Farbe

  • Graustufenseite. Ein Akzent: Link/Aktion-Blau #0071e3 (dunkle Abschnitte verwenden #2997ff für Links). Farbe kommt von Produktbildern, nicht von der Benutzeroberfläche.
  • Keine Farbverläufe auf der Benutzeroberfläche oder Text, kein Leuchten, keine farbigen Schatten.

Layout

  • Inhaltsbreite 980px für Text, 1260px für Medienzeilen, 1440px maximale Viewport-Breite. Breakpoints 1068px / 734px.
  • Abschnittspadding 120px oben / 120–176px unten auf dem Desktop. Großzügig, niemals eng.
  • Abgerundete Kacheln: Radius 28px auf großen Kacheln, 18px auf kleinen Karten. Buttons sind Pillen (980px Radius).

Bewegung

  • Easing cubic-bezier(0.4, 0, 0.6, 1) für UI-Zustände; Dauern 100ms (Hover), 240ms (Deckkraft), 320ms (Farbe/Navigation), bis zu 1s für Scroll-Einblendungen.
  • Einblendungen sind Deckkraft + ein 30–40px Anstieg, einmalig, wenn das Element zu ~15% im Viewport sichtbar ist. Staffele Geschwister um 80–120ms.
  • Produktmomente verwenden Scroll-Scrub (Fortschritt gebunden an die Scrollposition), kein Autoplay.
  • Hover auf Kacheln: subtile Skalierung 1.02 auf den darin enthaltenen Medien, niemals der Kartenschatten.
  • prefers-reduced-motion: Alles wird zu einer sofortigen Einblendung. Die Bibliothek übernimmt das.

Navigation

  • 44px globale Navigation, dann eine 52px klebrige lokale Navigation mit Produktname links, Links + kleiner blauer "Kaufen"-Pille rechts. Sie wird durchscheinend (blur(20px) saturate(180%)), sobald sie klebt.

Checkliste (kein KI-Schlendrian)

  • Keine Emojis, keine Icon-in-einem-Kreis-Feature-Grids, kein "✨", keine lila/türkisen Farbverläufe.
  • Überschriften sind Aussagen, keine Fragen oder "Entfessle / Hebe hervor / Nahtlos / Revolutioniere".
  • Jede Zahl in einer Statistik hat eine Einheit und eine Fußnotenmarkierung, wenn es eine Behauptung ist.
  • Maximal ein CTA-Stil pro Abschnitt (blaue Pille oder blauer Textlink mit ›), niemals beide groß.
  • Medien dominieren; Text liegt niemals in einer Karte, die über einem starken Farbverlauf schwebt.
  • Laufweite ist pro Klasse auf jedem Textelement gesetzt; kein Standard-Browser-Fett.
  • Fußnotenabschnitt am Ende in 12px #86868b.
  • Überprüft bei 1440, 1068, 734 und 375px Breite und mit reduzierter Bewegung aktiviert.

Siehe reference/anti-slop.md für die vollständige Liste mit Lösungen.

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