Aqui estão os dois prompts do vídeo, prontos pra copiar: o que criou o site inteiro e o que refez a primeira dobra com uma animação de verdade. Logo abaixo de cada um tem a explicação do raciocínio, pra você adaptar pro seu produto em vez de só colar.
Esse foi o primeiro prompt, enviado junto com os prints do produto. No meu caso, a extensão NÃO CORTEI, um plugin que corta os silêncios do vídeo no Premiere.
Vamos criar uma landing page para esse produto que acabei de criar. No print 1, você consegue ter mais detalhes do funcionamento da extensão e também detalhes que irão servir para criar a copy que vamos usar na página do produto. O meu foco nesta página é conseguir apresentar os benefícios para criadores de conteúdo e também para editores de vídeo, que serão os maiores usuários dessa ferramenta. Para a criação do site, gostei muito desse que encontrei e imagino que podemos criar seguindo o formato que ele apresenta (site citado: https://cal.com/pt/). Gostei muito das cores, da fonte e também das animações. Quero que você aproveite tudo que tem nessa página para ser o ponto de partida da criação da nossa. Para esse trabalho iremos usar HTML, CSS e JavaScript. Caso você perceba que precisará de outra linguagem para fazer algo, por favor me comunique para que possamos debater como seguir. Me faça mais 5 perguntas sobre a construção da página para garantirmos que estamos alinhados com o que desejamos obter de resultado final. Caso você perceba que precisa de mais animações, aqui está um banco de animações em JavaScript e CSS: https://naocodei.com/free-code/
Mesmo prompt, com os trechos em laranja pra você trocar pelo seu produto, seu público e sua referência.
Vamos criar uma landing page para [o seu produto ou serviço]. Nos prints que enviei, você consegue ter mais detalhes do funcionamento do produto e também detalhes que irão servir para criar a copy que vamos usar na página. O meu foco nesta página é conseguir apresentar os benefícios para [o seu público principal] e também para [o seu público secundário], que serão os maiores usuários. Para a criação do site, gostei muito desse que encontrei e imagino que podemos criar seguindo o formato que ele apresenta (site citado: [link do site de referência]). Gostei muito [do que você gostou: cores, fonte, animações, organização]. Quero que você aproveite tudo que tem nessa página para ser o ponto de partida da criação da nossa. Para esse trabalho iremos usar HTML, CSS e JavaScript. Caso você perceba que precisará de outra linguagem para fazer algo, por favor me comunique para que possamos debater como seguir. Me faça mais 5 perguntas sobre a construção da página para garantirmos que estamos alinhados com o que desejamos obter de resultado final. Caso você perceba que precisa de mais animações, aqui está um banco de animações em JavaScript e CSS: https://naocodei.com/free-code/
O primeiro resultado veio com boa estrutura, mas a primeira dobra era só um print da interface, sem impacto nenhum. Em vez de desistir, eu pedi pra trocar por uma animação feita a partir do próprio produto. Eu falei esse prompt por voz no microfone do Codex, aqui ele está organizado em texto.
Não gostei muito dessa hero que você me trouxe. Eu não queria que fosse um print da interface da minha extensão, queria que fosse uma animação. Por exemplo: no print do produto que te enviei, na configuração número 2, aparece toda a linha de áudio. A gente poderia fazer uma animação dessa linha de áudio e colocar como a hero, com os benefícios do produto aparecendo em pílulas flutuando ou algo do tipo. Seria muito mais impactante ter uma animação logo no começo do site do que só a interface do produto. Pensando nisso, utilize JavaScript para criar uma animação bem estruturada para a nossa hero.
continue estudando
O prompt zero de identidade visual e os 7 blocos pra montar uma página animada inteira no Claude Design.
abrir → FerramentasO que o CSS sozinho não faz: rolagem com precisão, inércia e sequências reversíveis, tudo sem instalar biblioteca.
abrir → PromptsOs três prompts que foram iguais pro Claude e pro Codex no comparativo, pra você repetir o teste por conta própria.
abrir →