hhse/threeui-3d-pages

ThreeUI Pages 3D

Utilisez ThreeUI comme une source visuelle organisée, et non comme une collection de prompts à coller aveuglément. L'objectif est une interface cohérente et prête pour la production, dont l'effet héros, la typographie, l'espacement, le mouvement et le contenu renforcent une seule direction artistique.

Flux de travail

1. Établissez le brief de conception à partir de la demande de l'utilisateur : produit, public, ambiance souhaitée, contenu principal et éventuelles contraintes de marque. N'inventez pas de revendications produit et ne remplacez pas le contenu fourni par un contenu de démonstration.

2. Recherchez dans le catalogue fourni :

   node scripts/threeui.mjs search "bouton de lancement métal liquide"
   node scripts/threeui.mjs search "奢侈品香水 落地页 烟雾"
   

3. Sélectionnez deux ou trois candidats compatibles, puis inspectez le plus pertinent :

   node scripts/threeui.mjs show <item-id>
   node scripts/threeui.mjs guide <item-id>
   

4. Choisissez un effet ancre. Ajoutez au maximum un élément ThreeUI de support, et uniquement s'il sert une hiérarchie ou un rôle d'interaction distinct. N'empilez pas de shaders non liés simplement pour donner l'impression que la page est plus chargée.

5. Lisez references/integration.md avant de modifier le code de l'application. Il contient les règles relatives aux sources, aux ressources, à la composition, aux performances et à la vérification.

Règles de décision

• Faites correspondre l'effet au contenu. Une page produit calme ne doit pas recevoir automatiquement un champ de particules énergétique, et un tableau de bord ne doit pas utiliser un shader cinématographique plein écran comme surface principale.
• Préférez une page complète ou un héros des catégories Landing Pages et Hero lorsqu'il s'agit d'un nouveau site. Préférez un composant d'arrière-plan lorsqu'une UI existante a besoin de profondeur, et un bouton ou élément d'UI lorsque la portée demandée est plus petite.
• Utilisez les métadonnées runtime, interaction, asset et variants du catalogue pour rejeter les candidats qui entrent en conflit avec la stack cible ou les performances attendues.
• Considérez l'effet d'image et de mouvement comme une couche de la conception. La mise en page environnante, l'échelle typographique, les espaces blancs, le contraste et les appels à l'action déterminent toujours si le résultat semble abouti.
• Si le catalogue ne contient aucun composant Community approprié, indiquez-le clairement et construisez la solution la plus proche à partir de la stack existante du projet. Ne prétendez pas avoir utilisé un actif ThreeUI Pro ou indisponible.

Règles relatives aux sources

• La source Community est sous licence MIT. Conservez les mentions d'attribution et les avis de licence inclus ; voir references/THIRD_PARTY_NOTICES.md. Ne redistribuez pas les vignettes ou aperçus ThreeUI distants.
• Préférez le package npm @designcodeio/threeui et ses noms d'import documentés. Ne copiez pas un catalogue de modèles entier dans le projet cible.
• Si un guide d'implémentation existe, suivez-le avant d'improviser. Le guide identifie les fichiers source canoniques, les ressources, les versions d'exécution et le comportement.
• Ne remplacez jamais un shader, une géométrie ou une ressource créé par un auteur par une approximation visuelle grossière lorsque la source exacte est disponible.
• Utilisez le MCP Pro ou l'interface en ligne de commande uniquement lorsque l'utilisateur dispose de son propre accès autorisé. Ne demandez, ne stockez et n'intégrez jamais d'identifiants dans le projet généré.

Barre de complétion

Avant de terminer, exécutez les commandes de build, de test et de lint du projet cible qui existent. Inspectez les rendus desktop et mobile, la sortie de la console du navigateur, le comportement avec mouvement réduit et le chemin de repli WebGL le cas échéant. Signalez les vérifications exactes effectuées et toute validation qui n'a pas pu être réalisée.