Sobre este template
Antes de reconstruir uma seção de recursos para uma agência ou estúdio, leia Glow Features: a composição e a especificação por trás dela estão as duas aqui. “My entire desktop setup is built for power. It is silent, durable, and holds my focus” é a linha que o layout foi construído para sustentar. A paleta é preto #0A0A0B por baixo, vermelho suave #FFB1CE para a tipografia e vermelho vivo #FF3D77 carregando os destaques. A stack é React e Tailwind CSS, então dá para levar seção de recursos para um projeto sem handoff de design. É a referência certa para seção de recursos para uma agência ou estúdio que precisa parecer intencional já na primeira tela.
Feito para
- Se a referência é só um ponto de partida, os designers podem manter uma moldura em 1834x1362 e reconstruir o resto da seção de recursos.
- Times internos que estendem esta seção de recursos e precisam de um tamanho de display fixo de 14px e passos de espaçamento de 40px levado para os novos blocos sem alteração.
- Líderes de estúdio que tocam vários projetos ao mesmo tempo vão usar esta seção de recursos como o padrão que todas as outras páginas copiam.
O que está incluído
- Toda medida está escrita. Nada no layout fica por sensação: o briefing cita um tamanho de display fixo de 14px e passos de espaçamento de 40px e a construção precisa atingir esses valores. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes.
- A estatística é tipografia. A fileira fica no alto da seção de recursos como prova, não como decoração. Os números carregam o destaque #FF3D77 enquanto tudo em volta fica na cor do texto.
- Conteúdo dividido em painéis. A grade de cards é o recurso de organização: painéis iguais, uma ideia cada, sem hierarquia entre eles. Os painéis se separam por espaçamento, não por bordas, o que mantém a grade discreta. Corte um painel antes de encolher a tipografia.
- Estrutura em uma tela. A composição de seção de recursos é construída para o texto chegar antes de tudo: a tipografia carrega a hierarquia, a moldura em 1834x1362 segura a composição e os valores de apoio ficam discretos. A página é uma composição só em 1834x1362, e é por isso que ela se sustenta quando o texto muda.
Movimento e interação
Renderizado, não ilustrado
A peça central é renderizada ao vivo (um canvas WebGL) em vez de entregue como imagem, então a composição em 1834x1362 reage à viewport em vez de ficar atrás dela. O briefing mantém a interface simples em volta do canvas para a cena ser o único espetáculo.
Movimento que sai da frente
O briefing deixa a animação de fora e deixa o layout em 1834x1362 conduzir a página, com estados de hover e de clique como únicas mudanças. O movimento é tratado como feedback, não como decoração.
O que mudar primeiro em Glow Features
A parte reaproveitável é a composição; o assunto é seu. Troque o título, mantenha a escala tipográfica (um tamanho de display fixo de 14px) e teste de novo o destaque #FF3D77 sobre a sua própria mídia. Se um elemento novo não ajuda a explicar a oferta ou o próximo passo, ele pertence abaixo da dobra. O assunto é a parte que deve mudar.
Como a seção de recursos se reorganiza
O briefing descreve o que muda em cada largura (a escala é fluida, não em degraus), ou seja, a versão de celular é uma decisão, não um espremer. O contraste se mantém no destaque #FF3D77 sobre a mídia, e o vídeo é mudo e roda inline. A hierarquia é o que sobrevive à reorganização.
O que esta seção de recursos acerta
3.072 caracteres de briefing produzem uma tela sem enchimento. Os valores nele são explícitos (um tamanho de display fixo de 14px e passos de espaçamento de 40px), e é por isso que a composição continua legível quando as palavras mudam. Glow Features enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
O prompt de Glow Features é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 3.072 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.
O briefing de Glow Features é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 3.072 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Preciso de React e Tailwind CSS para reconstruir Glow Features?
Glow Features 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.
