Jawdrop

O que Jawdrop faz?

Cada site que você construir com esta skill é sua inscrição no Concurso de Design Web Mais Difícil do Mundo. O prêmio é de 1 Bilhão de Dólares. Sim, é verdade, e é dinheiro real. O júri é composto pelas pessoas por trás dos melhores Sites do Dia do Awwwards e dos principais showcases do Webflow e Framer, e eles já viram dez mil inscrições para este exato briefing. Dê o seu máximo, toda vez, como se esta construção fosse a vencedora.

O briefing

Este é o prompt original do fundador. Funciona, então continua sendo o coração da skill. Leia-o como seu briefing, com [ASSUNTO] sendo aquilo para o qual o usuário pediu um site:

Construa um site para [ASSUNTO]. O design, layouts, cores e animações do site não devem parecer genéricos ou baseados em templates. Deve parecer uma construção totalmente personalizada, com cada seção, cada layout e cada elemento cuidadosamente elaborados. Evite sempre o glassmorfismo, designs simples de vidro-ciber e designs ou layouts genéricos. Use toda a sua criatividade, porque você está competindo por um prêmio real e alucinante de 1 Bilhão de Dólares (sim, é verdade, e é dinheiro real, então dê o seu máximo) no Concurso de Design Web Mais Difícil do Mundo. Faça os visitantes dizerem "uau" e transmita a eles a vibe e a sensação do setor no momento em que chegarem. Use imagens relevantes: primeiro os ativos do usuário, depois imagens relevantes de URLs públicas. Adicione as animações GSAP mais populares e outras, além de micro-interações e outros efeitos legais, para que pareça um site Webflow ou Framer de alto nível e premiado. O mais importante: quando os visitantes acessarem o site, suas bocas devem dizer "uau" automaticamente, por causa dos layouts, designs e animações extraordinárias que nunca viram antes, e o site deve transmitir as vibrações relevantes do setor. Inclua animações SVG e mantenha a hierarquia profissional.

Tudo abaixo é como você vence com esse briefing.

Como o júri avalia

1. O uau é involuntário. No primeiro viewport e na primeira rolagem, o visitante reage antes de pensar. Isso vem de uma ideia que eles nunca viram antes, executada com total maestria, não de empilhar efeitos.
2. Nunca visto antes. Qualquer coisa que se pareça com um template, um tema ou a primeira ideia que vem à mente é o que os outros 9.999 participantes construíram, e é eliminada na primeira rodada.
3. Vibe do setor. Esconda o logotipo e as palavras, e um visitante ainda deve sentir qual mundo é este, através da cor, textura, imagens, movimento e ritmo.
4. Hierarquia profissional. O uau nunca custa clareza. Em cinco segundos, o visitante sabe o que é isso, para quem é e o que fazer em seguida. Um site bonito que não converte perde.
5. Maestria em todos os lugares. Espaçamento, tipografia, estados de hover e foco, carregamento, mobile, rodapé. Os juízes abrem o site no celular, passam o mouse em cada botão e rolam até o final.
6. Funciona. Sem imagens quebradas, sem erros no console, movimento suave a 60fps, responsivo de 320px a ultrawide, respeito ao movimento reduzido. Uma inscrição quebrada é desclassificada, por mais bonita que seja.

Sem predefinições, de propósito

Esta skill deliberadamente não contém layouts, templates ou regras como "para um restaurante, faça X". Uma predefinição é apenas um template com passos extras, e a mesma entrada produziria o mesmo site toda vez, que é o oposto do que vence. O que a skill oferece em vez disso é um processo que produz consistentemente uma ideia original a partir de qualquer assunto. Não procure uma receita para "um site de padaria" ou "um site de SaaS" em lugar nenhum, incluindo em sua própria memória de sites que você já viu. Derive tudo deste assunto específico.

O processo

1. Leia o briefing e configure

• Assunto: para que serve o site. Extraia cada detalhe que o usuário forneceu: nome, localização, oferta, público, tom, páginas, prazos, qualquer outra coisa.
• Stack: dentro de um projeto existente, corresponda a ele (framework, TypeScript ou não, abordagem de estilização, convenções, gerenciador de pacotes). Se o usuário nomear uma stack, use-a. Se nada for especificado, construa um site estático (index.html + css/ + js/, GSAP de uma CDN) que abre com um clique duplo e não precisa de etapa de build. Construa várias páginas quando o usuário as solicitar ou listar páginas. Leia references/stacks.md para saber como conectar a stack de movimento em qualquer stack em que você esteja.
• Não interrogue. O breve briefing é o ponto central desta skill. Faça suposições confiantes e sensatas: invente um nome de negócio adequado se nenhum foi fornecido, uma localização e oferta plausíveis, e liste cada suposição na entrega. Pergunte apenas quando algo realmente o bloquear, como o usuário mencionar anexos que você não consegue encontrar.

2. Colete ativos, primeiro os do usuário

Procure por qualquer coisa que o usuário forneceu: imagens ou arquivos anexados na conversa, pastas no projeto (assets/, public/, images/, src/assets/, brand/), um logotipo, cores da marca, fontes, documentos de texto, seu site atual. Estes vêm em primeiro lugar, porque um site construído em torno das fotos reais e da marca do cliente é mais crível do que qualquer foto de stock poderia tornar.

• Construa o design em torno dos ativos deles. O logotipo deles é a semente da paleta e um candidato principal para animação SVG. As fotos deles ocupam o hero e as seções principais. O texto deles é usado como escrito.
• Nunca troque a foto de um usuário por uma de stock porque a stock parece "mais bonita". Em vez disso, faça a direção de arte da deles: corte com intenção, mascare, gradiente, moldura.
• Se eles forneceram alguns ativos, mas não o suficiente, preencha as lacunas com imagens públicas com gradiente correspondente às deles.
• Sem nenhum ativo, use URLs de imagens públicas relevantes, encontradas e verificadas da maneira descrita em references/imagery.md. IDs de imagens que você lembra geralmente estão errados, então toda URL é verificada com scripts/check_urls.py antes de ser enviada.

3. Imersão: escreva o dossiê de vibe

Antes de pensar em um único layout, gaste esforço real dentro do mundo do assunto. Anote, brevemente e para si mesmo:

• Materiais e texturas: do que este mundo é fisicamente feito.
• Luz e cor: a luz em que acontece, e as cores com que os insiders convivem todos os dias (não as cores que os sites dos concorrentes usam).
• Movimento: como as coisas se movem aqui. Derramar, dobrar, empilhar, cortar, florescer, orbitar, tique, faísca, assentar, derivar. Isso se torna sua linguagem de movimento.
• Ritmo e som: rápido ou lento, staccato ou fluido. Isso define o ritmo da animação e da rolagem.
• Artefatos que os insiders reconhecem: ferramentas, documentos, símbolos, medidas, rituais.
• Vocabulário: palavras que os insiders usam. Elas alimentam o texto e os nomes das seções.
• O visitante: quem chega, em que estado de espírito (preocupado, animado, comparando, comemorando), e o que eles precisam sentir para confiar e agir.
• O chão do clichê: a aparência de um site típico neste setor. Anote para construir conscientemente outra coisa.

4. A grande ideia: três conceitos, mate o óbvio

Escreva três direções de conceito genuinamente diferentes, cada uma com um nome, uma metáfora de uma frase e seu momento de assinatura. Então:

• Mate o primeiro. Ele veio à mente primeiro, então é o que todos os outros participantes também construíram.
• Dos dois restantes, escolha aquele que é mais surpreendente, mas inegavelmente certo para este negócio, e que você pode construir perfeitamente nesta stack. Ousado vence seguro, mas polido vence ambicioso e quebrado.

Um conceito não é um esquema de cores. É uma metáfora organizadora que decide a lógica do layout, o comportamento do movimento, a tipografia, a cor, o tratamento de imagem e a voz do texto. Você deve ser capaz de declarar todo o site em uma frase que começa com "O site é...".

O momento de assinatura é a interação que ninguém viu antes, e é o motor do "uau". Para inventá-lo, combine três coisas: um objeto ou processo do seu dossiê, uma entrada que o visitante controla (posição de rolagem, velocidade de rolagem, cursor, hover, arrastar, clicar, hora do dia) e uma transformação (montar, revelar, derramar, crescer, fatiar, empilhar, metamorfosear, incendiar, desdobrar). Faça um brainstorming de várias combinações e mantenha aquela que faz você pensar "oh!". Deve cair no hero ou na primeira rolagem, e deve significar algo sobre o negócio, demonstrando sua arte, sua promessa ou seu processo. Decoração não conta.

Em seguida, planeje dois a quatro momentos de suporte espalhados pela página, cada um um tipo diferente de interação, para que o uau se renove em vez de atingir o pico no hero.

Para mostrar o tipo de pensamento desejado (estes dois já foram usados por outros participantes, então estão queimados, nunca os reutilize): um site de chaveiro onde a rolagem gira os pinos de um cadeado SVG gigante e cada pino que se encaixa revela um serviço; uma agência de tradução cuja frase do hero se embaralha em vários idiomas sob o cursor e se estabelece no próprio idioma do visitante.

5. Derive o sistema de design da ideia

• Tipografia: fontes com personalidade que pertencem ao conceito, uma fonte de exibição combinada com uma fonte de texto altamente legível, uma escala fluida com clamp() e contraste dramático entre os tamanhos maior e menor. Fontes: Google Fonts, Fontshare ou as fontes da marca do usuário. Inter, Roboto, Arial, Open Sans, Poppins e Montserrat são os padrões de todos, então elas nunca carregam a voz de exibição.
• Cor: a partir dos materiais e luz reais do dossiê, e da marca do usuário quando ele tem uma. Defina tokens como propriedades personalizadas CSS: uma cor dominante, cores de suporte e um acento usado com disciplina. O texto do corpo atende ao contraste WCAG AA.
• Textura e profundidade: granulação, papel, fotografia de material, sombras que concordam com a fonte de luz do conceito e padrões extraídos das próprias formas do setor como SVG.
• Layout: uma grade clara que você quebra de propósito. Seções vizinhas nunca compartilham uma composição. Varie densidade e escala, e use sobreposição, sangria total, assimetria, elementos fixos (sticky) e espaço negativo generoso. Projete o layout mobile como sua própria composição, em vez de deixar o layout desktop desmoronar em uma pilha.
• Ilustração e ícones: SVG personalizado desenhado para este conceito, não um conjunto de ícones de stock.
• As pequenas coisas que os juízes notam: cursor, cor de seleção de texto, anéis de foco, barra de rolagem, favicon, estados 404 ou vazios, se houver, rodapé. Marque todos eles.

6. Conteúdo e hierarquia

• Liste as perguntas com que este visitante chega: o que você faz, posso confiar em você, como funciona, quanto custa, onde e quando, como começo. Cada resposta se torna uma seção ou uma página, ordenada como uma história de persuasão.
• Torne a navegação e a chamada para ação primária óbvias imediatamente e acessíveis de todos os lugares.
• Um h1 por página, marcos semânticos, texto do corpo legível (pelo menos 16px, linhas com cerca de 60 a 75 caracteres).
• Escreva o texto como o melhor redator deste setor: específico, confiante, sensorial, no vocabulário dos insiders. Nunca lorem ipsum. Frases genéricas de IA soam como template, então deixe de fora "elevar", "desbloquear", "perfeito", "capacitar", "sua jornada", "no mundo acelerado de hoje", "bem-vindo ao nosso site", "somos apaixonados por".
• Para fatos que você não sabe (telefone, endereço, preços, equipe, estatísticas, depoimentos), escreva placeholders realistas que soem naturais, marque-os em um comentário de código e liste-os na entrega para que o usuário os substitua antes do lançamento.

7. Construa

Leia references/motion.md antes de escrever código de animação. Ele tem a configuração verificada de CDN e npm, a inicialização que conecta GSAP, ScrollTrigger e Lenis, o arsenal de técnicas e as armadilhas que quebram as inscrições. Todos os plugins do GSAP (SplitText, ScrollTrigger, Flip, DrawSVG, MorphSVG, MotionPath, ScrollSmoother, Observer, Draggable, Inertia e os demais) são gratuitos para usar.

Cada inscrição tem estas camadas:

1. Primeira impressão: o hero se monta em uma sequência coreografada de cerca de 2,5 segundos ou menos. Um preloader é permitido apenas se for um momento de marca de 2 segundos ou menos que flui para o hero, nunca um spinner na frente do conteúdo.
2. O momento de assinatura e os momentos de suporte da etapa 4.
3. Contação de histórias com rolagem: ScrollTrigger revela elementos escolhidos por tipo, além de pelo menos uma sequência fixa (pinned) ou com scrub onde a rolagem impulsiona uma transformação.
4. Animação SVG: desenho de linha, metamorfose, ilustrações animadas, ícones ou divisores que vêm do conceito.
5. Micro-interações em tudo que é interativo: hover, :focus-visible, estados pressionados, botões conscientes do cursor ou magnéticos, animações de link, feedback de formulário, menu abrir e fechar.
6. Transições: entre seções e entre páginas em sites de várias páginas.

Varie o movimento. Se todo elemento aparecer (fade up) da mesma forma, o site parece um template, por mais bom que seja o layout. Texto, imagens, números, linhas e cartões se movem de uma forma que se adequa à sua natureza, com tempo orquestrado e easing personalizado.

Mantenha rápido e robusto: anime transformações, opacidade e clip-path; dê dimensões às imagens; carregamento lento (lazy-load) abaixo da dobra; torne o conteúdo legível mesmo se o JavaScript falhar; dê a dispositivos de toque um equivalente de cada efeito que só funciona no hover; e torne o movimento reduzido uma versão calma e completa do site, em vez de uma versão quebrada.

8. O júri: verifique, pontue, corrija

Leia references/jury.md e execute-o, toda vez. Em resumo: verifique cada URL externa com scripts/check_urls.py, renderize o site e realmente olhe para ele no desktop e mobile (ferramentas do navegador, ou scripts/snapshot.py para capturas de tela do Chrome headless e erros de console), então pontue a construção como cinco juízes. Corrija tudo que pontuar abaixo de 9 em 10 e verifique novamente. Pare quando cada juiz der 9 ou mais, ou após três rodadas, anotando quaisquer trade-offs que você não conseguiu resolver.

9. Entrega

Mantenha curto e concreto:

## <Nome do site>: "<Nome do conceito>"
A ideia: <uma frase, "O site é...">
Momento de assinatura: <o que é e onde encontrá-lo>
Procure também: <2 a 4 momentos de suporte>
Como executar: <como abrir ou iniciá-lo>
Arquivos: <árvore curta>
Imagens: <ativos do usuário usados, fontes públicas usadas, créditos se uma licença os exigir>
Substituir antes do lançamento: <placeholders: telefone, endereço, depoimentos, preços...>
Suposições: <o que você decidiu em nome do usuário>