frontend-2027

1Missão: exuberância, nada bloqueia

O frontend-2027 dá exuberância e profundidade tecnológica ao visual, ao layout e ao design de tudo o que um agente constrói. Exuberância é cor no limite do gamut (a faixa de cores que a tela mostra) e título muito maior que o texto. É também camada com profundidade, movimento com assinatura e painel denso. Profundidade tecnológica é a stack (o conjunto de tecnologias) de 2027. Entram CSS novo, desenho acelerado pela placa de vídeo (WebGL e WebGPU), TypeScript 7 e bibliotecas que só carregam quando a tela pede.

Três coisas ficam de fora, de propósito: acessibilidade, privacidade e burocracia. Nenhum portão, prompt ou skill reprova um design por esses motivos; quem precisa deles trata no repositório do produto. E nada bloqueia a entrega: os portões só sugerem como deixar a peça mais forte.

2Nove domínios em ordem

Nove domínios organizam tudo, na ordem em que uma tela se constrói: direcao abre todo plano, fundamentos dá a base visual e qualidade fecha. Domínio é uma área do frontend (cor, layout, dados, movimento) com a mesma pasta em src/algoritmos/, orientacoes/, receitas/ e tests/. Cada domínio tem uma skill e as suas categorias de peça no pipeline, a linha de geração dos modelos. Tudo nasce de um só arquivo, taxonomia.json: dele saem o mapa abaixo, os índices e a Wiki.

1. 1 DireçãoO que esta peça precisa provocar, para quem, e qual ousadia a torna própria da marca?11 decisões · 5 módulos · direcao-de-arte
2. 2 Fundamentos visuaisQue cor, tipografia, tokens, movimento e ícones dão potência à peça?17 decisões · 11 módulos · sistema-visual
3. 3 Layout e navegaçãoComo a página se organiza, se navega e se adapta da tela larga ao celular?19 decisões · 5 módulos · layout-e-navegacao
4. 4 Dados e painéisQue gráfico responde à pergunta, como desenhar o volume e como mostrar muitos números por tela?7 decisões · 4 módulos · dados-e-paineis
5. 5 Diagramas e formatos visuaisÉ um diagrama técnico mantido como código, uma peça visual de comunicação ou uma rede de nós?7 decisões · 5 módulos · diagramas-e-formatos
6. 6 Cenas imersivasQue cena 3D ou simulação mostra a máquina trabalhando e roda lisa?8 decisões · 3 módulos · cenas-da-maquina
7. 7 Mídia: vídeo, imagem e peçasEm que tamanho, ritmo e série a peça de mídia sai, e o que se deriva dela?7 decisões · 4 módulos · video-e-pecas
8. 8 Código e stackCom que stack, onde mora cada estado e como o código fica limpo?12 decisões · 2 módulos · stack-moderna-2027
9. 9 QualidadeA peça ficou potente, sem cara de IA, e o código está limpo? (só sugere, nunca bloqueia)12 decisões · 5 módulos · frontend-exuberante

3Três portas de entrada

Três portas levam ao mesmo método; o agente escolhe pela matéria que tem na mão: um link, um pedido em texto ou uma peça gerada. A porta só decide o que roda primeiro. Daí em diante o protocolo é um só. Uma wave por vez, e wave é a etapa de trabalho que cabe numa sessão do agente. Só a skill do domínio da vez fica carregada e as decisões saem na ordem. O fechamento é medido no host real, o site onde a página mora.

node src/cli.mjs evoluir https://seusite.com --repo ../codigo --previa "vercel" --revisao https://previa.seusite.com --executar
node src/cli.mjs waves "painel de vendas com gráficos e tabela longa" --repo ../projeto
node src/cli.mjs gerar paginas --brief briefing.md --simular

4Evoluir em cinco waves

Nada muda no código antes do diagnóstico. O agente lê o repositório: stack, scripts, rotas, componentes, tokens (os valores de cor e espaço com nome), fontes e design system. Depois abre o site no Chromium, o navegador de testes, e rola até o fim. Mede seis estados além do repouso: ponteiro no botão e no cartão, menu em 390 px, foco, tema escuro, modal. Lê o que foi pintado, não o que o código promete.

Onze áreas recebem nota de 0 a 100, cada uma ligada a um domínio e a uma wave. A composição pesa antes da cor. Sobreposição, título em mais de duas linhas, parágrafo sem justificar, fonte de sistema, texto cortado e página-muro derrubam a nota, com ou sem cor viva.

A síntese junta repetidos, acha causas comuns e ordena por gravidade e esforço; sai como "Lacunas" e "Próximos passos recomendados". O plano é sempre o mesmo esqueleto de cinco waves, porque a ordem do frontend não muda; o que varia é o conteúdo de cada uma.

Cada wave roda em série: o agente implementa com um prompt que traz os gaps da área, as decisões em ordem, a leitura que cabe na janela, as escolhas livres sorteadas pela semente e as lições daquele site; o build roda (com dois reparos e reversão se quebrar); a prévia publica; a sentinela confirma que o deploy chegou; o diagnóstico mede de novo e grava o veredito. Quem escreve não corrige a própria prova: o juiz é a medida, e o revisor, quando existe, só lê. Produção é uma decisão explícita do dono, uma vez, no fim.

5Seis regras do agente

1. Uma wave por vezcarrega só a skill, as decisões e os guias da wave; ao fechar, preenche o resumo de passagem com seis cabeçalhos fixos
2. Decisões em ordemcada decisão tem uma função em src/algoritmos/index.mjs ou um comando; o resultado de uma alimenta a próxima
3. Stack respeitadacom --repo, o mapa do repositório decide; o agente estende os tokens que existem em vez de criar outros
4. Espaço livrefixo são as áreas, as metas e as lacunas; o resto é livre, com semente para repetir e ousadia para variar
5. Fechamento medidoexuberancia para o código e tela no host real, mirando 80 ou mais; os portões só sugerem
6. Crítica com printtopo, meio e fim em 1440 e 390 px, lidos antes do PR; uma grade quebrada não passa pela nota, passa pelo olho

A skill orquestradora proíbe a cara de IA por padrão, item por item. Na cor: azul-violeta de fábrica. Na tipografia: Inter sozinha ou fonte só de sistema, título de herói em página de leitura, título em mais de duas linhas, parágrafo sem justificar. Nos componentes: cartões todos com o mesmo raio e sombra, eyebrow (a linha em caixa alta acima do título) e seta no fim do botão. No texto: verbo de folheto, como “Eleve”, no lugar da ação real.

6As nove skills

Skill é o manual curto que o agente carrega: uma por domínio, mais a orquestradora, que abre as portas e fecha a auditoria. Cada skill traz as decisões em sequência e a função que responde a cada uma. Traz também os números que valem, um bloco de boa escrita e o mapa dos guias. Instalação: npm run skills. Abaixo, o que cada uma decide e um exemplo saído das próprias funções.

7Sistema visual ao vivo

Quatro funções do repositório geraram tudo o que esta página mostra. Paleta por vividPalette({ matiz: 338, esquema: "neon" }), em que matiz é a posição da cor na roda (338 é um rosa-magenta). Saem onze tons da cor primária, três acentos a 120 graus e gradientes em malha. Escala por displayScale({ tipo: "leitura", coluna: 1080 }): título de até 88 px e nenhuma seção acima de 48 px. Por isso nenhum título desta página passa de duas linhas.

Fontes por fontPairing: Newsreader Variable nos títulos e Inter Variable no texto, as duas já hospedadas pelo portal, sem baixar nada. Movimento por springEasing: molas (curvas que balançam antes de parar) em linear() nos cartões e nos números.

8Bibliotecas sob demanda

Só entra o que a tela pede. O agente instala a stack (o conjunto de bibliotecas do projeto) em camadas, por padrão (stack --camadas base,movimento). O pesado entra por import() quando o leitor chega à tela que o usa: three, @react-three/fiber, @react-three/drei, @react-three/rapier, @react-three/xr, gsap, entre outros. O catálogo de 159 recursos diz quando cada um entra: núcleo em todo projeto, quando a tela pedir, ou alternativa de outra família. Tudo com versão conferida em stacks/exuberante.json e bibliotecas/catalogo.json.

9Qualidade medida na tela

Portão é uma função que lê a peça e devolve sugestões; nenhum bloqueia. São cinco. auditSvg olha o viewBox, o fill e o tamanho real da letra. auditCss acha cor solta e classe dinâmica. auditCopy aponta frase longa, enchimento ou vício de máquina. auditExuberance mede as sete dimensões e a cara de IA no código. tela mede no Chromium o que foi pintado.

Desde 12/11/2026, a tela mede a composição contra dez referências de produto: Linear, Stripe, Anthropic, Vercel, Apple, Mercury, Supabase, Figma, A24 e Booking. Na mesma data entrou o eixo de assinatura, com dez referências de vanguarda: Lusion, Unseen, basement.studio, Rive, Runway, Framer, Arc, Daylight, Dropbox Brand e Linear. São 18 técnicas de movimento, com peso e reserva. Daí sai o plano: uma assinatura para o herói e dois a quatro apoios, escolhidos pelo perfil da página, pela ousadia e pela semente. A semente torna o sorteio repetível.

10Modelos, escrita e custo

O repositório não guarda chave de API (a senha que dá acesso a um modelo). Geração e pesquisa passam pelo motor do geo-orchestrator, que escolhe o modelo por um alias (um apelido trocável) e mantém uma reserva por tarefa. A revisão roda sempre num provedor diferente do que gerou, e cada execução tem teto de gasto. As pesquisas de 12/11/2026 (plataforma e tendências de 2026; landing pages, persuasão, marketing digital) custaram cerca de dois dólares no conjunto. Viraram guias e módulos.

A escrita atravessa tudo: o curso Escrever Bem com IA entrou como módulo (writingBrief, headlineVariants, ctaLabel, microcopySet, auditCopy) e como bloco "Boa escrita" nas nove skills. Exemplo de microcopy gerada para o diagnóstico: vazio, "Nenhum diagnóstico ainda: Medir o site para começar. Nota e gaps por área."; erro, "Não conseguimos carregar diagnósticos: O site não respondeu. Tente de novo ou informe outra URL.". Botão pela regra do verbo com objeto: "Evoluir o site".

1. Modelo por apelidoo motor escolhe pelo alias e guarda uma reserva por tarefa; trocar de modelo é mudar uma linha
2. Revisão em outro provedorquem escreve não corrige a própria prova: a revisão roda em outro modelo
3. Texto auditadoauditCopy e headlineVariants antes de publicar
4. Custo medidoUS$ 1,97 nas duas pesquisas de 12/11/2026; esta página, zero chamadas

11Do link ao site no ar

Seis passos levam um link a um site publicado. Cinco são do agente, com comando e medida; o sexto, publicar em produção, é decisão explícita do dono.

1. Mapear e diagnosticarevoluir <url> --repo <código>: mapa do repositório, onze áreas, lacunas e próximos passos
2. Wave 1 e 2fundação visual (tokens, escala pelo tipo, fontes) e estrutura (grade íntegra, navegação, conversão, texto)
3. Wave 3 e 4dados e conteúdo visual pelo perfil; movimento e profundidade sob orçamento
4. Wave 5código moderno com reserva, carregamento sob demanda, medida no host
5. Rodada finalnovo diagnóstico; só o que ficou abaixo de 80 volta
6. Publicar e conferirprodução uma vez, por decisão explícita; sentinela na página; captura lida em 1440 e 390 px

12Fontes

Quatro origens alimentam o repositório. Seis cursos do fundador: Frontends com Vibecoding; Claude Sheets, Whiteboards e Data; Vídeo com IA; Astra Profundo; NotebookLM: criar conteúdo; Escrever Bem com IA. Os nove guias de design do leadlovers2026: navegação, diagramas, gráficos, Tailwind, React, ícones, dashboards, botões e TypeScript. As dez referências de qualidade, medidas no Chromium. E as pesquisas do geo-orchestrator. A origem de cada guia está na linha “Fonte” dele; a Wiki do repositório é gerada inteira do código por npm run wiki.

O repositório frontend-2027 é privado e tem a Wiki gerada do código; esta página é a sua face pública. Os outros materiais da coleção estão no hub de design.

1. Seis cursosFrontends com Vibecoding, Claude Sheets, Vídeo com IA, Astra Profundo, NotebookLM e Escrever Bem com IA
2. Nove guias de designnavegação, diagramas, gráficos, Tailwind, React, ícones, botões, TypeScript e este
3. Vinte referências medidasdez de produto para a composição e dez de vanguarda para o movimento
4. Pesquisas do orquestradorplataforma e tendências de 2026, landing pages e marketing