zhengrui0207-png/personal-site

Skill de Frontend de Alta Agência

1. CONFIGURAÇÃO DE LINHA DE BASE ATIVA

• DESIGN_VARIANCE: 8 (1=Simetria Perfeita, 10=Caos Artístico)
• MOTION_INTENSITY: 6 (1=Estático/Sem movimento, 10=Cinematográfico/Física Mágica)
• VISUAL_DENSITY: 4 (1=Galeria de Arte/Airys, 10=Cabine do Piloto/Dados Compactos)

Instrução para IA: A linha de base padrão para todas as gerações é estritamente definida para esses valores (8, 6, 4). Não peça ao usuário para editar este arquivo. Caso contrário, SEMPRE ouça o usuário: adapte esses valores dinamicamente com base no que ele solicitar explicitamente em seus prompts de bate-papo. Use esses valores de linha de base (ou substituídos pelo usuário) como suas variáveis globais para direcionar a lógica específica nas Seções 3 a 7.

PRESERVAÇÃO DE IDIOMA [CRÍTICO]: Você DEVE preservar o idioma original do projeto do usuário. Se o código existente usar Chinês (中文) para texto de UI, rótulos, títulos, descrições ou qualquer conteúdo voltado ao usuário, você DEVE manter todo o conteúdo em Chinês. NUNCA substitua ou traduza texto Chinês existente para Inglês. Esta regra se aplica a todo o código gerado, incluindo novos componentes, páginas e modificações em arquivos existentes.

2. ARQUITETURA E CONVENÇÕES PADRÃO

A menos que o usuário especifique explicitamente uma pilha diferente, siga estas restrições estruturais para manter a consistência:

• VERIFICAÇÃO DE DEPENDÊNCIA [OBRIGATÓRIA]: Antes de importar QUALQUER biblioteca de terceiros (por exemplo, framer-motion, lucide-react, zustand), você DEVE verificar package.json. Se o pacote estiver faltando, você DEVE gerar o comando de instalação (por exemplo, npm install nome-do-pacote) antes de fornecer o código. Nunca presuma que uma biblioteca existe.
• Framework e Interatividade: React ou Next.js. Padrão para Componentes de Servidor (RSC).
  • SEGURANÇA RSC: Estado global funciona APENAS em Componentes Cliente. No Next.js, envolva provedores em um componente "use client".
  • ISOLAMENTO DE INTERATIVIDADE: Se as Seções 4 ou 7 (Movimento/Vidro Líquido) estiverem ativas, o componente de UI interativo específico DEVE ser extraído como um componente folha isolado com 'use client' no topo. Componentes de Servidor devem renderizar exclusivamente layouts estáticos.
• Gerenciamento de Estado: Use useState/useReducer local para UI isolada. Use estado global estritamente para evitar prop-drilling profundo.
• Política de Estilização: Use Tailwind CSS (v3/v4) para 90% da estilização.
  • BLOQUEIO DE VERSÃO TAILWIND: Verifique package.json primeiro. Não use sintaxe v4 em projetos v3.
  • GUARDA DE CONFIG T4: Para v4, NÃO use o plugin tailwindcss em postcss.config.js. Use @tailwindcss/postcss ou o plugin Vite.
• POLÍTICA ANTI-EMOJI [CRÍTICO]: NUNCA use emojis em código, marcação, conteúdo de texto ou texto alternativo. Substitua símbolos por ícones de alta qualidade (Radix, Phosphor) ou primitivos SVG limpos. Emojis são PROIBIDOS.
• Responsividade e Espaçamento:
  • Padronize breakpoints (sm, md, lg, xl).
  • Centralize layouts de página usando max-w-[1400px] mx-auto ou max-w-7xl.
  • Estabilidade da Viewport [CRÍTICO]: NUNCA use h-screen para seções Hero de altura total. SEMPRE use min-h-[100dvh] para evitar saltos de layout catastróficos em navegadores móveis (iOS Safari).
  • Grid em vez de Flex-Math: NUNCA use matemática de porcentagem complexa com flexbox (w-[calc(33%-1rem)]). SEMPRE use CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) para estruturas confiáveis.
• Ícones: Você DEVE usar exatamente os caminhos de importação @phosphor-icons/react ou @radix-ui/react-icons (verifique a versão instalada). Padronize strokeWidth globalmente (por exemplo, use exclusivamente 1.5 ou 2.0).

3. DIRETIVAS DE ENGENHARIA DE DESIGN (Correção de Viés)

LLMs têm vieses estatísticos em direção a padrões específicos de UI clichê. Construa proativamente interfaces premium usando estas regras de engenharia:

Regra 1: Tipografia Determinística

• Exibição/Títulos: Padrão para text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-FALTA DE ESFORÇO: Desencoraje Inter para vibes "Premium" ou "Criativas". Force caracteres únicos usando Geist, Outfit, Cabinet Grotesk ou Satoshi.
  • REGRA DE UI TÉCNICA: Fontes Serif são estritamente PROIBIDAS para UIs de Dashboard/Software. Para esses contextos, use exclusivamente pares Sans-Serif de alto padrão (Geist + Geist Mono ou Satoshi + JetBrains Mono).
• Corpo/Parágrafos: Padrão para text-base text-gray-600 leading-relaxed max-w-[65ch].

Regra 2: Calibração de Cor

• Restrição: Máx. 1 Cor de Destaque. Saturação < 80%.
• O BANIMENTO LILÁS: A estética "Roxo/Azul de IA" é estritamente PROIBIDA. Sem brilhos de botão roxos, sem gradientes neon. Use bases neutras absolutas (Zinc/Slate) com destaques únicos de alto contraste (por exemplo, Emerald, Electric Blue ou Deep Rose).
• CONSISTÊNCIA DE COR: Mantenha-se em uma paleta para toda a saída. Não fluctue entre tons de cinza quentes e frios no mesmo projeto.

Regra 3: Diversificação de Layout

• VIÉS ANTI-CENTRO: Seções Hero/H1 centralizadas são estritamente PROIBIDAS quando LAYOUT_VARIANCE > 4. Force estruturas "Tela Dividida" (50/50), "Conteúdo Alinhado à Esquerda/Ativo Alinhado à Direita" ou "Espaço em Branco Assimétrico".

Regra 4: Materialidade, Sombras e "Anti-Uso Excessivo de Cartões"

• ENDURECIMENTO DE DASHBOARD: Para VISUAL_DENSITY > 7, contêineres de cartão genéricos são estritamente PROIBIDOS. Use agrupamento lógico via border-t, divide-y ou espaço negativo puro. As métricas de dados devem respirar sem serem engaioladas, a menos que a elevação (z-index) seja funcionalmente necessária.
• Execução: Use cartões APENAS quando a elevação comunicar hierarquia. Quando uma sombra for usada, tingi-a com o matiz de fundo.

Regra 5: Estados de UI Interativos

• Geração Obrigatória: LLMs naturalmente geram estados de sucesso "estáticos". Você DEVE implementar ciclos de interação completos:
  • Carregamento: Skeleton loaders correspondendo aos tamanhos do layout (evite spinners circulares genéricos).
  • Estados Vazios: Estados vazios lindamente compostos indicando como preencher dados.
  • Estados de Erro: Relatórios de erro claros e inline (por exemplo, formulários).
  • Feedback Tátil: Em :active, use -translate-y-[1px] ou scale-[0.98] para simular um pressionamento físico indicando sucesso/ação.

Regra 6: Padrões de Dados e Formulários

• Formulários: O rótulo DEVE ficar acima da entrada. O texto de ajuda é opcional, mas deve existir na marcação. Texto de erro abaixo da entrada. Use um gap-2 padrão para blocos de entrada.

4. PROATIVIDADE CRIATIVA (Implementação Anti-Falta de Esforço)

Para combater ativamente designs genéricos de IA, implemente sistematicamente estes conceitos de codificação de alto padrão como sua linha de base:

• Refração "Vidro Líquido": Quando o glassmorfismo for necessário, vá além de backdrop-blur. Adicione uma borda interna de 1px (border-white/10) e uma sombra interna sutil (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) para simular refração física de borda.
• Microfísica Magnética (Se MOTION_INTENSITY > 5): Implemente botões que puxam ligeiramente em direção ao cursor do mouse. CRÍTICO: NUNCA use React useState para hover magnético ou animações contínuas. Use EXCLUSIVAMENTE useMotionValue e useTransform do Framer Motion fora do ciclo de renderização do React para evitar colapso de desempenho em dispositivos móveis.
• Microinterações Perpétuas: Quando MOTION_INTENSITY > 5, incorpore microanimações contínuas e infinitas (Pulso, Efeito Máquina de Escrever, Flutuação, Brilho, Carrossel) em componentes padrão (avatares, pontos de status, fundos). Aplique Física Spring Premium (type: "spring", stiffness: 100, damping: 20) a todos os elementos interativos—sem easing linear.
• Transições de Layout: Sempre utilize as props layout e layoutId do Framer Motion para reordenação, redimensionamento e transições de elementos compartilhados suaves em mudanças de estado.
• Orquestração Escalonada: Não monte listas ou grades instantaneamente. Use staggerChildren (Framer) ou cascata CSS (animation-delay: calc(var(--index) * 100ms)) para criar revelações em cascata sequenciais. CRÍTICO: Para staggerChildren, o Pai (variants) e os Filhos DEVEM residir na árvore de Componentes Cliente idêntica. Se os dados forem buscados de forma assíncrona, passe os dados como props para um wrapper de Movimento Pai centralizado.

5. DIRETRIZES DE DESEMPENHO

• Custo DOM: Aplique filtros de granulação/ruído exclusivamente a pseudo-elementos fixos e com pointer-events: none (por exemplo, fixed inset-0 z-50 pointer-events-none) e NUNCA a contêineres de rolagem para evitar repinturas contínuas da GPU e degradação de desempenho em dispositivos móveis.
• Aceleração de Hardware: Nunca anime top, left, width ou height. Anime exclusivamente via transform e opacity.
• Restrição de Z-Index: NUNCA espalhe z-50 ou z-10 arbitrários sem solicitação. Use z-indexes estritamente para contextos de camadas sistêmicas (Navbars Fixas, Modais, Overlays).

6. REFERÊNCIA TÉCNICA (Definições de Nível)

DESIGN_VARIANCE (Nível 1-10)

• 1-3 (Previsível): Flexbox justify-center, grades simétricas estritas de 12 colunas, preenchimentos iguais.
• 4-7 (Deslocado): Use sobreposição margin-top: -2rem, proporções de aspecto de imagem variadas (por exemplo, 4:3 ao lado de 16:9), cabeçalhos alinhados à esquerda sobre dados centralizados.
• 8-10 (Assimétrico): Layouts Masonry, CSS Grid com unidades fracionárias (por exemplo, grid-template-columns: 2fr 1fr 1fr), zonas vazias massivas (padding-left: 20vw).
• SOBREPOSIÇÃO MÓVEL: Para níveis 4-10, qualquer layout assimétrico acima de md: DEVE reverter agressivamente para um layout estrito de coluna única (w-full, px-4, py-8) em viewports < 768px para evitar rolagem horizontal e quebra de layout.

MOTION_INTENSITY (Nível 1-10)

• 1-3 (Estático): Sem animações automáticas. Apenas estados CSS :hover e :active.
• 4-7 (CSS Fluido): Use transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Use cascatas animation-delay para carregamentos. Foco estrito em transform e opacity. Use will-change: transform com moderação.
• 8-10 (Coreografia Avançada): Revelações complexas acionadas por rolagem ou parallax. Use hooks do Framer Motion. NUNCA use window.addEventListener('scroll').

VISUAL_DENSITY (Nível 1-10)

• 1-3 (Modo Galeria de Arte): Muito espaço em branco. Grandes lacunas entre seções. Tudo parece muito caro e limpo.
• 4-7 (Modo App Diário): Espaçamento normal para aplicativos web padrão.
• 8-10 (Modo Cabine): Preenchimentos minúsculos. Sem caixas de cartão; apenas linhas de 1px para separar dados. Tudo é compacto. Obrigatório: Use Monospace (font-mono) para todos os números.

7. OS 100 SINAIS DE IA (Padrões Proibidos)

Para garantir uma saída premium e não genérica, você DEVE evitar estritamente estas assinaturas comuns de design de IA, a menos que explicitamente solicitado:

Visual e CSS

• SEM Brilhos/Glows Externos: Não use box-shadow com brilho padrão ou brilhos automáticos. Use bordas internas ou sombras sutis com matiz.
• SEM Preto Puro: Nunca use #000000. Use Off-Black, Zinc-950 ou Carvão.
• SEM Destaques Excessivamente Saturados: Dessature destaques para se misturar elegantemente com neutros.
• SEM Texto com Gradiente Excessivo: Não use gradientes de preenchimento de texto para cabeçalhos grandes.
• SEM Cursores de Mouse Personalizados: Eles são obsoletos e prejudicam o desempenho/acessibilidade.

Tipografia

• SEM Fonte Inter: Banida. Use Geist, Outfit, Cabinet Grotesk ou Satoshi.
• SEM H1s Superdimensionados: O primeiro título não deve gritar. Controle a hierarquia com peso e cor, não apenas com escala massiva.
• Restrições de Serifa: Use fontes Serifa APENAS para designs criativos/editoriais. NUNCA use Serifa em Dashboards limpos.

Layout e Espaçamento

• Alinhe e Espace Perfeitamente: Garanta que preenchimento e margens sejam matematicamente perfeitos. Evite elementos flutuantes com lacunas estranhas.
• SEM Layouts de 3 Colunas de Cartão: A linha de recursos genérica "3 cartões iguais horizontalmente" é PROIBIDA. Use uma abordagem de 2 colunas em zigue-zague, grade assimétrica ou rolagem horizontal.

Conteúdo e Dados (O Efeito "João Silva")

• SEM Nomes Genéricos: "João Silva", "Maria Santos" ou "Pedro Alves" são proibidos. Use nomes altamente criativos e com som realista.
• SEM Avatares Genéricos: NÃO use o SVG "ovo" padrão ou ícones de usuário do Lucide para avatares. Use placeholders de foto criativos e verossímeis ou estilização específica.
• SEM Números Falsos: Evite saídas previsíveis como 99,99%, 50% ou números de telefone básicos (1234567). Use dados orgânicos e bagunçados (47,2%, +1 (312) 847-1928).
• SEM Nomes Slop de Startup: "Acme", "Nexus", "SmartFlow". Invente nomes de marca premium e contextuais.
• SEM Palavras de Enchimento: Evite clichês de copywriting de IA como "Eleve", "Contínuo", "Liberte" ou "Next-Gen". Use verbos concretos.

Recursos Externos e Componentes

• SEM Links Quebrados do Unsplash: Não use Unsplash. Use placeholders absolutos e confiáveis como https://picsum.photos/seed/{string_aleatoria}/800/600 ou Avatares SVG de UI.
• Personalização shadcn/ui: Você pode usar shadcn/ui, mas NUNCA em seu estado padrão genérico. Você DEVE personalizar os raios, cores e sombras para corresponder à estética de alto padrão do projeto.
• Limpeza Pronta para Produção: O código deve ser extremamente limpo, visualmente marcante, memorável e meticulosamente refinado em cada detalhe.

8. O ARSENAL CRIATIVO (Inspiração de Alto Padrão)

Não recorra a UI genérica. Inspire-se nesta biblioteca de conceitos avançados para garantir que a saída seja visualmente marcante e memorável. Quando apropriado, aproveite GSAP (ScrollTrigger/Parallax) para storytelling de rolagem complexo ou ThreeJS/WebGL para animações 3D/Canvas, em vez de movimento CSS básico. CRÍTICO: Nunca misture GSAP/ThreeJS com Framer Motion na mesma árvore de componentes. Padrão para Framer Motion para interações UI/Bento. Use GSAP/ThreeJS EXCLUSIVAMENTE para storytelling de rolagem de página inteira isolado ou fundos de canvas, envoltos em blocos de limpeza de useEffect estritos.

O Paradigma Hero Padrão

• Pare de fazer texto centralizado sobre uma imagem escura. Tente seções Hero assimétricas: Texto alinhado de forma limpa à esquerda ou direita. O fundo deve apresentar uma imagem relevante de alta qualidade com um desbotamento estilístico sutil (escurecendo ou clareando graciosamente na cor de fundo, dependendo se está no modo Claro ou Escuro).

Navegação e Menus

• Ampliação Dock do Mac OS: Barra de navegação na borda; ícones escalam fluidamente ao passar o mouse.
• Botão Magnético: Botões que puxam fisicamente em direção ao cursor.
• Menu Pastoso: Subitens se destacam do botão principal como um líquido viscoso.
• Ilha Dinâmica: Um componente de UI em forma de pílula que se transforma para mostrar status/alertas.
• Menu Radial Contextual: Um menu circular expandindo exatamente no clique...