O que você recebe
- Dois ou três mockups de página inteira em direções de arte diferentes, de uma biblioteca de dez
- O design escolhido como página estática ou como componentes no seu projeto, com texto real
- Imagens de hero e de seção refeitas limpas no tamanho certo, exportadas em WebP responsivo
- Capturas de desktop e de celular, uma comparação lado a lado com o mockup e um relatório de QA
- Um relatório de lint de hábitos de máquina, com as correções aplicadas
Ideal para
- Landing pages de startups, apps e produtos
- Páginas de lançamento e de lista de espera que precisam de um visual distinto
- Redesenho de uma página que parece um modelo genérico
Não é para
- Construções pixel a pixel a partir de um arquivo de design existente
- Sites de várias páginas com lógica de app ou CMS
- Modelos de e-mail
Como usar
No Claude ou no ChatGPT
Use a skill da PopNow “Landing page a partir de mockups com IA” (landing-page-from-mockup) para isto: Landing page do Lumen Notes, um app de notas em texto puro que sugere notas relacionadas enquanto você escreve. Grátis em um dispositivo, Pro por US$ 6 ao mês. Ainda não temos depoimentos.
Em um agente de programação
/popnow-landing-page-from-mockup Landing page do Lumen Notes, um app de notas em texto puro que sugere notas relacionadas enquanto você escreve. Grátis em um dispositivo, Pro por US$ 6 ao mês. Ainda não temos depoimentos.
Depois tente
Use o hero do mockup B e a tabela de preços do mockup A.
Construa no nosso projeto Astro, dentro de site/, e rode a revisão de novo.
O que ter em mãos
- Nome do produto, público e a promessa do título
- De três a quatro recursos, cada um com um detalhe concreto, além de planos e preços
- Provas que você sustente, como citações, números ou fatos reais de clientes
- Uma chave de API do PopNow e o seu DESIGN.md, se a marca já estiver definida
Skills parecidas
Ver todas →Criador de avatar 3D
+3Monte um personagem 3D fofo de pelúcia no navegador e salve como PNG transparente ou página 3D.
Calendário heatmap
+3Um ano de atividade diária em uma grade de calendário sombreada, com sequências, totais e navegação por teclado.
Landing page de SaaS com IA
+3Papel areia, trilhos finos e um quadro kanban ao vivo em que um assistente planeja tarefas.
Seção hero animada
+3Um hero de landing page com uma palavra do título que gira suavemente, dois botões e um quadro largo de imagem.
Site de agência com hero em shader
+3Hero de shader laranja ao vivo atrás de uma frase fixada, navegação em pílula e uma grade de cases.
Landing page SaaS escura
+3Um site de marketing escuro e cheio de movimento para um produto de software, entregue em um único arquivo HTML.
Site de portfólio de designer
+3Seis cartões inclinados em volta de um título sobre cinza calmo, um retrato em vermelho e cases editoriais.
Site de portfólio para desenvolvedor
+3Um site pessoal escuro para engenheiros, com cases, artigos, palestras, currículo e formulário de contato.
Site editorial de SaaS
+3Hero dividido em azul-marinho, título serifado ao lado de uma foto documental e um destaque azul-cobalto.
Modelo de site glassmorphism
+3Pílulas de vidro fosco sobre película quase preta, título serifado enorme e captura de e-mail.
Site de produto de hardware
+3Nomes de modelo enormes e finos sobre fotos prateadas, cartões de especificação e linha em escala.
Diagrama de arquitetura interativo
+3Um diagrama de sistema offline e clicável, feito a partir de um modelo JSON verificado, com a evidência por trás de cada caixa.
Hero interativo com grade
+3Uma grade escura de fios finos que se curva em direção ao cursor e lança um anel luminoso a cada clique.
Explorador de grafo de conhecimento
+3Transforme anotações de projeto em um grafo offline e pesquisável, em que cada afirmação leva à linha de origem.
Modelo de dashboard de KPIs
+3Quatro cartões de KPI com variação, um gráfico de linha, detalhamento e barras de meta em papel quente.
Template de site de revista
+3Um site de revista com qualidade de impresso, com artigos, temas, uma pequena loja e assinaturas, em um arquivo HTML.
Hero com animação de partículas
+3Texto em papel quente ao lado de uma esfera girando de pontos em tinta e azul-petróleo, que muda a cada ideia.
Site de marca pessoal
+3Um retrato esfumado sobre papel quente, sob um colchete fino, com afirmações claras e fortes de cada lado.
Página de lançamento de produto cinematográfica
+3Página quase preta com luz de cinema: título em serifa, cena noturna em letterbox e formulário de reserva.
Template de painel administrativo
+3Um painel de back-office funcional com gráficos, tabelas, kanban e calendário, em um único arquivo HTML offline.
Template de landing page SaaS
+3Um site de marketing claro e tranquilo para um produto de software, com console de produto funcional, preços e cadastro.
Site de portfólio estilo scrapbook
+3Um currículo online de várias páginas feito de objetos de papel, com cases e um currículo para imprimir.
Template de site de loja de tênis
+3Uma loja completa de calçados ou roupas, com catálogo, páginas de produto, sacola e checkout de demonstração em um arquivo HTML.
Landing page de automação de fluxos
+3Página grafite com título pequeno e um grafo de nós ao vivo que roda, tenta de novo e mostra logs.
Perguntas
Por que fazer mockups antes de escrever código?
Escolher entre páginas com cara de prontas é mais rápido e mais honesto do que descrever um estilo com palavras. Também dá à construção um alvo concreto, então a comparação de capturas pode dizer exatamente onde o código se afastou.
O que o PopNow gera e quanto custa?
Os mockups (cerca de 30 a 35 créditos cada) e, se quiser, imagens limpas de hero e de seção (cerca de 35 a 75 créditos cada). Uma execução completa típica fica em torno de 275 créditos; o modo leve com um mockup custa cerca de 35. Cada geração é cotada antes e só roda depois da sua confirmação.
Preciso instalar algo?
Node e Python 3, além de um Chrome, Chromium ou Edge local para as capturas. O Playwright é usado se o seu projeto já o tiver. Não há outras dependências.
A página vai conter texto das imagens do mockup?
Não. Mockups são imagens, e o texto pequeno delas pode sair embaralhado. Títulos, recursos, preços e FAQ vêm do seu briefing, e o que o agente teve que redigir é listado para você confirmar.