zhaodi-Wen/design-agent-skills

Scroll- und Drag-Produktpräsentation

Liefere eine tatsächlich funktionsfähige Webseite und editierbare Quelldateien. Kläre zuerst, ob es sich um Scrollen, Ziehen oder beides handelt. Wenn eine bestehende Seite um eine Interaktion erweitert wird, behalte die andere bereits genehmigte Interaktion bei. Referenzvideos dienen der Erkennung visueller und Bewegungszusammenhänge; daraus kann nicht abgeleitet werden, dass die ursprüngliche Seite ein bestimmtes Framework verwendet. Die Status der Seitenpräsentation und des echten E-Commerce-Bestellsystems sind getrennt zu beschreiben.

Aus der Referenz extrahieren

Lese die Dauer und das Bildformat des lokalen Videos, extrahiere Bilder vom Anfang, von Übergangspunkten und vom Ende; erhöhe bei Bedarf die Abtastrate, um kontinuierliche Bewegungen zu bestätigen. Notiere: Position und Größe des Hauptobjekts, Perspektivwechsel, Hintergrund und Requisiten, Schriftgröße, Überlagerungsreihenfolge, Scrollrichtung und Rücksprungverhalten. Verwechsle nicht den Rahmen der Bildschirmaufnahme, erklärende Untertitel oder den Mauszeiger mit dem Webdesign.

Ordne die Referenz in einer nach dem Scrollfortschritt angeordneten Aktionsliste an. Markiere jeweils, was direkt sichtbar ist, was abgeleitet wurde und welche Implementierungsmethode gewählt wurde. Referenz zum Kaffee-Beispiel und zur Routenentscheidung siehe references/motion-design.md.

Darstellungsmethode wählen

• Echte Perspektivwechsel, interaktive Rotation oder Materialwechsel erforderlich: Three.js 3D-Modell mit GSAP. Bevorzuge vorhandene GLB-Dateien; einfache Gefäße wie Tassen oder Flaschen können mit parametrischer Geometrie modelliert werden, klar als originäre schematische Modelle gekennzeichnet.
• Feste Kamera, komplexe Lichtverhältnisse, vorhandene Render-Assets: Canvas-Sequenzbild. Der Frame-Index wird durch den Scrollfortschritt bestimmt; behandle nicht geladene Frames und Speicherverbrauch; gehe nicht davon aus, dass beliebige Videos frame-genau rückwärts springen können.
• Nur Verschiebung, Transparenz und Ebenenneigung: DOM/CSS-Ebenen. Ein einzelnes Bild kann keine echte Vorder-zu-Rückseite-Drehung erzeugen.

Nach der Materialroutinen-Entscheidung die Scrolllogik aufbauen. Wenn der Benutzer keine Marke angegeben hat, können eindeutige Demo-Marken und Produktdaten verwendet werden; erfinde keine Zertifizierungen, Verkaufszahlen, Bewertungen oder echte Transaktionsergebnisse.

Startvorlagen

Es gibt zwei in sich geschlossene Vite + Three.js + GSAP-Vorlagen, die je nach Produkt und Aufgabe ausgewählt werden; neue Marken erfordern dennoch ein neues visuelles Design.

• assets/starter/ (coffee, Standard): Kaffee Scroll-Narrativ mit Drag, Geschmackswechsel und lokalem Einkaufsbeutel; mini.html ist eine Mini-Programm-artige H5-Seite mit geteiltem Produkt und Einkaufsbeutel.
• assets/gallery/ (gallery): Drei visuelle Themen: Parfüm, Kopfhörer, Armbanduhr. Kopfhörer unterstützen Scroll-Aufklappen, drei Textabschnitte und Drag; Parfüm und Armbanduhr verwenden Drag und Struktur-Buttons. Kann für Nicht-Kaffee-Beispiele verwendet werden.

Erstelle in einem noch nicht existierenden Verzeichnis (das Skript überschreibt kein vorhandenes Projekt):

python3 /path/to/scroll-product-showcase/scripts/create_project.py /absolute/path/to/new-project
cd /absolute/path/to/new-project
npm ci
npm run dev -- --port 5197

Ersetze /path/to/scroll-product-showcase durch den tatsächlichen Installationspfad des Skills. Wenn der Port belegt ist, verwende einen anderen verfügbaren Port und gib die tatsächliche Adresse an.

Für Nicht-Kaffee-Beispiele füge --template gallery hinzu. Der Kopfhörer-Einstieg ist /?case=headphones, weitere unter /?case=perfume und /?case=watch. Ändere ein vorhandenes Projekt direkt, ohne den Generator zu überschreiben.

Änderungsorte:

• src/scene.js: Kamera, Beleuchtung, Scroll-Pose und unabhängiger Drag-Winkel; Kaffeemodell hier, Galeriemodelle in src/models.js.
• src/scroll-story.js: Scroll-Phasen, synchronisierter Text und Fortschrittsbalken.
• src/main.js: Einstieg und Interaktionszustand; Zeigergesten für Kaffee in src/drag.js, Einkaufsbeutel in src/bag.js.
• Kaffee src/products.js, Galerie src/content.js: Produkttexte und Farben.
• src/style.css und index.html: Layout, responsives Design, Texte und semantische Struktur.
• Kaffee mini.html, src/mini.js, src/mini.css, src/cup-viewer.js: Mini-Programm-Oberfläche; vite.config.js behält zwei Build-Einstiegspunkte.

Die Vorlage fixiert die Szene mit CSS sticky und treibt den Fortschritt mit ScrollTrigger an; füge keine weitere Pin-Ebene hinzu. Andere Projekte können stattdessen ScrollTrigger pin verwenden, müssen aber das konfliktierende sticky-Layout entfernen.

Interaktionskombinationen und Implementierungsbeschränkungen

Bei Drag, Scroll-Kombination, Struktur-Buttons oder Mini-Programm-Oberflächen lies references/interaction-modes.md für Haltungsüberlagerung, Eingabeaufteilung und Abnahmekriterien.

• Verwende einen einzigen Fortschrittswert von 0–1 zur Steuerung des Scroll-Ablaufs von Modell, Kamera und Text; bei gleichem manuellen Winkel sollten Vorwärts- und Rückwärtsscrollen zum gleichen Fortschritt die gleiche Haltung ergeben. Der Drag-Winkel wird unabhängig gespeichert und über die Scroll-Haltung gelegt; zwei Prozessoren dürfen sich nicht gegenseitig die Rotation überschreiben.
• Bei gleichzeitigem Scrollen und Ziehen setzt das Zurücksetzen standardmäßig nur den manuellen Winkel zurück, behält aber den Scrollfortschritt und die Farben bei. Wenn Struktur-Buttons dieselbe Aktion steuern, sollten sie zur entsprechenden Position der Zeitleiste springen, um eine separate Animation zu vermeiden, die den Fortschritt überschreibt; befolge die Benutzervorgaben, wenn sie andere Rücksetzbedeutungen angeben.
• Bestimme zuerst den Sicherheitsbereich des Hauptobjekts, dann platziere den Text; bei Mobilgeräten müssen Größe und Bewegungsbahn des Hauptobjekts neu angepasst werden, nicht einfach die Desktop-Version proportional verkleinert.
• Titel, Beschreibung, Auswahl-Buttons und Preis in zugänglichem HTML platzieren; Canvas ist für die visuelle Darstellung zuständig.
• Beim Austausch von Texturen alte Texturen freigeben; beim Unmounten Observer, Animationen, Ereignisse und GPU-Ressourcen bereinigen. Das Pixelverhältnis begrenzen und unnötige Neuzeichnungen unsichtbarer Szenen vermeiden.
• Für Benutzer mit reduzierter Bewegung statische Kompositionen und direkt erreichbare Produktinformationen bereitstellen. Bei WebGL-Fehlern Produktauswahl und Einkaufsbeutel beibehalten.
• Lokaler Einkaufsbeutel kann Auswahl, Mengenänderung, Löschen und Persistenz unterstützen. Ohne Backend klar als Demo kennzeichnen; keine Bestellbestätigung oder Zahlungserfolg anzeigen.

Validierung und Lieferung

Baue zuerst, dann überprüfe im Browser die echte Darstellung. Decke mit tatsächlicher Interaktion Anfang, Mitte, Ende, Rückwärtsscrollen, schmale Bildschirme, reduzierte Bewegung und Produktauswahl ab; bei Koexistenzmodus auch mittiges Ziehen, Weiterrollen und Zurücksetzen testen. Nach einem Fallwechsel Text, Bühnenhöhe und Farben prüfen. Bei Einkaufsbeutel Menge, Gesamtsumme und Zustand nach Aktualisierung überprüfen. Auf Seitenfehler, Ressourcenladen und horizontales Überlaufen achten.

Das Skript scripts/verify-browser.mjs der Kaffee-Vorlage ist ein optionales Regressionsskript, das über PLAYWRIGHT_MODULE auf ein vorhandenes Playwright-Modul und über BASE_URL auf den tatsächlichen Dienst verweisen kann. Wenn die Umgebung ein Browser-Tool vorschreibt, verwende dieses Tool für gleichwertige interaktive Abnahmen und starte keinen anderen Browser-Treiber. Für die Galerie verwende ein Browser-Tool zur Validierung gemäß den oben genannten Szenarien. Berichte nur über tatsächlich ausgeführte Prüfungen; Screenshots sind dennoch erforderlich, um die visuelle Qualität zu beurteilen; ein erfolgreicher Build oder HTTP 200 ersetzt keine visuelle Abnahme.

Liefere nach Abschluss die Vorschau-URL, das Quellverzeichnis und wichtige Screenshots. Beschreibe den tatsächlich implementierten Ansatz und die nicht verbundenen Dienste. Nehme nur dann eine Bildschirmaufnahme oder ein Video auf, wenn der Benutzer dies ausdrücklich verlangt; melde statische Screenshots nicht als interaktive Validierung oder Bildschirmaufnahme.

Technische Referenzen bei Bedarf: GSAP ScrollTrigger, Three.js GLTFLoader.