Crie sua página.
Com texto e direção.

O que você vai conseguir fazer

Instalar duas skills, organizar as informações do seu negócio, escrever a página e pedir uma prévia para revisar. Uma skill é um conjunto de instruções e referências que orienta a IA em uma tarefa.

Você não precisa instalar os pacotes inteiros. Vamos escolher só as duas skills usadas neste material. Hospedagem, domínio e publicação são uma etapa posterior.

Duas skills. Dois trabalhos.

O texto dos arquivos originais pode estar em inglês. Você pode conversar e pedir os resultados em português.

Instalar no Claude Code

1. Abra a pasta da sua página

   Crie uma pasta chamada minha-pagina e abra essa pasta como projeto no Claude Code. Abra o terminal nessa mesma pasta. Os arquivos da página e as skills ficarão juntos.

2. Confira os requisitos

   Você precisa de Node.js 22.20 ou mais recente e Git instalados. Depois de instalar, feche e abra o terminal.

   Copiar

   node --version
   git --version

   Selecionar texto

3. Instale as duas skills

   Copie o bloco do seu sistema e execute no terminal. Espere a primeira instalação terminar antes de executar a segunda. Os comandos instalam somente copywriting e frontend-design neste projeto.

   Windows · PowerShell

   Copiar

   npx.cmd --yes skills add coreyhaines31/marketingskills --skill copywriting --agent claude-code --copy --yes
   npx.cmd --yes skills add anthropics/skills --skill frontend-design --agent claude-code --copy --yes

   Selecionar texto

   macOS e Linux · Terminal

   Copiar

   npx --yes skills add coreyhaines31/marketingskills --skill copywriting --agent claude-code --copy --yes
   npx --yes skills add anthropics/skills --skill frontend-design --agent claude-code --copy --yes

   Selecionar texto

   Usamos --copy para copiar os arquivos sem depender de links simbólicos. Sem --global, a instalação fica restrita à pasta aberta. As opções --yes aceitam os avisos do instalador; confira os repositórios acima antes de executar.

4. Confira os arquivos e faça um teste

   Na pasta do projeto, você deve encontrar:

   Copiar

   .claude/skills/copywriting/SKILL.md
   .claude/skills/frontend-design/SKILL.md

   Selecionar texto

   Se não aparecerem na ferramenta, inicie uma nova conversa nesse projeto. Depois envie:

   Copiar

   /copywriting
   /frontend-design
   Confirme que você encontrou as duas skills neste projeto. Diga de qual caminho carregou cada SKILL.md. Depois, me faça as perguntas necessárias para criar uma página de vendas. Não crie a página ainda.

   Selecionar texto

   Primeiro confirme os arquivos. Uma resposta dizendo “instalado” sozinha não comprova a instalação.

Instalar no Codex

1. Abra a pasta da sua página

   Crie uma pasta chamada minha-pagina e abra essa pasta como projeto no Codex. Abra o terminal nessa mesma pasta. Os arquivos da página e as skills ficarão juntos.

2. Confira os requisitos

   Você precisa de Node.js 22.20 ou mais recente e Git instalados. Depois de instalar, feche e abra o terminal.

   Copiar

   node --version
   git --version

   Selecionar texto

3. Instale as duas skills

   Copie o bloco do seu sistema e execute no terminal. Espere a primeira instalação terminar antes de executar a segunda. Os comandos instalam somente copywriting e frontend-design neste projeto.

   Windows · PowerShell

   Copiar

   npx.cmd --yes skills add coreyhaines31/marketingskills --skill copywriting --agent codex --copy --yes
   npx.cmd --yes skills add anthropics/skills --skill frontend-design --agent codex --copy --yes

   Selecionar texto

   macOS e Linux · Terminal

   Copiar

   npx --yes skills add coreyhaines31/marketingskills --skill copywriting --agent codex --copy --yes
   npx --yes skills add anthropics/skills --skill frontend-design --agent codex --copy --yes

   Selecionar texto

   Usamos --copy para copiar os arquivos sem depender de links simbólicos. Sem --global, a instalação fica restrita à pasta aberta. As opções --yes aceitam os avisos do instalador; confira os repositórios acima antes de executar.

4. Confira os arquivos e faça um teste

   Na pasta do projeto, você deve encontrar:

   Copiar

   .agents/skills/copywriting/SKILL.md
   .agents/skills/frontend-design/SKILL.md

   Selecionar texto

   Se não aparecerem na ferramenta, inicie uma nova conversa nesse projeto. Depois envie:

   Copiar

   $copywriting $frontend-design
   Confirme que você encontrou as duas skills neste projeto. Diga de qual caminho carregou cada SKILL.md. Depois, me faça as perguntas necessárias para criar uma página de vendas. Não crie a página ainda.

   Selecionar texto

   Primeiro confirme os arquivos. Uma resposta dizendo “instalado” sozinha não comprova a instalação.

Prefere instalar sem comando?

Você também pode copiar as pastas pelo explorador de arquivos. Esse caminho não precisa do instalador skills, do Node.js nem do Git para baixar os arquivos.

1. Abra os repositórios marketingskills e anthropics/skills. Em cada um, clique em Code → Download ZIP e extraia o arquivo.
2. Na pasta extraída de marketingskills, abra skills e copie a pasta inteira copywriting, incluindo references. Na de anthropics/skills, copie skills/frontend-design inteira, incluindo a licença.
3. Dentro da pasta da sua página, crie .claude/skills para Claude Code ou .agents/skills para Codex. Copie as duas pastas para esse destino. Se já houver uma skill com o mesmo nome, guarde uma cópia antes de substituir.
4. O arquivo deve ficar diretamente em copywriting/SKILL.md e frontend-design/SKILL.md, sem uma pasta repetida no meio. Preserve os arquivos de licença dos autores ao guardar ou redistribuir os materiais.
5. Volte ao projeto na ferramenta, inicie uma nova conversa se necessário e faça o teste descrito na seção de instalação.

Da instalação à sua primeira página.

Use os prompts nesta ordem, na mesma conversa e no projeto em que instalou as skills. Troque os campos entre colchetes pelos dados do seu negócio.

Quero criar uma página para meu negócio. Antes de escrever ou programar, me faça as perguntas que faltam, uma por vez.

O que vendo: [produto ou serviço]
Público: [quem quero atender]
Problema que resolvo: [situação concreta]
Oferta: [o que a pessoa recebe, preço se já estiver definido e condições]
Diferencial: [o que consigo comprovar]
Provas disponíveis: [depoimentos autorizados, dados reais ou nenhuma]
Ação principal: [comprar, agendar ou falar no WhatsApp]
Link do botão: [URL correta]
Minha marca: [cores, fontes, fotos e referências]
Tom de voz: [cole 2 ou 3 exemplos de textos seus]

Não invente resultados, depoimentos, clientes ou garantias. Se faltar alguma informação, pergunte.

Use a skill copywriting e o briefing desta conversa.
Escreva o texto da minha página: título, apoio, oferta, benefícios concretos, como funciona, dúvidas frequentes e chamada para a ação.
Defina uma ação principal e mantenha o texto em português, com o meu tom de voz.
Use somente as provas e condições que forneci. Não invente números, depoimentos, clientes ou garantias.
Mostre primeiro a estrutura e o texto. Espere minha revisão antes de criar o layout.

Use a skill frontend-design e o texto que revisei nesta conversa.
Crie a página na pasta deste projeto. Se já existir um site, siga a estrutura e a identidade dele.
Se o projeto estiver vazio, use HTML, CSS e JavaScript simples, sem dependências desnecessárias.
Organize a hierarquia: oferta clara, informações fáceis de encontrar e botão principal visível. Preserve minhas cores, minhas fotos e o meu tom de voz.
Faça a página funcionar no celular e no computador. Use imagens reais que eu fornecer; peça as que faltarem.
Abra uma prévia local e informe os arquivos criados e como visualizar. Não publique ainda.

Revise a página deste projeto em larguras de 390 px e 1440 px.
Confira legibilidade, contraste, hierarquia, navegação por teclado, rolagem horizontal e área de toque dos botões.
Verifique se todos os botões levam aos links corretos e se as informações correspondem ao briefing.
Se houver formulário, confira o destino dos dados. Se não existir uma integração real, identifique o formulário como demonstração; não simule um envio concluído.
Corrija os problemas encontrados e mostre o que mudou. Não publique nem envie dados de teste para terceiros.

Exemplo fictício para testar o fluxo, sem números ou resultados reais.
Quero uma página para o Estúdio Forma, um serviço de projetos de interiores residenciais.
Público: pessoas que vão reformar um apartamento e querem entender o processo antes de contratar.
Oferta: conversa inicial para explicar as etapas, conhecer a necessidade e avaliar o escopo. Preço do projeto definido depois da análise.
Ação principal: solicitar essa conversa. Ainda não tenho um link; deixe o botão sem envio real e me peça a URL antes de publicar.
Provas disponíveis: nenhuma. Não crie depoimentos nem quantidade de projetos.
Tom: claro, próximo e profissional. Visual: tons claros, preto e um destaque amarelo discreto.
Use copywriting para propor o texto. Depois que eu revisar, use frontend-design para criar uma prévia responsiva. Faça perguntas sobre o que faltar.

Guardar os prompts em TXT

Se algo não funcionar

Origem e créditos

As skills são dos autores abaixo. A curadoria, as instruções em português e os prompts deste guia são de Weslley Alves / Método MAC.

• copywriting · Corey Haines · Licença MIT.
• frontend-design · Anthropic · Licença Apache 2.0.
• Instalador skills · Vercel Labs · Referência dos comandos.
• Skills no Claude Code · documentação oficial.
• Skills no Codex · documentação oficial.

Fontes conferidas em 26/10/2026. Os comandos baixam a versão disponível no repositório no momento da instalação. As interfaces e os arquivos dos autores podem mudar.

Material independente, sem vínculo com Anthropic, OpenAI ou Vercel. Não há promessa de conversão, vendas ou resultado financeiro.