Sobre este template
Digitwist AI Builder preserva o rastro das decisões: o briefing que produziu esta hero tem 6.001 caracteres. Ela abre com “Design at the speed of thought” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta se reduz a azul vivo #3054FF por baixo e azul suave #B4C0FF para a tipografia, e a tipografia é Instrument Sans. A entrada nomeia a stack que produziu a página (React e Lucide icons) em vez de escondê-la. Tudo o que se move cabe em transições de 0.6s. Deixe aberto enquanto escreve: o briefing de 6.001 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Engenheiros que precisam que a hero sobreviva a uma conexão lenta vão usar 800x556 e a escala tipográfica como orçamento de peso.
- Profissionais de marketing que herdam esta hero vão usar tipografia de 20px a 136px e passos de espaçamento de 120px para conferir se uma reescrita manteve a escala.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Digitwist AI Builder.
O que está incluído
- Navegação sem fundo próprio. A navegação é uma fileira só, sem um segundo nível embaixo dela. 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. Mantenha a linha de cima em uma só.
- Os tamanhos estão no briefing, não em uma escala. O layout trabalha com valores absolutos, não com proporções: tipografia de 20px a 136px, passos de espaçamento de 120px e transições de 0.6s. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo.
- Selo acima da dobra. Um selo, uma mensagem: a pílula fica acima do título em Instrument Sans no menor passo da escala, e nada mais disputa esse lugar. Existe um único anúncio, e é isso que faz o selo parecer notícia. Um selo, uma mensagem.
- Texto primeiro, decoração depois. A composição está completa em 800x556: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 800x556, e é por isso que ela se sustenta quando o texto muda. O briefing é a especificação.
Movimento e interação
O tempo definido no briefing
Hover, clique e foco resolvem todos em 0.6s, e é isso que faz a interface parecer imediata. A curva de aceleração é especificada junto com a duração (0.6s), então uma reconstrução não pode trocar a sensação sem aviso. Não entregue o padrão do navegador.
Movimento que sai da frente
Esta é entregue como composição estática em 800x556, então a hierarquia precisa funcionar sem movimento, e funciona. Não há biblioteca de animação no briefing, o que mantém a reconstrução enxuta.
A ordem por trás da hero
A hero tem uma rota de leitura declarada. A navegação apresenta o produto e dá a quem volta um caminho familiar. A partir daí o olho percorre a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo em sequência, e é isso que impede uma tela única de ler como lista. O leitor de SaaS recebe a oferta antes das opções.
Ler Digitwist AI Builder como especificação
É isso que torna a referência reaproveitável: tipografia de 20px a 136px, passos de espaçamento de 120px e transições de 0.6s. Nada fica a cargo do padrão, então uma substituição que mantém esses números mantém a composição. Nada nesta hero depende de um padrão.
Por que o briefing de SaaS se sustenta
Conte as decisões desta hero e todas voltam a um único documento: 6.001 caracteres que nomeiam a moldura em 800x556, a tipografia e o ritmo. Digitwist AI Builder enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
O que o briefing por trás de Digitwist AI Builder contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x556, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de React e Lucide icons para reconstruir Digitwist AI Builder?
Digitwist AI Builder foi construído em React e Lucide icons, 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.
Posso usar Digitwist AI Builder em um projeto de cliente?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 800x556.
