zhaodi-Wen/design-agent-skills

Présentation de produit avec défilement et glisser-déposer

Livrez une page web fonctionnelle et ses fichiers sources modifiables. Confirmez d'abord s'il s'agit d'un défilement, d'un glisser-déposer ou des deux ; lorsqu'on ajoute une interaction à une page existante, conservez l'autre interaction déjà autorisée. Les vidéos de référence servent à identifier les relations visuelles et de mouvement, sans pour autant affirmer que le site d'origine utilise un framework particulier. La page d'affichage et le système de commande réel de la boutique en ligne sont décrits séparément avec leur état d'avancement.

Extraire des références

Pour une vidéo locale, lisez la durée et le format d'image, extrayez les images du début, du point de transition du milieu et de la fin ; augmentez l'échantillonnage si nécessaire pour confirmer le mouvement continu. Enregistrez : la position et la taille du sujet, les changements de perspective, l'arrière-plan et les accessoires, la taille de la police, l'ordre d'occlusion, la direction du défilement et le comportement de retour. Ne confondez pas le cadre de l'enregistrement, les sous-titres explicatifs ou le curseur de la souris avec la conception web.

Organisez les références en un tableau d'actions classées par progression du défilement. Marquez séparément ce qui est directement visible à l'écran, ce qui est déduit et la méthode d'implémentation choisie. Pour l'étude de cas sur le café et les décisions de parcours, voir references/motion-design.md.

Choisir le mode de présentation

• Changement de perspective réaliste, rotation interactive ou changement de matériau nécessaires : Modèle 3D Three.js avec GSAP. Lorsqu'un GLB approprié est disponible, réutilisez-le en priorité ; pour les tasses, bouteilles et bocaux simples, utilisez une géométrie paramétrique, en précisant qu'il s'agit de maquettes illustratives originales.
• Cadre fixe, éclairage complexe, ressources de rendu déjà disponibles : Séquence d'images Canvas. Le numéro d'image est déterminé par la progression du défilement ; gérez les images non chargées et l'occupation mémoire, sans supposer qu'une vidéo quelconque puisse être lue image par image de manière fluide.
• Simple translation, opacité et inclinaison plane : Couches DOM/CSS. Une seule image ne peut pas produire un vrai passage de face à dos.

Une fois le parcours des éléments déterminé, construisez la logique de défilement. Lorsque l'utilisateur n'a pas spécifié de marque, utilisez des données de marque et de produit de démonstration explicites ; n'inventez pas de certifications, de ventes, d'avis ou de résultats de transactions réels.

Modèles de démarrage

Deux modèles Vite + Three.js + GSAP autonomes sont disponibles, à choisir selon le produit et la tâche ; une nouvelle marque nécessite toujours une refonte visuelle.

• assets/starter/ (coffee, par défaut) : Narration de défilement pour le café avec glisser-déposer, changement de couleur d'arôme et panier local ; mini.html est une interface H5 de style mini-programme partageant le produit et le panier.
• assets/gallery/ (gallery) : Trois thèmes visuels : parfum, écouteurs, montre. Les écouteurs prennent en charge le défilement avec dépliage, trois sections de texte et le glisser-déposer ; le parfum et la montre utilisent le glisser-déposer et des boutons de structure. Utilisez ce modèle pour créer des cas autres que le café.

Créez dans un répertoire qui n'existe pas encore (le script n'écrase pas un projet existant) :

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

Remplacez /path/to/scroll-product-showcase par le chemin réel d'installation du skill. Si le port est occupé, utilisez un autre port disponible et fournissez l'adresse réelle.

Pour créer un cas autre que le café, ajoutez --template gallery. L'entrée pour les écouteurs est /?case=headphones, avec /?case=perfume et /?case=watch. Lorsque vous modifiez un projet existant, modifiez-le directement, sans utiliser le générateur pour l'écraser.

Emplacements de modification :

• src/scene.js : Caméra, éclairage, posture de défilement et angle de glisser-déposer indépendant ; le modèle de café se trouve ici, les modèles de galerie dans src/models.js.
• src/scroll-story.js : Étapes de défilement, texte synchronisé et barre de progression.
• src/main.js : Point d'entrée et état d'interaction ; les gestes du pointeur pour le café sont dans src/drag.js, le panier dans src/bag.js.
• Café src/products.js, galerie src/content.js : Texte et couleurs du produit.
• src/style.css et index.html : Mise en page, disposition réactive, texte et structure sémantique.
• Café mini.html, src/mini.js, src/mini.css, src/cup-viewer.js : Interface de style mini-programme ; vite.config.js conserve les deux points d'entrée de construction.

Les modèles utilisent CSS sticky pour fixer la scène et ScrollTrigger pour piloter la progression ; n'ajoutez pas de pin supplémentaire au même niveau. D'autres projets peuvent également utiliser ScrollTrigger pin, mais ils doivent supprimer la mise en page sticky conflictuelle.

Combinaisons d'interactions et contraintes d'implémentation

Lorsque le glisser-déposer, le défilement, les boutons de structure ou l'interface de mini-programme sont impliqués, lisez references/interaction-modes.md, qui contient la superposition des postures, la répartition des entrées et les points de validation.

• Utilisez une seule progression 0–1 pour contrôler le modèle, la caméra et le texte orchestrés par le défilement ; avec le même angle manuel, avancer et reculer à la même progression doit donner la même posture. L'angle de glisser-déposer est stocké indépendamment, puis superposé à la posture de défilement ; les deux gestionnaires ne doivent pas se superposer pour contrôler la rotation.
• Lorsque le défilement et le glisser-déposer coexistent, la réinitialisation ne supprime que l'angle manuel, en conservant la progression du défilement et les couleurs. Si un bouton de structure contrôle la même action, il doit sauter à la position correspondante de la timeline, sans lancer une autre animation qui entre en conflit avec la progression ; suivez la demande de l'utilisateur s'il spécifie une autre signification de réinitialisation.
• Déterminez d'abord la zone de sécurité du sujet, puis placez le texte ; sur mobile, redimensionnez le sujet et la trajectoire, ne vous contentez pas de réduire proportionnellement la version desktop.
• Titres, descriptions, boutons de sélection et prix doivent être placés dans un HTML accessible ; Canvas gère la représentation visuelle.
• Lors du changement de texture, libérez l'ancienne texture ; lors du nettoyage, supprimez les observateurs, les animations, les événements et les ressources GPU. Limitez le ratio de pixels et évitez de redessiner en continu une scène invisible.
• Pour réduire les effets de mouvement, fournissez une composition statique et des informations produit directement accessibles. En cas d'échec de WebGL, conservez la sélection du produit et le panier.
• Le panier local peut gérer la sélection, l'ajout, la suppression, la persistance. Sans backend, indiquez clairement qu'il s'agit d'une démonstration, sans afficher de commande soumise ou de paiement réussi.

Validation et livraison

Construisez d'abord, puis vérifiez le rendu réel dans le navigateur. Couvrez le début, le milieu, la fin, le retour en arrière, l'écran étroit, la réduction des effets de mouvement et la sélection du produit ; en mode coexistence, testez également le glisser-déposer au milieu, la poursuite du défilement et la réinitialisation. Après avoir changé de cas, vérifiez le texte, la hauteur de la scène et les couleurs. S'il y a un panier, validez la quantité, le total et l'état après rafraîchissement. Vérifiez les anomalies de page, le chargement des ressources et les débordements horizontaux.

Le script scripts/verify-browser.mjs du modèle café est un script de régression optionnel, qui peut pointer vers un module Playwright existant via PLAYWRIGHT_MODULE et BASE_URL vers le service réel. Si l'environnement actuel impose l'utilisation d'un outil de navigateur, utilisez cet outil pour effectuer la même validation interactive, sans lancer un autre pilote de navigateur. Pour la galerie, utilisez l'outil de navigateur pour valider selon les scénarios ci-dessus. Ne signalez que les vérifications réellement effectuées ; des captures d'écran sont toujours nécessaires pour juger de la qualité visuelle ; une construction réussie ou un code HTTP 200 ne remplace pas la validation visuelle.

Après validation, fournissez l'URL de prévisualisation, le répertoire des sources et les captures d'écran clés. Expliquez la voie d'implémentation réelle et les services non encore connectés. N'enregistrez une vidéo ou un écran que si l'utilisateur le demande explicitement ; ne présentez pas des captures d'écran statiques comme une validation interactive ou un enregistrement.

Références techniques à consulter selon les besoins : GSAP ScrollTrigger, Three.js GLTFLoader.