Landing page no Claude sem programar: a skill grátis landing-page-design
Um arquivo grátis que ensina o Claude a fazer sua landing page. Primeiro ele pergunta o que falta saber do seu negócio. Depois escreve a estrutura e o texto de venda e define o visual: fonte, espaçamento e movimento. Funciona no Claude.ai, é só anexar o arquivo. Aqui tem o link, o passo a passo e um prompt pronto pra você já chegar com as respostas. Conferido em 28/10/2026.
O Prompt Completo
Anexei nesta conversa o arquivo SKILL.md da skill landing-page-design (github.com/elayadesign/ai-design-skills). Siga esse arquivo para montar a minha página. Se o arquivo não estiver anexado ou você não conseguir ler, diga isso e não invente as regras dele: me diga onde baixar e pare por aí. Já adianto as respostas das perguntas iniciais: - O que eu vendo: [produto ou serviço, em 1 linha. Ex.: "bolo de pote por encomenda em Campinas"] - A ação que eu quero que a pessoa faça: [ex.: chamar no WhatsApp, agendar horário, comprar] - Para quem é: [quem é o cliente e o problema que ele quer resolver] - As 3 dúvidas ou objeções que mais escuto: [1] [2] [3] - De onde a pessoa vem: [Instagram, Google, indicação] - Provas que eu TENHO de verdade: [depoimentos reais, fotos, números reais, garantia. Se não tiver, escreva "nenhuma"] - Jeito de falar da marca: [ex.: próximo e simples, sem gíria] - Cidade ou região que eu atendo: [se for serviço local] Regras minhas, que valem mais que as do arquivo: 1. Não invente depoimento, nome de cliente, logo de empresa nem número. Onde faltar prova, deixe marcado [ESPAÇO PARA DEPOIMENTO REAL] ou [ESPAÇO PARA NÚMERO REAL]. 2. Escreva tudo em português do Brasil, do jeito que o meu cliente fala. 3. Antes de escrever qualquer código, me mostre o plano: estrutura da página, título, subtítulo, botão, benefícios, "como funciona" e perguntas frequentes. Espere o meu ok. 4. Me diga em 1 linha o que ainda ficou faltando eu responder.
O que faz diferença
Conferido em 28/10/2026. A AI Design Skills é uma coleção de skills grátis do perfil elayadesign no GitHub, com licença MIT. Skill é um arquivo de instruções que ensina o Claude a fazer um trabalho de um jeito específico. Por enquanto a coleção tem uma só, a landing-page-design, que monta uma landing page (página de venda) do zero. No dia 28/10/2026 o repositório estava em 2º na lista de tendências do GitHub, com 1.938 estrelas no dia e 11 mil no total. Link oficial: github.com/elayadesign/ai-design-skills O arquivo da skill: github.com/elayadesign/ai-design-skills/blob/main/skills/landing-page-design/SKILL.md O que ela faz o Claude fazer, na ordem: - Antes de desenhar, ele pergunta o que falta saber, tudo de uma vez: qual é a oferta, que ação você quer que a pessoa faça, quem é o cliente, as 3 maiores objeções dele, de onde vem o visitante, que provas você tem (depoimentos, números, fotos) e qual é o tom da marca. Se você não souber responder, ele anuncia a suposição dele em uma linha e segue. - Mostra o plano antes do código: a estrutura da página, o título, o subtítulo e o botão, de 3 a 5 benefícios, um "como funciona" em 3 passos, de 6 a 12 perguntas frequentes e uma sugestão de título e descrição para o Google. - Escreve o texto de venda com regras: benefício antes de característica, botão que diz o que a pessoa ganha (nada de "Saiba mais"), sem palavra vazia do tipo "revolucionário". - Define o visual com regras fixas: quais fontes usar, a escala de espaçamento, o arredondamento dos cantos e como as coisas se movem na tela. - Monta a página seção por seção. O código sai no padrão de quem programa site (React com Tailwind), mas você não precisa entender nada disso para usar. Onde roda: no Claude.ai (no navegador, sem terminal), que é o jeito mais fácil. Também roda no Claude Code, no Cursor, no Codex, no Windsurf e no Cline, cada um com o passo a passo dele no README do GitHub. Passo a passo no Claude.ai (as fotos estão em "Resultados de exemplo", mais abaixo): 1. Abra o arquivo da skill: github.com/elayadesign/ai-design-skills/blob/main/skills/landing-page-design/SKILL.md 2. No canto direito, logo acima do texto, clique no botão de baixar ("Download raw file"). Vai baixar o SKILL.md. 3. No Claude.ai, crie um Projeto e suba o SKILL.md nos arquivos dele. Pra usar uma vez só, também dá pra anexar o arquivo direto na conversa. 4. Peça a sua página e diga para o Claude seguir o arquivo. Ou cole o prompt acima, que já leva as respostas das perguntas iniciais. 5. Responda o que ele perguntar, confira o plano e só depois peça a página. O que ainda não dá: - Sem prova de verdade, a skill manda o Claude preencher a página com depoimentos, nomes de empresa e números "realistas", ou seja, inventados. Troque tudo por coisa real antes de publicar, ou peça para ele deixar o espaço marcado, como no prompt acima. - Ela entrega o plano, o texto e o código da página. Pôr a página no ar, com endereço próprio, é outra etapa, e a skill não faz isso. - O visual tem regras rígidas: ela proíbe algumas fontes muito usadas (Inter, Arial, Roboto, Helvetica) e gradiente no fundo. Se você já tem identidade visual, avise o Claude: o próprio arquivo diz que a sua instrução vale mais que as regras dele. - Só serve para site. App de celular fica de fora. E para reformar um site que já existe, o autor tem outra skill, separada. - O arquivo é em inglês. O Claude entende e responde em português se você pedir. A skill é de um autor independente e não tem ligação com a Anthropic, a empresa do Claude.
Kit Motion
Os vídeos dos meus Reels? Agora você faz igual.
Precisa de computador e de assinatura do Claude (Pro ou Max).
Resultados de exemplo
Você também pode gostar
Hero em vídeo com controle de cena
Hero de tela cheia em vídeo com um controle de vidro: a pessoa escolhe uma versão da cena, a transição toca e para no último quadro, e Voltar toca o reverso.
Hero escuro com anel 3D de cards
Hero de uma tela só: 37 cards girando num anel 3D, um mock de navegador com o seu site na frente e botões com luz no pé. Um index.html, com a sua marca e as suas fotos.
Hero 3D com carrossel animado
O método de 4 etapas que transforma uma referência visual num hero de site implementado: brand kit, imagem de referência, tradução para engenharia e o prompt que o Claude Code executa.
Doory: alternativa grátis ao Canva, sem cadastro, direto no navegador
Fizeram um editor de design grátis que abre no navegador e não pede cadastro pra começar: o Doory. Dá pra fazer post, story, slides, convite, currículo, thumbnail e cartão de visita, animar e baixar em MP4, GIF, PNG, JPG, SVG ou PDF. Aqui tem o link, o passo a passo e um prompt que monta o seu design antes de você abrir o editor. Conferido em 22/10/2026.
