xuetong932-hub/Tech-website-skill

Site vitrine de marque technologique

Transformez le positionnement d'une marque en un site tech directement consultable, visant un niveau de finition Awwwards. Livrez un fichier index.html complet incluant tous les styles, interactions et la logique responsive, sans pseudocode ni parties manquantes. L'objectif de qualité n'équivaut pas à une récompense ou à un soutien de marque.

Utilisation et résultat

• Lisez le nom de la marque, le produit, le public, la langue, les ressources, les objectifs CTA et le code existant donnés par l'utilisateur. Les nouvelles demandes de l'utilisateur priment sur les valeurs par défaut de ce skill.
• Si les informations sont insuffisantes, utilisez une marque de démonstration claire et un contenu cohérent pour remplir la page ; n'inventez pas de vrais clients, certifications, performances ou récompenses. Les données d'exemple doivent être identifiables comme des valeurs de démonstration.
• Par défaut, le texte est en chinois (locale à adapter : français). Déterminez d'abord une narration de marque principale et un axe visuel, puis fusionnez les caractéristiques de design suivantes, sans mélanger mécaniquement les logos et la typographie de plusieurs marques.
• Lors de la génération, enregistrez index.html dans le répertoire de sortie accessible en écriture. Si l'utilisateur demande directement le code, répondez avec un bloc de code HTML complet ; si l'utilisateur demande un fichier, livrez un lien vers le fichier. Ne confondez pas la génération du skill lui-même avec une demande de génération de site d'exemple.
• Il s'agit d'un processus de création HTML local. Exécutez des actions externes de déploiement, d'hébergement ou de publication uniquement si l'utilisateur le demande.

Système visuel

Utilisez une grille de base de 8px, et gérez les couleurs d'arrière-plan, de texte, de bordure, d'accentuation, les espacements, les coins arrondis et les paramètres d'animation via des variables CSS. Adaptez automatiquement les modes clair/foncé via prefers-color-scheme, chaque mode ayant une hiérarchie complète et une lisibilité suffisante.

Fusionnez les quatre ADN de design suivants, en attribuant une importance relative selon le contenu :

• Apple : Beaucoup d'espace blanc et de focus centré ; blanc #FFFFFF, noir #000000, texte #1D1D1F, bleu #0066CC. Police sans serif Inter ou système, avec graisses 300–600, grands titres et texte fin en hiérarchie. Navigation en verre dépoli, ombres légères, pression scale(0.98) ; révélations progressives avec cubic-bezier(0.25, 0.1, 0.25, 1), 400–600ms.
• Google : Grille Bento modulaire et regroupement d'informations clair. Bleu #4285F4 pour les accents secondaires ; rouge #EA4335, jaune #FBBC05, vert #34A853 réservés à de rares diagrammes ou détails d'état. Parallaxe naturelle et animations déclenchées par le viewport, laissant une respiration suffisante.
• Microsoft : Sections techniques sombres, matrices ou grilles numériques à faible opacité, lumières bleu-violet. Coins arrondis 6–12px pour les cartes, bordures nettes, dégradés subtils sur les bords et halo extérieur au survol ; profondeur exprimée par des couches et des ombres directionnelles.
• 影视飓风 (Tim) : Hero narratif plein écran, titres superposés, apparition ligne par ligne comme des sous-titres, transitions de sections en long défilement. Couleurs froides et halo bleu-vert, particules, lignes de balayage et graphiques de données au service de la narration ; visuel net, transparent, sans décoration excessive.

Les zones claires et les zones techniques sombres peuvent alterner, mais la typographie, l'espacement et les composants doivent rester cohérents. Les accents de couleur sont discrets : évitez que toutes les cartes utilisent simultanément des couleurs saturées différentes.

Architecture de page par défaut

1. Navigation : Fixe en haut, fond en verre dépoli, devient légèrement plus serrée et plus opaque au défilement ; effet de soulignement au survol ou déploiement fluide. Menu hamburger mobile entièrement fonctionnel.
2. Hero : Au moins une hauteur de viewport, visuel cinématographique, la navigation ne masque ni le titre ni le CTA. Titre d'environ 64px sur desktop, 48px sur mobile, utilisant clamp() pour s'adapter aux écrans étroits ; sous-titre d'environ 1.5rem. Deux CTA (principal et secondaire), dégradé peu saturé, particules ou fond de grille ; contenu qui entre en retard selon un ordre logique. S'il n'y a pas de vidéo appropriée, utilisez un visuel produit CSS/SVG soigné ; ne dépendez pas trop d'une vidéo externe.
3. Points forts : En desktop, grille Bento sur 12 colonnes, utilisant des combinaisons 7:5, 6:6, etc. pour créer un rythme asymétrique, sans diviser toutes les cartes en parts égales. Au survol, les cartes s'élèvent, s'agrandissent légèrement et s'illuminent sur les bords, avec une légère inclinaison au pointeur.
4. Narration du contenu : Alternance image-texte à gauche, à droite, à gauche, avec une progression claire entre les sections. Sur mobile, ordre de lecture naturel unifié. Apparition douce à l'entrée dans le viewport, les éléments internes peuvent flotter légèrement vers le haut de 12px, léger parallaxe en arrière-plan.
5. Données et technique : Grilles, incréments numériques, barres de progression et graphiques techniques ; les données démarrent une fois dans le viewport et affichent correctement les valeurs finales et unités à la fin.
6. Pied de page : En desktop, simple 4 colonnes ; en mobile, empilement naturel, légère inclinaison au survol des liens, copyright et informations de marque complets en bas.

Animations et interactions

• L'interaction standard suit cubic-bezier(0.4, 0, 0.2, 1) avec une durée d'environ 400ms. La transition all globale du prompt original doit être implémentée en listant explicitement les propriétés transform, opacity, box-shadow, border-color, etc., afin d'éviter des animations involontaires sur la largeur, la hauteur ou la disposition.
• L'apparition standard au défilement est opacity: 0 → 1, translateY(24px) → 0, avec un stagger de 150ms pour les groupes. Utilisez IntersectionObserver pour déclencher selon le besoin ; si l'utilisateur ne peut pas exécuter JS ou si le CDN échoue, le contenu doit encore être visible.
• Au survol des boutons : décalage de 2px vers le haut, ombre renforcée ; au clic : réduction à 0.98. Les cartes peuvent s'agrandir jusqu'à 1.02, sans rogner ni couvrir le contenu voisin. Le soulignement des liens se déploie depuis le centre.
• L'arrière-plan du Hero suit légèrement le pointeur ; les cartes offrent une surbrillance près du curseur et une inclinaison limitée ; les boutons peuvent avoir une ondulation au clic. Utilisez des couches de transformation indépendantes ou des variables CSS pour éviter que l'apparition, le survol, l'inclinaison et le parallaxe ne se superposent sur transform.
• Fusionnez les mises à jour du pointeur et du défilement via requestAnimationFrame ; réinitialisez lorsque le pointeur quitte. Les particules utilisent un Canvas basse densité ou du CSS ; mettez en pause quand la page est invisible ou que le canvas est hors écran. Évitez les lectures répétées de la disposition et la création en boucle de DOM.
• Activez l'inclinaison, la poursuite lumineuse et le suivi d'arrière-plan uniquement quand hover: hover et pointer: fine sont vrais. Sur mobile, réduisez les coûts des particules, du parallaxe et du flou, tout en conservant le contenu principal et les CTA.
• Quand prefers-reduced-motion: reduce est actif, désactivez particules, parallaxe, suivi, inclinaison, ondulations et animations de déplacement ; affichez immédiatement le contenu complet, les valeurs finales et les progressions. Gérez cela à la fois lors de l'initialisation du JS et lors des changements de préférence.

Contraintes techniques

• Fichier HTML5 unique, utilisant les éléments sémantiques header, nav, main, section, footer. Tailwind CSS v3 via un CDN vérifié et dont la version est clairement indiquée ; ne mélangez pas de configuration v4.
• Styles et logique en ligne, avec des commentaires de section par structure du document, styles de thème, composants, responsive, accessibilité, logique d'interaction ; expliquez clairement les états d'animation, les observateurs et la logique de dégradation, sans répéter mot à mot la signification du code.
• Privilégiez le JS natif ; n'ajoutez une dépendance Anime.js légère qu'en cas de besoin réel, et vérifiez l'API officielle et le mode de chargement de la version choisie. Ne mélangez pas l'appel anime() de la v3 avec l'API animate() de la v4. N'ajoutez pas GSAP, jQuery ou d'autres frameworks pour des animations optionnelles.
• Mobile-first : Par défaut, couvrez les écrans <640px ; à partir de 640px, ajustez selon le contenu ; 768px pour les tablettes ; 1024px et plus pour desktop. Vérifiez les écrans étroits de 320px, le contenu horizontal et les longs titres, sans défilement horizontal.
• Utilisez des unités de viewport adaptées aux navigateurs mobiles, comme 100svh ; une navigation fixe avec un espacement en haut du contenu, scroll-margin-top pour les ancres, et un lien pour sauter la navigation.
• Priorisez les ressources au-dessus de la ligne de flottaison : l'image principale du Hero n'est pas lazy-loadée ; les images en dessous sont lazy-loadées avec des dimensions ou un ratio explicites. Les images ont un alt, les éléments décoratifs ont aria-hidden. Les solutions CDN nécessitent une connexion réseau ; ne prétendez pas être entièrement hors ligne ; conservez du CSS inline de base pour réduire l'impact des pannes de ressources externes.
• Utilisez de vrais boutons et liens pour les interactions. Les boutons de menu ont un nom, aria-expanded et aria-controls ; prenez en charge la touche Échap, un focus logique après ouverture, et le retour du focus après fermeture. Fournissez un :focus-visible clair ; le menu masqué ne doit pas être accessible au clavier.
• Le rapport de contraste du texte principal et des éléments d'interface clés doit être d'au moins 4.5:1. N'utilisez pas un bleu technologique clair pour du texte à faible contraste. Tous les CTA ont une destination valide ou une interaction locale complète ; pas de href="#" vide, de téléchargement invalide ou de simple popup d'attente.

Contrôle de livraison

Ouvrez le fichier généré dans un navigateur disponible et vérifiez sur écran étroit, tablette, desktop, ainsi qu'en mode clair/foncé, avec réduction des animations, navigation au clavier, ancres, CTA, valeurs de fin et erreurs console. Si aucun navigateur n'est disponible, effectuez une vérification statique et expliquez honnêtement le périmètre de validation ; ne prétendez pas avoir effectué une vérification réelle.

Vérifiez que le contenu au-dessus de la ligne de flottaison est lisible sans attendre les animations ou les CDN, que les cartes ne débordent pas, que les titres ne sont pas masqués, que les ressources d'images sont disponibles, que les animations ne se disputent pas les propriétés de transformation, et qu'aucun contenu n'est caché une fois les animations désactivées. Corrigez les problèmes puis livrez le fichier complet, sans omettre d'implémentation avec des mentions comme "le reste similaire" ou des commentaires à faire.