Sobre este template
Arceage Stats resolve o problema de seção de recursos para um produto de IA ou SaaS com um único briefing capturado. O título da própria página é “Maximize Your Yield”, e a composição é construída em volta exatamente dessas palavras. A paleta é preto #101010 por baixo, com tipografia Instrument Serif. A entrada nomeia a stack que produziu a página (React e Tailwind CSS) em vez de escondê-la. Parta do briefing capturado e depois edite a seção de recursos em vez de reconstruí-la do zero.
Feito para
- Se a referência é só um ponto de partida, os designers podem manter uma moldura em 640x470 e reconstruir o resto da seção de recursos.
- Agências que apresentam um produto de IA ou SaaS seção de recursos e querem um tamanho de display fixo de 56px e passos de espaçamento de 120px citado no deck, para o orçamento ainda valer depois do kickoff.
- Feito para um fundador solo lançando uma seção de recursos para um produto de IA ou SaaS, sem nenhum design system atrás.
O que está incluído
- Toda medida está escrita. A tipografia e o espaçamento saem de uma lista só aqui: um tamanho de display fixo de 56px e passos de espaçamento de 120px. O briefing declara valores, não proporções, então a composição mantém as relações quando o texto muda de tamanho.
- Prova em uma fileira. Os números são compostos em Instrument Serif em um tamanho mais próximo do título do que do corpo de texto. Como os números são tipografia, eles herdam o comportamento responsivo da página em vez de escalar sozinhos. Iguale o tamanho do rótulo ao passo de legenda.
- A composição é o conteúdo. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 640x470 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 640x470, e é por isso que ela se sustenta quando o texto muda.
- Números levados para a construção. O espaçamento é declarado do mesmo jeito (um tamanho de display fixo de 56px e passos de espaçamento de 120px), não como uma escala que cresce sozinha.
Movimento e interação
Quase nenhum movimento
O briefing deixa a animação de fora e deixa o layout em 640x470 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. A quietude é uma escolha válida.
Estático por decisão
Esta é entregue como composição estática em 640x470, então a hierarquia precisa funcionar sem movimento, e funciona.
O que mudar primeiro em Arceage Stats
Comece pelo texto, não pela cor. Reescreva “Maximize Your Yield” como uma frase sobre o seu produto e componha em Instrument Serif no tamanho que o briefing usa. Uma marca diferente pode reaproveitar a moldura inteira.
A ordem por trás da seção de recursos
Aqui, a ordem é o projeto em si. o título, a linha de estatísticas e o clipe de fundo estão posicionados para a oferta chegar antes da prova, e um tamanho de display fixo de 56px e passos de espaçamento de 120px definem a distância entre os dois. O leitor de SaaS recebe a oferta antes das opções.
O que um produto de IA ou SaaS ganha aqui
A contenção custa espaço para prova acima da dobra. Este briefing aceita esse custo e gasta a primeira tela com a oferta, com um tamanho de display fixo de 56px e passos de espaçamento de 120px fixadas para que uma seção de prova seja acrescentada abaixo sem retrabalho. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Perguntas frequentes
O que o briefing por trás de Arceage Stats contém de fato?
O briefing capturado tem 7.826 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 Arceage Stats é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 7.826 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Posso reconstruir seção de recursos do Arceage Stats em outra stack?
Arceage Stats 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.
