videogen/design/desktop-ansicht/PROMPT.md at 347fe7008a751235a9046d05bbf9ebd820a65088

Files

JUSN 347fe7008a Reskin auf Pinterest-Desktop-Optik, Funktionen unveraendert

Vorlage ist die Pinterest-Web-App. Geaendert wurde ausschliesslich die
Gestaltung: state, Tastaturkuerzel, deck/flash/commit/undo, die
Drag-Handler und die Beispieldaten sind Byte-fuer-Byte identisch.

- Hell statt dunkel: weisser Grund, Text #111, roter Akzent #e60023
  statt Mint auf Tannen-/Weinrot-Verlauf
- Sidebar (236px, beschriftet) wird zur 80px-Icon-Rail, Einstellungen
  sitzt unten; Zustaende ueber .rail/.rail.active statt inline, weil die
  dc-Laufzeit style-hover mit !important setzt und den aktiven Button
  sonst beim Hover aufhellt
- Kopfzeile bekommt das Pinterest-Suchfeld (Pille, 48px) plus Konto;
  Tabs wandern in eine eigene Leiste mit 3px-Unterstrich
- Karten randlos mit 16px-Radius; Merken-Pille erscheint beim Hover oben
  rechts, dazu ein Scrim - beides an :hover/:focus-within der Karte
- Profil-Galerie wird Masonry (columns:5, gestaffelte Hoehen)
- Nur noch Manrope, JetBrains Mono und backdrop-filter entfallen

Der Tageszaehler "Karten gesichtet" hat mit der schmalen Rail seinen
Platz verloren und sitzt jetzt in der Tab-Leiste.

Offen: das Suchfeld ist eine Attrappe - die App hat keine Suche. Im
README unter "Offene Punkte" vermerkt.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

2026-08-05 23:25:15 +02:00

1.4 KiB

Raw Blame History

Setze das Design aus diesem Ordner in unserem Stack um.

Lies design/desktop-ansicht/README.md vollständig — es enthält Layout, exakte Farben, Typografie, Abstände, Interaktionen, State-Modell und Design-Tokens.
Referenz-Prototyp: design/desktop-ansicht/Videogen Web.dc.html (Template oben, Logikklasse mit Zustand/Interaktion unten, Beispieldaten in DATA). Zum Ansehen im Browser öffnen — support.js muss im selben Ordner liegen. Diese Dateien sind Design-Referenz, kein Produktionscode: nicht kopieren, sondern in unserer bestehenden Umgebung mit unseren Patterns und Komponenten nachbauen.
Fidelity ist high — pixelgenau umsetzen: Farben, Radien, Übergänge, Hover-/Focus-States, Drag-Schwellen und Animationsdauern wie im README angegeben. Die visuelle Sprache ist Pinterest Desktop: weißer Hintergrund, 80px-Icon-Rail ohne Beschriftung, Suchfeld als Pille, rote Primäraktion #e60023, randlose 16px-Karten, Masonry im Profil. Hover-Elemente (Merken-Pille, Scrim) hängen am Hover der Karte.
Umfang: App-Shell (Sidebar + Kopfzeile mit Tabs) und die vier Screens Feed, Profil, Erstellen, Einstellungen.
Icons als Lucide-Icons umsetzen (im Prototyp stehen Unicode-Glyphen als Platzhalter). Medien-Platzhalter (CSS-Verläufe mit Streifen) durch echte Bilder/Videos ersetzen.

Frag nach, bevor du Struktur oder Verhalten abweichend vom README änderst.

1.4 KiB Raw Blame History

1.4 KiB

Raw Blame History