Sobre este template
PROMPT mostra uma forma de construir hero para uma agência ou estúdio e publica as instruções que produziram o resultado. A cor se limita a preto #000000 por baixo e branco #FFFFFF para a tipografia, composta em Inter Tight. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. O movimento fica restrito a transições de 80ms e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 13.186 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Se você é fundador e vai briefar um modelo em vez de um designer, parta da hero e deixe o prompt segurar uma moldura em 1472x1080.
- Times que constroem hero para uma agência ou estúdio e querem o detalhe medido (seções de 100vh e passos de espaçamento de 32px) em vez de uma captura de tela para copiar.
- Profissionais de marketing de produto que precisam que hero continue legível com 5,7s de vídeo em loop atrás do texto.
O que está incluído
- A navegação é fina de propósito. A barra fica sobre a hero em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. A ação carrega o destaque enquanto os links ficam na cor do texto, então a hierarquia da barra acompanha a da página abaixo. A referência tem captura em 1472x1080.
- Conteúdo dividido em painéis. A grade define a ordem de leitura por você: painéis com o mesmo peso, uma ideia cada, compostos em Inter Tight em tamanho pequeno para a estrutura continuar visível. Cada painel combina uma ideia com um ícone, então o caminho de leitura continua horizontal.
- Colunas, não um amontoado de links. Os links se agrupam em colunas e a marca fica em um bloco próprio, o que mantém um rodapé longo legível em vez de virar uma lista corrida. Os tamanhos de tipo descem dos títulos de coluna para os links, então a hierarquia sobrevive a um rodapé denso.
- Uma linha, sem gaveta. A navegação é uma fileira só, sem um segundo nível embaixo dela. Uma sobreposição mobile assume abaixo do breakpoint de tablet.
Movimento e interação
Tempos curtos e combinados
Toda mudança de estado na especificação vem com uma duração: as transições assentam em torno de 80ms. Nada fica no padrão do navegador, e é por isso que a página parece autoral em vez de animada. A mesma duração se repete nos controles, o que mantém as interações com cara de um sistema só.
Movimento ambiente sem biblioteca de scroll
Um único clipe de 5,7s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco. Grave ou exporte em 1472x1080 ou mais largo.
Por que esta composição funciona para agência
Quando você briefa uma hero de agência, a parte difícil é decidir o que a primeira tela se recusa a dizer. PROMPT responde isso de antemão: uma linha de display e a navegação, o selo de anúncio, a linha de estatísticas, a grade de cards e a lista de recursos atrás dela. Dá ao leitor de agência a rota honesta mais curta até a oferta.
Como PROMPT ordena a primeira leitura
Coloque o seu próprio texto nesta hero e a sequência continua de pé, porque os elementos não são intercambiáveis: cada um de a navegação, o selo de anúncio, a linha de estatísticas, a grade de cards e a lista de recursos carrega uma função. O leitor de agência recebe a oferta antes das opções.
Como a hero se reorganiza
Não existe um design mobile separado para manter. a seção fica presa a 100vh, a navegação vira um menu compacto no celular e o movimento tem um ramo de movimento reduzido, e a mesma hierarquia atravessa as duas. Um espremer teria sido mais barato e não se sustentaria.
Perguntas frequentes
O que o briefing por trás de PROMPT contém de fato?
O briefing capturado tem 13.186 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Posso reconstruir hero do PROMPT em outra stack?
PROMPT foi construído em React e Tailwind CSS, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
O que comanda o movimento em PROMPT?
As entradas e as mudanças de estado ficam na faixa de 80ms com um ramo de movimento reduzido no briefing. Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
