SITE
As quatro ferramentas do site, com links
Claude Code, a skill UI UX Pro Max, o 21st.dev e o Motion (antigo Framer Motion) trabalham no mesmo projeto: um constrói, outro cuida do visual, o terceiro dá as seções prontas e o quarto anima. Abaixo estão o link oficial e a instalação de cada um.
Para quem quer montar landing page ou site sem depender de programador. Precisa do Claude Code, que exige plano pago do Claude, e do Node.js no computador.
Passo a passo
Instale o Claude Code
Siga a página oficial de instalação. No Mac e no Linux é um comando no terminal, que está no bloco de copiar. Depois entre com a sua conta do Claude.
Adicione a skill UI UX Pro Max
Dentro do Claude Code, rode os dois comandos da skill, um por vez. Ela dá ao Claude um repertório de estilos, paletas e combinações de fonte para escolher conforme o tipo de negócio.
Pegue uma seção no 21st.dev
Navegue pelas seções prontas (abertura, preços, depoimentos), abra a que gostar e clique em Copy prompt. Cole no Claude Code e ele reconstrói a seção dentro do seu projeto.
Instale o Motion
É a biblioteca de animação que se chamava Framer Motion. Peça ao Claude Code para instalar no projeto ou rode o comando do bloco de copiar.
Descreva o site
Cole o prompt do site com os dados do seu negócio. O Claude Code monta a página usando as quatro peças.
Confira no celular antes de publicar
Abra a página na largura de um celular, clique em todos os botões e leia todos os textos. Peça correção do que estiver apertado, lento ou exagerado.
Prompts para copiar
Instalar o Claude Code (Mac e Linux, no terminal)
curl -fsSL https://claude.ai/install.sh | bash
Instalar a skill UI UX Pro Max (um comando por vez, dentro do Claude Code)
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Instalar o Motion (terminal, na pasta do projeto)
npm install motion
Prompt do site
Você é designer e desenvolvedor front-end e vai construir uma landing page nesta pasta. Contexto: o negócio é [SEU NEGÓCIO], em [CIDADE]. O cliente é [QUEM É]. A página existe para [OBJETIVO: AGENDAR PELO WHATSAPP, PEDIR ORÇAMENTO, COMPRAR]. A oferta é [OFERTA]. As cores e a logo são [DESCREVA OU DIGA ONDE ESTÃO OS ARQUIVOS]. Os textos e as provas reais são: [COLE DEPOIMENTOS, NÚMEROS, ENDEREÇO, TELEFONE]. Tarefa: use a skill UI UX Pro Max para escolher estilo, paleta e fontes adequados a esse tipo de negócio. Monte a página em React com estas seções: abertura com a promessa e o botão, serviços, prova, como funciona, perguntas frequentes e contato. Anime a entrada das seções com a biblioteca Motion, de forma discreta. Se eu colar o prompt de uma seção do 21st.dev, use essa seção no lugar da sua. Formato: antes de escrever código, me mostre em lista o estilo escolhido, a paleta, as fontes e a ordem das seções, e espere eu aprovar. No fim, diga como abrir a página no meu computador. Não faça: não invente depoimento, número nem selo. Não use texto de enchimento. Não ponha animação que atrapalhe a leitura ou deixe a página lenta no celular. Não diga que terminou sem abrir a página e conferir na largura de 390 pixels.
Links
- Claude CodeInstalação oficial do Claude Code no terminal.
- UI UX Pro MaxSkill aberta que dá repertório de design ao Claude Code.
- 21st.devCatálogo de componentes e seções prontas, com botão de copiar o prompt.
- MotionBiblioteca de animação para React, antes chamada Framer Motion.
O Framer Motion mudou de nome para Motion. O comando de instalação hoje é npm install motion.
No 21st.dev, navegar é gratuito e há um limite diário de cópias sem assinatura. Confira o limite na página.
As ferramentas entregam o visual. Texto, oferta e prova continuam sendo seus, e são eles que fazem a página vender.
Conferido em 14/11/2026. Ferramenta muda rápido: se algo não bater, me avisa no direct.