Niltra/web-assets-reales

Echte Assets, null Stockmaterial

Prinzip: Eine Webseite wirkt nicht wie von KI gemacht, wenn ihre Bilder unverwechselbar sind: echtes Produkt, echte Terminalausgabe, echte Fotos. Stockmaterial, generische Renderings und KI-generierte Inhalte als Ersatz sind verboten.

Projektscreenshots (Playwright)

• Screenshots immer vom Build in Produktion des Projekts, Viewport 1440x900, deviceScaleFactor: 2.
• Zustände wählen, die etwas aussagen (Dashboard mit Daten, Abfrageergebnis, laufende Pipeline), nicht die leere Startseite.
• Warte auf networkidle + geladene Schriftarten, bevor der Screenshot ausgelöst wird; Cookies/Banner ausblenden, wenn sie stören.
• Speichern in public/shots/<projekt>/<zustand>.png und mit sharp komprimieren (AVIF/WebP für das Web, PNG nur bei Transparenzbedarf).
• Für Repos ohne Demo: Screenshot der Repo-Seite (gerendertes README), niemals ein Mockup.

Persönliches Foto

• Lade dein Profilfoto mit der bereits geöffneten Browsersitzung herunter (Chrome mit Debug-Port), anstatt einen zurechtgeschnittenen Screenshot zu verwenden.
• Speichere das Original in public/me.jpg (oder public/me.webp) und eine beschnittene Version; verzerre oder retuschiere niemals Haut/Identität.
• Wenn bereits ein Porträt im Projekt vorhanden ist, verwende es erneut, bevor du es erneut herunterlädst.

Technologie-Logos

• Verwende Simple Icons (npm i simple-icons) für monochrome SVGs (MIT/CC0 der Bibliothek; die Logos sind Marken ihrer Eigentümer, Verwendung rein informativ).
• Standardmäßig mit der Textfarbe des Design-DNA rendern; Markenfarbe nur in Hover-Details, wenn sie einen Mehrwert bietet.
• Falls ein Tool nicht in Simple Icons enthalten ist (einige KI-Tools), verwende ein konsistentes typografisches Monogramm (Anfangsbuchstabe in der Mono-Schrift), niemals ein erfundenes Bild oder ein von Google Images heruntergeladenes Logo.

Terminal / Code

• Falls ein „Terminalbeweis“ nötig ist: Erstelle einen HTML-Block mit der Mono-Schrift, führe echte Projektbefehle aus und mache einen Screenshot mit Playwright. Erfinde niemals eine falsche Ausgabe.
• Die Befehle und Versionen müssen echt und überprüfbar sein.

Bildbearbeitung und Konsistenz

• Sanfter Duotone-Filter, auf die Design-DNA-Palette abgestimmt + optional leichte Körnung; die gleiche Bearbeitung auf allen Screenshots.
• Rahmen/Radien und Schatten gemäß den Tokens des Projekts, nicht pro Bild.
• Zielgröße: Kein Bild > 300 KB; next/image mit korrekten sizes und priority nur beim ersten Bild verwenden.
• Jedes Asset erhält ein beschreibendes alt; falls dekorativ, alt="".

Integritätsregeln

• Null erfundene Metriken in Screenshots (wenn eine Grafik nicht echt ist, wird sie nicht aufgenommen).
• Null Wasserzeichen, null Bilder mit zweifelhaftem Urheberrecht, null generative KI als Hauptinhalt.
• In docs/assets.md Ursprung und Lizenz jedes Assets dokumentieren.