Sites feitos com IA. Sem cara de IA.

Aponte a extensão para qualquer site que você admira. Ela mede cores, tipografia, espaçamento e movimento, e monta a pasta final para o Claude Code ou o Codex construírem a partir dali.

O resultado tem cara de agência, não de template.

Ver o que sai na pasta Quero fazer sites assim

Chrome e Edge · Pagamento único de R$ 97 · 7 dias de garantia

Constrói com a IA de código que você já usa

  • Claude Code Claude Code
  • Codex Codex
  • Cursor Cursor
  • Antigravity Antigravity
  • VS Code VS Code
Página do projeto Ciclos de Pausa construída a partir de uma extração da extensão
Uma página real, montada em uma tarde a partir de duas referências medidas.

Todo mundo quer te ensinar a fazer site com IA. Ninguém te ajuda com o que trava de verdade.

Você abre o editor, não sabe por onde começar e acaba caindo sempre no mesmo prompt genérico. O que volta é gradiente roxo com grid de três cards feios, um resultado que qualquer um faz e todo mundo percebe.

Você testa uma skill nova toda semana e as páginas continuam sem personalidade. Na hora de entregar, o portfólio só tem projeto genérico, e aí você é obrigado a cobrar barato.

O que trava não é o código. É a decisão visual que ninguém te deu pronta.

Trabalhar sem processo e trabalhar com a extensão

Sem um processo

Você briga com a IA

  • O mesmo prompt genérico em todo projeto
  • Gradiente roxo e grid de três cards feios
  • Headline quebrando em quatro linhas no celular
  • Portfólio que não justifica o seu orçamento

Com o HTMLmentor Extract

A IA recebe a direção pronta

  • Direção visual medida de um site que já funciona
  • Texto já dimensionado para o tamanho de cada bloco
  • Responsividade e movimento documentados
  • Uma pasta que a IA lê e executa em um comando

É para você se

  • Você monta site para negócio local, como barbearia, academia, estúdio ou restaurante, e precisa de um resultado que justifique o orçamento.
  • Você já usa Codex, Claude Code, Cursor ou Antigravity e cansou de receber sempre a mesma página genérica de volta.
  • Você não é designer, mas reconhece um site bonito e quer chegar nesse nível sem passar dois anos estudando.
  • Você precisa de portfólio agora e não tem cliente pagando para praticar.

Não é para você se

  • Você quer um botão que cospe o site pronto sem você olhar, decidir nem revisar nada.
  • Você não tem nem pretende ter acesso a uma IA de código. A extensão prepara o trabalho, mas quem executa é ela.
  • Você procura um curso de programação do zero. Aqui é ferramenta de produção, não aula.
  • Você quer clonar o site de alguém e vender como se fosse seu. A extensão mede direção visual, não rouba conteúdo nem marca.

Como funciona

Três passos. Um site pronto pra vender.

Você escolhe a referência e o texto. A extensão monta a pasta final. O Claude Code ou o Codex parte dali para construir. Não precisa dominar design, código e SEO antes de começar.

Passo 1

Abra um site e clique em extrair.

Em segundos a extensão mede cores, fontes, espaçamentos, seções, responsividade e animações. A direção visual inteira sai documentada, sem você precisar saber o nome de nada disso.

Passo 2

Diga o que a página precisa falar.

Cole um documento, aproveite o site antigo do cliente ou responda ao questionário. A ferramenta ajusta o texto ao tamanho do layout. Nada de headline estourando o card no celular.

Passo 3

Abra a pasta no Claude Code ou Codex.

Manda ler e executar o STARTER.md. A IA monta, revisa e devolve a página pronta para você editar e publicar. Um comando, não trinta prompts.

O que você recebe

O que aparece na sua pasta depois de um clique.

É isso que a IA de código lê antes de escrever a primeira linha. Sem essas decisões prontas, ela inventa as dela.

Direção visual medida

Cores, tipografia, escala de texto e espaçamento do site que você escolheu, anotados em número. Não em estilo moderno e clean.

Ilustração da pasta final reunindo tipografia, layout, imagens e código

O mapa das seções

Quantas seções a referência tem, em que ordem aparecem e a proporção de cada uma. O esqueleto da página antes de existir código.

Responsividade e movimento

Como a página se comporta no celular e o que acontece no scroll, descrito para a IA reproduzir sem chutar.

Seu texto, já dimensionado

O conteúdo fatiado por seção, com limite de tamanho por bloco, para nada estourar card, headline ou botão.

O STARTER.md pronto

O arquivo que a IA lê primeiro. Um comando no Codex ou no Claude Code e ela começa a construir a partir dali.

A pasta final

Tudo junto em um diretório que você abre no editor e entrega para a IA. Continua seu, editável, sem plataforma no meio do caminho.

Três passos para gerar isso. Uma tarde para ter a página no ar.

Quero rodar esse processo

Vantagens

Uma tarde de trabalho, não duas semanas.

Poupe horas de trabalho manual e chegue a uma página profissional desde o primeiro prompt.

Entregue no mesmo dia

Da referência ao site no ar em uma tarde. Dá para fechar e entregar no mesmo fim de semana.

Misture referências

Layout de um site, tipografia de outro, movimento de um terceiro. Sai uma síntese, não uma cópia.

Texto no tamanho certo

Nada de headline quebrando em quatro linhas nem card com o dobro de texto do vizinho.

Edite do seu jeito

Mexa no código, no editor visual ou peça o ajuste para a IA. A base é sua, não fica presa em plataforma nenhuma.

Use a IA que já paga

Roda no Claude Code ou no Codex que você já assina. Sem chave de API, sem crédito por uso, sem limite da extensão.

Publique sem medo

HTML limpo, estrutura semântica e responsividade revisada. Nada de site quebrando no celular do cliente.

O diferencial

A proposta não é copiar. É combinar referências.

Você escolhe de onde vem cada camada. A ferramenta organiza as decisões e mantém o seu texto, as suas imagens e o objetivo do projeto no centro.

Ilustração da camada de layout: seções, proporção e respiro entre blocos

Layout

Ordem das seções, proporção, respiro entre blocos e o que aparece primeiro.

Ilustração da camada de tipografia e movimento: escala de texto e transições

Tipografia e movimento

Tamanho dos textos, transições e como as coisas entram na tela no scroll.

Ilustração da camada de conteúdo: o texto e as imagens que continuam sendo suas

Conteúdo

O conteúdo é seu. A referência dá a forma, nunca a marca nem o que a página fala.

Uma página com direção própria.

  • Combina sem clonar
  • Preserva seu conteúdo
  • Continua totalmente editável

Portfólio

Três páginas reais. E o processo que gerou cada uma.

Veja as referências que entraram, de onde veio o texto e quantos prompts foram até a versão final. Sem número inventado.

Prévia da página do projeto Ciclos de Pausa

Ciclos de Pausa

Duas referências de Webflow viraram um site institucional calmo, com o conteúdo que o projeto já tinha. Nenhuma linha escrita do zero.

Prévia da página do projeto Comunidade GG

Comunidade GG

Uma oferta gigante de nutrição reorganizada em uma página de vendas direta e visual. Quinze minutos, três prompts.

Prévia da página do produto HTMLmentor Extract

HTMLmentor Extract

A página da própria extensão, montada com decisões visuais de três sites diferentes. Nenhum deles parece com o resultado.

Também saíram do mesmo processo

  • Andfold
  • Healia WBS
  • Reels WBS
  • Augment MBA
  • Creator College
  • Ovo Pretty
Criar meu primeiro site

Não é teoria. Já está rodando.

Eduardo Sant, criador do HTMLmentor Extract

Quem construiu

A extensão nasceu do método que eu desenvolvi ao longo de dezenas de projetos entregues a clientes diferentes. Todo o trabalho artesanal de criar uma landing page, resumido ao clique de um botão.

De onde vem a direção

A página não nasce de um prompt genérico. Nasce de uma direção visual real, medida de um site que já funciona lá fora. A extensão prepara o contexto, o Claude Code ou o Codex constrói, e a pasta final já diz o que conferir no fim.

Referência deixa de ser só print salvo e vira instrução clara para a IA montar um site que você tem orgulho de mostrar.

Oferta

Preço de lançamento. Pagamento único.

Uma tarde do seu trabalho custa mais que isso. Quando o lançamento fechar, o valor sobe.

HTMLmentor Extract

R$ 97 pagamento único

A extensão que mede o site aberto na sua tela e monta a pasta final para a IA de código construir a partir dela.

  • Direção criativa por seção
  • Texto ajustado ao layout
  • Pasta final pronta para Codex, Claude Code, Cursor ou Antigravity
  • Animações e responsividade documentadas
  • Atualizações incluídas por 1 ano

Chrome Edge Funciona no Chrome e no Edge

O que vem junto

Incluso sem custo extra

Material de apoio para você sair do zero e não travar em nenhuma etapa do processo.

  • Aula de configuração do ambiente para usar a extensão
  • Tutorial completo, da extração à sua primeira página pronta
  • Biblioteca de referências curadas: sites, assets, botões, efeitos, cursores e tipografias
  • Cofre de prompts para otimizar a sua página
  • Acesso ao LP Check, a extensão que revisa a qualidade da sua página
  • Aula de SEO, tags e analytics para colocar o site no Google em breve
  • Aula de hospedagem, colocando a sua página no ar em breve
Garantir meu acesso

Acesso enviado por e-mail pela Kiwify.

Dúvidas

O que todo mundo pergunta antes de comprar.

Se a sua dúvida não estiver aqui, provavelmente a resposta é: teste e use os 7 dias de garantia.

Preciso saber programar?

Não. A extensão deixa a pasta final montada. Você abre no Codex, Claude Code, Cursor ou Antigravity, manda construir e a IA escreve o código. A aula de configuração de ambiente vem junto na compra e mostra esse caminho do começo ao fim.

Sou iniciante. Dá para usar mesmo assim?

Dá, desde que você aceite mexer em pasta, terminal e editor de código. Nada muito além disso. O que a extensão elimina é a parte de decisão visual, que costuma ser onde iniciante trava. E o tutorial completo leva você da primeira extração até a página pronta.

Posso usar em projeto de cliente e cobrar por isso?

Pode. A licença é sua e o que sai da extensão é o seu projeto. Você define quanto cobra, como entrega e onde publica. A extensão não aparece no resultado final nem exige crédito.

Isso não é clonar o site dos outros?

Não. O que é medido é direção visual: proporção, escala de texto, espaçamento, ritmo. Você combina camadas de referências diferentes e usa o seu próprio texto e as suas imagens. Conteúdo, logo e marca da referência não vão junto. É justamente a mistura que faz o resultado não parecer nenhum dos originais.

Qual IA de código eu preciso ter?

Claude Code, Codex, Cursor ou Antigravity. A extensão prepara a pasta final e a IA de código constrói a partir dela. Não precisa de chave de API, crédito avulso nem assinatura extra além da que você já usa.

E se o resultado sair com cara de IA mesmo assim?

É exatamente o problema que a ferramenta resolve. Cara de IA aparece quando a IA precisa inventar a direção visual sozinha. Aqui ela recebe a direção pronta, medida de um site que já funciona, e o texto já dimensionado para o layout. Ela executa em vez de chutar.

Funciona em qual navegador?

Chrome e Edge. A medição da página e a montagem da pasta final dependem de recursos que só esses navegadores oferecem hoje.

A página já sai pronta para o Google?

A pasta final já exige estrutura semântica, metadados de SEO, responsividade e revisão técnica. A parte que continua com você é conectar domínio, hospedagem e as ferramentas de busca. Para isso vêm junto a aula de SEO, tags e analytics, e a de hospedagem.

Como recebo o acesso depois de comprar?

A compra é processada pela Kiwify. Assim que confirma, você recebe por e-mail o acesso à extensão, aos bônus e as instruções de instalação.

Dúvida respondida? O próximo passo é escolher o primeiro site para extrair.

Garantir minha extensão
Selo de 7 dias de garantia

Você tem 7 dias para decidir.

Instale, extraia um site que você admira e rode o processo inteiro. Se não for o que você esperava, peça o reembolso em até 7 dias. Sem precisar explicar o motivo.

Começar agora por R$ 97

Acesso imediato · 1 ano de atualizações · Projetos ilimitados