Sobre este template
Stellar AI é a referência de hero para um produto de IA ou SaaS, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. Ela abre com “Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta se reduz a branco #FFFFFF por baixo e azul profundo #101117 para a tipografia, e a tipografia é Inter. A entrega é React e Tailwind CSS, capturada em 800x708 para a moldura estar fixada antes de qualquer linha de código. O orçamento de movimento é transições de 0.1s. Deixe aberto enquanto escreve: o briefing de 3.973 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Comece por um tamanho de display fixo de 80px e passos de espaçamento de 30px e deixe a paleta vir depois, porque é o espaçamento que faz esta hero ler.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Stellar AI.
- Se você é designer e vai redesenhar a hero da Stellar AI com a sua própria família, mantenha as proporções de Inter ou a escala para de bater.
O que está incluído
- A barra segue a grade. Uma barra fina ocupa o topo de hero, com a marca à esquerda e os links em Inter, para a composição ler conteúdo primeiro e moldura depois. A seção ativa é marcada por peso, não por uma pílula nem por um sublinhado.
- Números levados para a construção. O briefing fixa um tamanho de display fixo de 80px, passos de espaçamento de 30px e transições de 0.1s e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. Os valores são citados do prompt capturado em vez de inferidos, então sobrevivem a uma nova renderização.
- Texto primeiro, decoração depois. A composição está completa em 800x708: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 800x708, e é por isso que ela se sustenta quando o texto muda.
- Uma barra sem excesso. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a um tamanho de display fixo de 80px e passos de espaçamento de 30px, para a barra nunca competir com a composição atrás dela.
Movimento e interação
O tempo definido no briefing
O movimento aqui é medido em milissegundos: 0.1s. Esse é todo o orçamento de animação, gasto em mudanças de estado, não em uma linha do tempo de scroll. A curva de aceleração é especificada junto com a duração (0.1s), então uma reconstrução não pode trocar a sensação sem aviso.
A interação está nos controles
O feedback se limita a estados de hover nos botões e links, não em todos os cards e abas ou um acordeão que troca o conteúdo no lugar, então o resto do layout é uma composição fixa. Hover e foco estão especificados juntos, então ponteiro e teclado recebem a mesma informação. Menos estados, todos especificados.
Como Stellar AI ordena a primeira leitura
Uma página assim costuma enterrar a ação sob uma grade de recursos. Esta coloca a navegação, o selo de anúncio, a linha de estatísticas, a faixa de clientes e a grade de cards em sequência fixa, com a ação dentro da primeira tela em vez de depois de três rolagens. O leitor de SaaS recebe a oferta antes das opções.
O que se sustenta para IA e SaaS
Conte as decisões desta hero e todas voltam a um único documento: 3.973 caracteres que nomeiam a moldura em 800x708, a tipografia e o ritmo. Stellar AI enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Os números por trás da hero
A tipografia é o primeiro número: um tamanho de display fixo de 80px e passos de espaçamento de 30px. O espaçamento decorre dele, e todo o resto da página é posicionado contra esses dois valores. Nada nesta hero depende de um padrão.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Stellar AI?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x708, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir hero do Stellar AI em outra stack?
Stellar AI 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.
De onde veio o design de Stellar AI?
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 800x708.
