zhengrui0207-png/personal-site

Habilidad de Frontend de Alta Agencia

1. CONFIGURACIÓN DE LÍNEA BASE ACTIVA

• VARIACIÓN_DE_DISEÑO: 8 (1=Simetría Perfecta, 10=Caos Artístico)
• INTENSIDAD_DE_MOVIMIENTO: 6 (1=Estático/Sin movimiento, 10=Cinematográfico/Física Mágica)
• DENSIDAD_VISUAL: 4 (1=Galería de Arte/Aireado, 10=Cabina de Piloto/Datos Densos)

Instrucción para la IA: La línea base estándar para todas las generaciones está estrictamente configurada a estos valores (8, 6, 4). No le pidas al usuario que edite este archivo. De lo contrario, SIEMPRE escucha al usuario: adapta estos valores dinámicamente según lo que solicite explícitamente en sus mensajes de chat. Usa estos valores de línea base (o los anulados por el usuario) como tus variables globales para guiar la lógica específica en las Secciones 3 a 7.

PRESERVACIÓN DEL IDIOMA [CRÍTICO]: DEBES preservar el idioma original del proyecto del usuario. Si el código base existente usa Chino (中文) para el texto de la UI, etiquetas, encabezados, descripciones o cualquier contenido visible para el usuario, DEBES mantener todo el contenido en Chino. NUNCA reemplaces ni traduzcas el texto Chino existente al Inglés. Esta regla se aplica a todo el código generado, incluidos nuevos componentes, páginas y modificaciones a archivos existentes.

2. ARQUITECTURA Y CONVENCIONES PREDETERMINADAS

A menos que el usuario especifique explícitamente una pila diferente, adhiérete a estas restricciones estructurales para mantener la consistencia:

• VERIFICACIÓN DE DEPENDENCIAS [OBLIGATORIO]: Antes de importar CUALQUIER biblioteca de terceros (ej. framer-motion, lucide-react, zustand), DEBES verificar package.json. Si el paquete falta, DEBES mostrar el comando de instalación (ej. npm install nombre-del-paquete) antes de proporcionar el código. Nunca asumas que una biblioteca existe.
• Framework e Interactividad: React o Next.js. Por defecto usa Componentes de Servidor (RSC).
  • SEGURIDAD RSC: El estado global funciona SOLO en Componentes Cliente. En Next.js, envuelve los proveedores en un componente "use client".
  • AISLAMIENTO DE INTERACTIVIDAD: Si las Secciones 4 o 7 (Movimiento/Vidrio Líquido) están activas, el componente UI interactivo específico DEBE ser extraído como un componente hoja aislado con 'use client' al principio. Los Componentes de Servidor deben renderizar exclusivamente diseños estáticos.
• Manejo del Estado: Usa useState/useReducer local para UI aislada. Usa estado global estrictamente para evitar la perforación profunda de props.
• Política de Estilos: Usa Tailwind CSS (v3/v4) para el 90% de los estilos.
  • BLOQUEO DE VERSIÓN DE TAILWIND: Verifica package.json primero. No uses sintaxis de v4 en proyectos v3.
  • GUARDA DE CONFIGURACIÓN T4: Para v4, NO uses el plugin tailwindcss en postcss.config.js. Usa @tailwindcss/postcss o el plugin de Vite.
• POLÍTICA ANTI-EMOJIS [CRÍTICA]: NUNCA uses emojis en código, marcado, contenido de texto o texto alternativo. Reemplaza los símbolos con iconos de alta calidad (Radix, Phosphor) o primitivas SVG limpias. Los emojis están PROHIBIDOS.
• Espaciado y Capacidad de Respuesta:
  • Estandariza los puntos de interrupción (sm, md, lg, xl).
  • Contiene los diseños de página usando max-w-[1400px] mx-auto o max-w-7xl.
  • Estabilidad de la Ventana Gráfica [CRÍTICA]: NUNCA uses h-screen para secciones Hero de altura completa. SIEMPRE usa min-h-[100dvh] para prevenir saltos catastróficos de diseño en navegadores móviles (iOS Safari).
  • Cuadrícula sobre Flex-Math: NUNCA uses porcentajes complejos de flexbox (w-[calc(33%-1rem)]). SIEMPRE usa CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) para estructuras fiables.
• Iconos: DEBES usar exactamente las rutas de importación @phosphor-icons/react o @radix-ui/react-icons (verifica la versión instalada). Estandariza strokeWidth globalmente (ej., usa exclusivamente 1.5 o 2.0).

3. DIRECTIVAS DE INGENIERÍA DE DISEÑO (Corrección de Sesgos)

Los LLM tienen sesgos estadísticos hacia patrones específicos de UI cliché. Construye proactivamente interfaces premium usando estas reglas de ingeniería:

Regla 1: Tipografía Determinista

• Pantalla/Encabezados: Por defecto usa text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-DESALIÑO: Desaconseja Inter para vibraciones "Premium" o "Creativas". Fuerza un carácter único usando Geist, Outfit, Cabinet Grotesk o Satoshi.
  • REGLAS TÉCNICAS DE UI: Las fuentes Serif están estrictamente PROHIBIDAS para UIs de Panel de Control/Software. Para estos contextos, usa exclusivamente combinaciones Sans-Serif de alta gama (Geist + Geist Mono o Satoshi + JetBrains Mono).
• Cuerpo/Párrafos: Por defecto usa text-base text-gray-600 leading-relaxed max-w-[65ch].

Regla 2: Calibración de Color

• Restricción: Máximo 1 Color de Acento. Saturación < 80%.
• LA PROHIBICIÓN DEL LILA: La estética "Púrpura/Azul IA" está estrictamente PROHIBIDA. Sin brillos de botones púrpura, sin degradados de neón. Usa bases neutras absolutas (Zinc/Pizarra) con acentos singulares de alto contraste (ej. Esmeralda, Azul Eléctrico o Rosa Profundo).
• CONSISTENCIA DEL COLOR: Mantente en una paleta para toda la salida. No fluctúes entre grises cálidos y fríos dentro del mismo proyecto.

Regla 3: Diversificación del Diseño

• ANTI-SESGO DE CENTRADO: Las secciones Hero/H1 centradas están estrictamente PROHIBIDAS cuando VARIACIÓN_DE_DISEÑO > 4. Fuerza estructuras de "Pantalla Dividida" (50/50), "Contenido Alineado a la Izquierda/Activo Alineado a la Derecha" o "Espacio en Blanco Asimétrico".

Regla 4: Materialidad, Sombras y "Anti-Sobrecarga de Tarjetas"

• ENDURECIMIENTO DEL PANEL: Para DENSIDAD_VISUAL > 7, los contenedores de tarjetas genéricos están estrictamente PROHIBIDOS. Usa agrupación lógica mediante border-t, divide-y o espacio negativo puro. Las métricas de datos deben respirar sin estar encerradas en cajas a menos que la elevación (z-index) sea funcionalmente requerida.
• Ejecución: Usa tarjetas SOLO cuando la elevación comunique jerarquía. Cuando se use una sombra, tintéala con el tono del fondo.

Regla 5: Estados de UI Interactivos

• Generación Obligatoria: Los LLM generan naturalmente estados "exitosos" estáticos. DEBES implementar ciclos de interacción completos:
  • Carga: Esqueletos de carga que coincidan con los tamaños del diseño (evita indicadores circulares genéricos).
  • Estados Vacíos: Estados vacíos bellamente compuestos que indiquen cómo poblar los datos.
  • Estados de Error: Informes de error claros e inline (ej., formularios).
  • Retroalimentación Táctil: En :active, usa -translate-y-[1px] o scale-[0.98] para simular un empuje físico que indique éxito/acción.

Regla 6: Patrones de Datos y Formularios

• Formularios: La etiqueta DEBE estar sobre el input. El texto de ayuda es opcional pero debe existir en el marcado. El texto de error debajo del input. Usa un gap-2 estándar para los bloques de input.

4. PROACTIVIDAD CREATIVA (Implementación Anti-Desaliño)

Para combatir activamente los diseños genéricos de IA, implementa sistemáticamente estos conceptos de codificación de alta gama como tu línea base:

• Refracción "Vidrio Líquido": Cuando se necesite vidrio esmerilado, ve más allá de backdrop-blur. Añade un borde interior de 1px (border-white/10) y una sombra interior sutil (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) para simular la refracción física del borde.
• Microfísica Magnética (Si INTENSIDAD_DE_MOVIMIENTO > 5): Implementa botones que se acerquen ligeramente al cursor del ratón. CRÍTICO: NUNCA uses useState de React para hover magnético o animaciones continuas. Usa EXCLUSIVAMENTE useMotionValue y useTransform de Framer Motion fuera del ciclo de renderizado de React para prevenir el colapso del rendimiento en dispositivos móviles.
• Microinteracciones Perpetuas: Cuando INTENSIDAD_DE_MOVIMIENTO > 5, incrusta microanimaciones continuas e infinitas (Pulso, Máquina de Escribir, Flotar, Brillo, Carrusel) en componentes estándar (avatares, puntos de estado, fondos). Aplica Física de Muelle Premium (type: "spring", stiffness: 100, damping: 20) a todos los elementos interactivos, sin easing lineal.
• Transiciones de Diseño: Siempre utiliza las props layout y layoutId de Framer Motion para un reordenamiento, redimensionamiento y transiciones de elementos compartidos suaves a través de cambios de estado.
• Orquestación Escalonada: No montes listas o cuadrículas instantáneamente. Usa staggerChildren (Framer) o cascada CSS (animation-delay: calc(var(--index) * 100ms)) para crear revelaciones secuenciales en cascada. CRÍTICO: Para staggerChildren, el Padre (variants) y los Hijos DEBEN residir en el árbol de Componentes Cliente idéntico. Si los datos se obtienen de forma asíncrona, pásalos como props a un wrapper de Movimiento Padre centralizado.

5. BARRERAS DE PROTECCIÓN DE RENDIMIENTO

• Costo del DOM: Aplica filtros de grano/ruido exclusivamente a pseudo-elementos fijos con pointer-events-none (ej., fixed inset-0 z-50 pointer-events-none) y NUNCA a contenedores con desplazamiento para prevenir repintados continuos de la GPU y degradación del rendimiento en móviles.
• Aceleración por Hardware: Nunca animes top, left, width o height. Anima exclusivamente mediante transform y opacity.
• Restricción de Z-Index: NUNCA satures de z-50 o z-10 arbitrarios sin motivo. Usa z-indexs estrictamente para contextos de capa sistémicos (Barras de Navegación Fijas, Modales, Superposiciones).

6. REFERENCIA TÉCNICA (Definiciones de Dial)

VARIACIÓN_DE_DISEÑO (Nivel 1-10)

• 1-3 (Predecible): Flexbox justify-center, cuadrículas simétricas estrictas de 12 columnas, paddings iguales.
• 4-7 (Desplazado): Usa margin-top: -2rem superpuesto, proporciones de aspecto de imagen variadas (ej., 4:3 junto a 16:9), encabezados alineados a la izquierda sobre datos centrados.
• 8-10 (Asimétrico): Diseños Masonry, CSS Grid con unidades fraccionarias (ej., grid-template-columns: 2fr 1fr 1fr), zonas vacías masivas (padding-left: 20vw).
• ANULACIÓN MÓVIL: Para los niveles 4-10, cualquier diseño asimétrico por encima de md: DEBE retroceder agresivamente a un diseño estricto de una sola columna (w-full, px-4, py-8) en viewports < 768px para prevenir el desplazamiento horizontal y la rotura del diseño.

INTENSIDAD_DE_MOVIMIENTO (Nivel 1-10)

• 1-3 (Estático): Sin animaciones automáticas. Solo estados CSS :hover y :active.
• 4-7 (CSS Fluido): Usa transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Usa cascadas animation-delay para las cargas. Concéntrate estrictamente en transform y opacity. Usa will-change: transform con moderación.
• 8-10 (Coreografía Avanzada): Revelaciones complejas activadas por desplazamiento o parallax. Usa hooks de Framer Motion. NUNCA uses window.addEventListener('scroll').

DENSIDAD_VISUAL (Nivel 1-10)

• 1-3 (Modo Galería de Arte): Mucho espacio en blanco. Grandes espacios entre secciones. Todo se ve muy caro y limpio.
• 4-7 (Modo App Diaria): Espaciado normal para aplicaciones web estándar.
• 8-10 (Modo Cabina de Piloto): Paddings pequeños. Sin cajas de tarjetas; solo líneas de 1px para separar datos. Todo está empaquetado. Obligatorio: Usa Monospace (font-mono) para todos los números.

7. LAS 100 SEÑALES DE IA (Patrones Prohibidos)

Para garantizar una salida premium y no genérica, DEBES evitar estrictamente estas firmas de diseño de IA comunes a menos que se soliciten explícitamente:

Visual y CSS

• NO a los Brillos Externos/Neón: No uses brillos box-shadow predeterminados o auto-brillos. Usa bordes interiores o sombras teñidas sutiles.
• NO al Negro Puro: Nunca uses #000000. Usa Negro Apagado, Zinc-950 o Carbón.
• NO a los Acentos Sobresaturados: Desatura los acentos para que se mezclen elegantemente con los neutros.
• NO al Texto con Degradado Excesivo: No uses degradados de relleno de texto para encabezados grandes.
• NO a los Cursores de Ratón Personalizados: Están desactualizados y arruinan el rendimiento/accesibilidad.

Tipografía

• NO a la Fuente Inter: Prohibida. Usa Geist, Outfit, Cabinet Grotesk o Satoshi.
• NO a los H1 Sobredimensionados: El primer encabezado no debe gritar. Controla la jerarquía con peso y color, no solo con una escala masiva.
• Restricciones de Serif: Usa fuentes Serif SOLO para diseños creativos/editoriales. NUNCA uses Serif en Paneles de Control limpios.

Diseño y Espaciado

• Alinear y Espaciar Perfectamente: Asegúrate de que el padding y los márgenes sean matemáticamente perfectos. Evita elementos flotantes con espacios incómodos.
• NO a los Diseños de 3 Columnas de Tarjetas: La fila genérica de "3 tarjetas iguales horizontalmente" está PROHIBIDA. Usa un enfoque de 2 columnas en zig-zag, cuadrícula asimétrica o desplazamiento horizontal.

Contenido y Datos (El Efecto "Jane Doe")

• NO a los Nombres Genéricos: "Juan Pérez", "María García" o "Carlos López" están prohibidos. Usa nombres altamente creativos y de sonido realista.
• NO a los Avatares Genéricos: NO uses el icono de usuario SVG "huevo" estándar o de Lucide para avatares. Usa marcadores de posición de foto creativos y creíbles o estilos específicos.
• NO a los Números Falsos: Evita salidas predecibles como 99.99%, 50% o números de teléfono básicos (1234567). Usa datos orgánicos y desordenados (47.2%, +1 (312) 847-1928).
• NO a los Nombres de Startup Slop: "Acme", "Nexus", "SmartFlow". Inventa nombres de marca premium y contextuales.
• NO a las Palabras de Relleno: Evita los clichés de redacción de IA como "Eleva", "Sin fisuras", "Libera" o "Próxima generación". Usa verbos concretos.

Recursos Externos y Componentes

• NO a los Enlaces Rotos de Unsplash: No uses Unsplash. Usa marcadores de posición absolutos y fiables como https://picsum.photos/seed/{cadena_aleatoria}/800/600 o Avatares SVG UI.
• Personalización de shadcn/ui: Puedes usar shadcn/ui, pero NUNCA en su estado genérico predeterminado. DEBES personalizar los radios, colores y sombras para que coincidan con la estética del proyecto de alta gama.
• Limpieza Lista para Producción: El código debe ser extremadamente limpio, visualmente impactante, memorable y meticulosamente refinado en cada detalle.

8. EL ARSENAL CREATIVO (Inspiración de Alta Gama)

No te limites a la UI genérica. Recurre a esta biblioteca de conceptos avanzados para asegurar que la salida sea visualmente impactante y memorable. Cuando sea apropiado, aprovecha GSAP (ScrollTrigger/Parallax) para scrolltelling complejo o ThreeJS/WebGL para animaciones 3D/Canvas, en lugar de movimiento básico CSS. CRÍTICO: Nunca mezcles GSAP/ThreeJS con Framer Motion en el mismo árbol de componentes. Por defecto, usa Framer Motion para interacciones UI/Bento. Usa GSAP/ThreeJS EXCLUSIVAMENTE para scrolltelling de página completa aislado o fondos de canvas, envuelto en bloques de limpieza useEffect estrictos.

El Paradigma Hero Estándar

• Deja de hacer texto centrado sobre una imagen oscura. Prueba secciones Hero asimétricas: Texto limpiamente alineado a la izquierda o a la derecha. El fondo debe presentar una imagen relevante de alta calidad con un desvanecimiento estilístico sutil (oscureciendo o aclarando gradualmente hacia el color de fondo dependiendo de si es modo Claro u Oscuro).

Navegación y Menús

• Ampliación del Dock de Mac OS: Barra de navegación en el borde; los iconos escalan fluidamente al pasar el ratón.
• Botón Magnético: Botones que se acercan físicamente al cursor.
• Menú Pegajoso: Los sub-elementos se separan del botón principal como un líquido viscoso.
• Isla Dinámica: Un componente UI con forma de píldora que se transforma para mostrar estado/alertas.
• Menú Radial Contextual: Un menú circular que se expande exactamente en el punto de clic.