zhengrui0207-png/personal-site

Compétence Frontend Haute-Agence

1. CONFIGURATION DE BASE ACTIVE

• DESIGN_VARIANCE: 8 (1=Symétrie Parfaite, 10=Chaos Artistique)
• MOTION_INTENSITY: 6 (1=Statique/Aucun mouvement, 10=Cinématique/Physique Magique)
• VISUAL_DENSITY: 4 (1=Galerie d'Art/Aéré, 10=Poste de Pilotage/Données Denses)

Instruction IA : La base de référence standard pour toutes les générations est strictement fixée à ces valeurs (8, 6, 4). Ne demandez pas à l'utilisateur de modifier ce fichier. Sinon, ÉCOUTEZ TOUJOURS l'utilisateur : adaptez ces valeurs dynamiquement en fonction de ce qu'il demande explicitement dans ses prompts. Utilisez ces valeurs de base (ou celles remplacées par l'utilisateur) comme vos variables globales pour piloter la logique spécifique dans les sections 3 à 7.

PRÉSERVATION DE LA LANGUE [CRITIQUE] : Vous DEVEZ préserver la langue originale du projet de l'utilisateur. Si la base de code existante utilise le chinois (中文) pour le texte de l'interface utilisateur, les étiquettes, les titres, les descriptions ou tout contenu destiné à l'utilisateur, vous DEVEZ conserver tout le contenu en chinois. Ne remplacez JAMAIS et ne traduisez JAMAIS le texte chinois existant en anglais. Cette règle s'applique à tout le code généré, y compris les nouveaux composants, pages et modifications des fichiers existants.

2. ARCHITECTURE ET CONVENTIONS PAR DÉFAUT

Sauf si l'utilisateur spécifie explicitement une pile différente, respectez ces contraintes structurelles pour maintenir la cohérence :

• VÉRIFICATION DES DÉPENDANCES [OBLIGATOIRE] : Avant d'importer une bibliothèque tierce (par exemple framer-motion, lucide-react, zustand), vous DEVEZ vérifier package.json. Si le package est manquant, vous DEVEZ afficher la commande d'installation (par exemple npm install nom-du-package) avant de fournir le code. Ne supposez jamais qu'une bibliothèque existe.
• Framework et Interactivité : React ou Next.js. Par défaut, utilisez les composants serveur (RSC).
  • SÉCURITÉ RSC : L'état global fonctionne UNIQUEMENT dans les composants client. Dans Next.js, enveloppez les fournisseurs dans un composant "use client".
  • ISOLATION DE L'INTERACTIVITÉ : Si les sections 4 ou 7 (Mouvement/Verre Liquide) sont actives, le composant UI interactif spécifique DOIT être extrait en tant que composant feuille isolé avec 'use client' tout en haut. Les composants serveur doivent exclusivement rendre des mises en page statiques.
• Gestion d'État : Utilisez useState/useReducer local pour l'UI isolée. Utilisez l'état global uniquement pour éviter le perçage profond d'accessoires.
• Politique de Style : Utilisez Tailwind CSS (v3/v4) pour 90% du style.
  • VERROUILLAGE DE VERSION TAILWIND : Vérifiez d'abord package.json. N'utilisez pas la syntaxe v4 dans les projets v3.
  • GARDE DE CONFIG T4 : Pour la v4, n'utilisez PAS le plugin tailwindcss dans postcss.config.js. Utilisez @tailwindcss/postcss ou le plugin Vite.
• POLITIQUE ANTI-ÉMOJI [CRITIQUE] : N'utilisez JAMAIS d'émojis dans le code, le balisage, le contenu textuel ou le texte alternatif. Remplacez les symboles par des icônes de haute qualité (Radix, Phosphor) ou des primitives SVG propres. Les émojis sont INTERDITS.
• Responsivité et Espacement :
  • Standardisez les points de rupture (sm, md, lg, xl).
  • Contenez les mises en page avec max-w-[1400px] mx-auto ou max-w-7xl.
  • Stabilité du Viewport [CRITIQUE] : N'utilisez JAMAIS h-screen pour les sections Hero pleine hauteur. Utilisez TOUJOURS min-h-[100dvh] pour éviter les sauts de mise en page catastrophiques sur les navigateurs mobiles (iOS Safari).
  • Grille plutôt que Flex-Math : N'utilisez JAMAIS de pourcentages complexes de boîte flexible (w-[calc(33%-1rem)]). Utilisez TOUJOURS la grille CSS (grid grid-cols-1 md:grid-cols-3 gap-6) pour des structures fiables.
• Icônes : Vous DEVEZ utiliser exactement les chemins d'importation @phosphor-icons/react ou @radix-ui/react-icons (vérifiez la version installée). Standardisez strokeWidth globalement (par exemple, utilisez exclusivement 1.5 ou 2.0).

3. DIRECTIVES D'INGÉNIERIE DE DESIGN (Correction de Biais)

Les LLM ont des biais statistiques envers des motifs d'interface utilisateur clichés spécifiques. Construisez de manière proactive des interfaces premium en utilisant ces règles conçues :

Règle 1 : Typographie Déterministe

• Affichage/Titres : Par défaut, utilisez text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-SLOP : Découragez Inter pour les ambiances "Premium" ou "Créative". Forcez un caractère unique en utilisant Geist, Outfit, Cabinet Grotesk ou Satoshi.
  • RÈGLE UI TECHNIQUE : Les polices Serif sont strictement INTERDITES pour les tableaux de bord/interfaces logicielles. Pour ces contextes, utilisez exclusivement des paires Sans-Serif haut de gamme (Geist + Geist Mono ou Satoshi + JetBrains Mono).
• Corps/Paragraphes : Par défaut, utilisez text-base text-gray-600 leading-relaxed max-w-[65ch].

Règle 2 : Calibrage des Couleurs

• Contrainte : Maximum 1 Couleur d'Accent. Saturation < 80%.
• L'INTERDICTION LILA : L'esthétique "Violet/Bleu IA" est strictement INTERDITE. Pas de lueurs violettes sur les boutons, pas de dégradés néon. Utilisez des bases neutres absolues (Zinc/Slate) avec des accents uniques à contraste élevé (par exemple, Émeraude, Bleu Électrique ou Rose Profond).
• COHÉRENCE DES COULEURS : Tenez-vous à une seule palette pour l'ensemble de la sortie. Ne fluctuez pas entre les gris chauds et froids dans le même projet.

Règle 3 : Diversification de la Mise en Page

• ANTI-BIAIS CENTRÉ : Les sections Hero/H1 centrées sont strictement INTERDITES lorsque LAYOUT_VARIANCE > 4. Forcez les structures "Écran Partagé" (50/50), "Contenu aligné à gauche/Actif aligné à droite" ou "Espace blanc asymétrique".

Règle 4 : Matérialité, Ombres et "Anti-Surabondance de Cartes"

• RENFORCEMENT DU TABLEAU DE BORD : Pour VISUAL_DENSITY > 7, les conteneurs de cartes génériques sont strictement INTERDITS. Utilisez le regroupement logique via border-t, divide-y ou un espace négatif pur. Les métriques de données doivent respirer sans être enfermées, sauf si l'élévation (z-index) est fonctionnellement requise.
• Exécution : Utilisez les cartes UNIQUEMENT lorsque l'élévation communique une hiérarchie. Lorsqu'une ombre est utilisée, teintez-la de la teinte de fond.

Règle 5 : États d'Interface Interactive

• Génération Obligatoire : Les LLM génèrent naturellement des états de réussite "statiques". Vous DEVEZ implémenter des cycles d'interaction complets :
  • Chargement : Squelettes de chargement correspondant aux tailles de mise en page (évitez les spinners circulaires génériques).
  • États Vides : États vides joliment composés indiquant comment remplir les données.
  • États d'Erreur : Rapports d'erreur clairs et en ligne (par exemple, formulaires).
  • Retour Tactile : Sur :active, utilisez -translate-y-[1px] ou scale-[0.98] pour simuler une poussée physique indiquant le succès/l'action.

Règle 6 : Modèles de Données et de Formulaires

• Formulaires : L'étiquette DOIT se trouver au-dessus de l'entrée. Le texte d'aide est facultatif mais doit exister dans le balisage. Texte d'erreur en dessous de l'entrée. Utilisez un gap-2 standard pour les blocs d'entrée.

4. PROACTIVITÉ CRÉATIVE (Implémentation Anti-Slop)

Pour combattre activement les conceptions d'IA génériques, implémentez systématiquement ces concepts de codage haut de gamme comme votre base de référence :

• Réfraction "Verre Liquide" : Lorsque le vitromorphisme est nécessaire, allez au-delà de backdrop-blur. Ajoutez une bordure intérieure de 1px (border-white/10) et une ombre intérieure subtile (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) pour simuler la réfraction des bords physiques.
• Micro-Physique Magnétique (Si MOTION_INTENSITY > 5) : Implémentez des boutons qui tirent légèrement vers le curseur de la souris. CRITIQUE : N'utilisez JAMAIS React useState pour le survol magnétique ou les animations continues. Utilisez EXCLUSIVEMENT useMotionValue et useTransform de Framer Motion en dehors du cycle de rendu React pour éviter l'effondrement des performances sur mobile.
• Micro-Interactions Perpétuelles : Lorsque MOTION_INTENSITY > 5, intégrez des micro-animations continues et infinies (Impulsion, Machine à écrire, Flottement, Scintillement, Carrousel) dans les composants standards (avatars, points de statut, arrière-plans). Appliquez une Physique de Ressort premium (type: "spring", stiffness: 100, damping: 20) à tous les éléments interactifs—pas d'assouplissement linéaire.
• Transitions de Mise en Page : Utilisez toujours les props layout et layoutId de Framer Motion pour un réordonnancement, un redimensionnement et des transitions d'éléments partagés fluides lors des changements d'état.
• Orchestration Échelonnée : Ne montez pas les listes ou les grilles instantanément. Utilisez staggerChildren (Framer) ou la cascade CSS (animation-delay: calc(var(--index) * 100ms)) pour créer des révélations séquentielles en cascade. CRITIQUE : Pour staggerChildren, le Parent (variants) et les Enfants DOIVENT résider dans l'arborescence de composants Client identique. Si les données sont récupérées de manière asynchrone, transmettez les données en tant qu'accessoires à un wrapper Parent Motion centralisé.

5. GARDE-FOUS DE PERFORMANCE

• Coût DOM : Appliquez les filtres de grain/bruit exclusivement aux pseudo-éléments fixes, sans pointeur-événement (par exemple, fixed inset-0 z-50 pointer-events-none) et JAMAIS aux conteneurs défilants pour éviter les repeints GPU continus et la dégradation des performances mobiles.
• Accélération Matérielle : N'animez jamais top, left, width ou height. Animez exclusivement via transform et opacity.
• Retenue Z-Index : Ne spammez JAMAIS arbitrairement z-50 ou z-10 sans raison. Utilisez les z-index strictement pour les contextes de couches systémiques (Barres de navigation collantes, Modales, Superpositions).

6. RÉFÉRENCE TECHNIQUE (Définitions des Cadrans)

DESIGN_VARIANCE (Niveau 1-10)

• 1-3 (Prévisible) : Flexbox justify-center, grilles symétriques strictes à 12 colonnes, espacements égaux.
• 4-7 (Décalé) : Utilisez margin-top: -2rem pour chevaucher, ratios d'aspect d'image variés (par exemple, 4:3 à côté de 16:9), en-têtes alignés à gauche sur des données centrées.
• 8-10 (Asymétrique) : Mises en page en maçonnerie, grille CSS avec unités fractionnaires (par exemple, grid-template-columns: 2fr 1fr 1fr), zones vides massives (padding-left: 20vw).
• SURCHARGE MOBILE : Pour les niveaux 4-10, toute disposition asymétrique au-dessus de md: DOIT revenir agressivement à une disposition stricte à une seule colonne (w-full, px-4, py-8) sur les viewports < 768px pour éviter le défilement horizontal et la rupture de mise en page.

MOTION_INTENSITY (Niveau 1-10)

• 1-3 (Statique) : Aucune animation automatique. États CSS :hover et :active uniquement.
• 4-7 (CSS Fluide) : Utilisez transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Utilisez des cascades animation-delay pour les chargements. Concentrez-vous strictement sur transform et opacity. Utilisez will-change: transform avec parcimonie.
• 8-10 (Chorégraphie Avancée) : Dévoilements complexes déclenchés par le défilement ou parallaxe. Utilisez les hooks Framer Motion. N'utilisez JAMAIS window.addEventListener('scroll').

VISUAL_DENSITY (Niveau 1-10)

• 1-3 (Mode Galerie d'Art) : Beaucoup d'espace blanc. Énormes écarts entre les sections. Tout semble très cher et propre.
• 4-7 (Mode Application Quotidienne) : Espacement normal pour les applications web standard.
• 8-10 (Mode Poste de Pilotage) : Petits espacements. Pas de boîtes de cartes ; juste des lignes de 1px pour séparer les données. Tout est dense. Obligatoire : Utilisez Monospace (font-mono) pour tous les nombres.

7. LES 100 INDICES IA (Motifs Interdits)

Pour garantir un résultat premium et non générique, vous DEVEZ éviter strictement ces signatures de conception IA courantes, sauf demande explicite :

Visuel et CSS

• PAS de Lueurs Néons/Externes : N'utilisez pas les lueurs box-shadow par défaut ou les auto-lueurs. Utilisez des bordures intérieures ou des ombres teintées subtiles.
• PAS de Noir Pur : N'utilisez jamais #000000. Utilisez du Noir Cassé, Zinc-950 ou Charbon.
• PAS d'Accents Tropic Saturation : Désaturez les accents pour qu'ils se mélangent élégamment aux neutres.
• PAS de Texte à Dégradé Excessif : N'utilisez pas de dégradés de remplissage de texte pour les grands en-têtes.
• PAS de Curseurs de Souris Personnalisés : Ils sont obsolètes et ruinent les performances/l'accessibilité.

Typographie

• PAS de Police Inter : Interdite. Utilisez Geist, Outfit, Cabinet Grotesk ou Satoshi.
• PAS de H1 Surdimensionnés : Le premier titre ne doit pas crier. Contrôlez la hiérarchie avec le poids et la couleur, pas seulement avec une échelle massive.
• Contraintes Serif : Utilisez les polices Serif UNIQUEMENT pour les conceptions créatives/éditoriales. NE JAMAIS utiliser Serif sur des tableaux de bord propres.

Mise en Page et Espacement

• Alignez et Espacez Parfaitement : Assurez-vous que le remplissage et les marges sont mathématiquement parfaits. Évitez les éléments flottants avec des écarts gênants.
• PAS de Disposition à 3 Colonnes de Cartes : La rangée de fonctionnalités générique "3 cartes égales horizontalement" est INTERDITE. Utilisez plutôt une approche en zigzag à 2 colonnes, une grille asymétrique ou un défilement horizontal.

Contenu et Données (L'Effet "Jane Doe")

• PAS de Noms Génériques : "John Doe", "Sarah Chan" ou "Jack Su" sont interdits. Utilisez des noms très créatifs et réalistes.
• PAS d'Avatars Génériques : N'utilisez PAS les icônes SVG standard "œuf" ou Lucide pour les avatars. Utilisez des espaces réservés de photos créatifs et crédibles ou un style spécifique.
• PAS de Faux Nombres : Évitez les résultats prévisibles comme 99.99%, 50% ou les numéros de téléphone basiques (1234567). Utilisez des données organiques et désordonnées (47.2%, +1 (312) 847-1928).
• PAS de Noms de Startup Slop : "Acme", "Nexus", "SmartFlow". Inventez des noms de marque premium et contextuels.
• PAS de Mots de Remplissage : Évitez les clichés de rédaction IA comme "Élevez", "Sans couture", "Libérez" ou "Nouvelle Génération". Utilisez des verbes concrets.

Ressources Externes et Composants

• PAS de Liens Unsplash Cassés : N'utilisez pas Unsplash. Utilisez des espaces réservés absolus et fiables comme https://picsum.photos/seed/{random_string}/800/600 ou des avatars SVG d'interface.
• Personnalisation shadcn/ui : Vous pouvez utiliser shadcn/ui, mais JAMAIS dans son état générique par défaut. Vous DEVEZ personnaliser les rayons, les couleurs et les ombres pour correspondre à l'esthétique haut de gamme du projet.
• Propreté Prête pour la Production : Le code doit être extrêmement propre, visuellement frappant, mémorable et méticuleusement raffiné dans chaque détail.

8. L'ARSENAL CRÉATIF (Inspiration Haut de Gamme)

Ne vous rabattez pas sur une interface générique. Inspirez-vous de cette bibliothèque de concepts avancés pour garantir que la production soit visuellement frappante et mémorable. Le cas échéant, utilisez GSAP (ScrollTrigger/Parallax) pour le scrolltelling complexe ou ThreeJS/WebGL pour les animations 3D/Canvas, plutôt que le mouvement CSS de base. CRITIQUE : Ne mélangez jamais GSAP/ThreeJS avec Framer Motion dans la même arborescence de composants. Par défaut, utilisez Framer Motion pour les interactions UI/Bento. Utilisez GSAP/ThreeJS EXCLUSIVEMENT pour le scrolltelling de page entière isolé ou les arrière-plans canvas, enveloppés dans des blocs de nettoyage useEffect stricts.

Le Paradigme Standard du Héros

• Arrêtez de faire du texte centré sur une image sombre. Essayez les sections Héros asymétriques : Texte proprement aligné à gauche ou à droite. L'arrière-plan doit comporter une image pertinente de haute qualité avec une atténuation stylistique subtile (assombrissement ou éclaircissement gracieux dans la couleur de fond selon qu'il s'agit du mode Clair ou Sombre).

Navigation et Menus

• Agrandissement du Dock Mac OS : Barre de navigation au bord ; les icônes s'agrandissent fluidement au survol.
• Bouton Magnétique : Boutons qui tirent physiquement vers le curseur.
• Menu Visqueux : Les sous-éléments se détachent du bouton principal comme un liquide visqueux.
• Île Dynamique : Un composant d'interface en forme de pilule qui se transforme pour afficher l'état/les alertes.
• Menu Radial Contextuel : Un menu circulaire s'étendant exactement au clic

…

[tronqué pour la traduction]