Criei um site com o Claude em uma tarde e o vendi por US$ 10.000. Aqui está o sistema exato.

Gravei o processo completo e depois dividi ele passo a passo para você copiar. O site abaixo parece que um freelancer cobrou cinco dígitos para fazer. Quem visita não consegue dizer que uma IA escreveu o código. Custo total para colocar no ar: cerca de $60.

GIF

Primeiro - a checagem de fatos honesta

Não vou te vender uma fantasia. Então, antes do "como", aqui está o que é real e o que não é.

O que é real:

• O Claude Code escreve o código completo de um site do zero com base na sua descrição. Sem template, então seu site não se parece com todos os outros clones de Wix/Squarespace. Essa é a razão principal pela qual o resultado pode atingir um padrão premium.
• As duas habilidades que eu uso são reais e gratuitas. Uma é frontend-design, construída pela Anthropic — ela roda em segundo plano e bane as fontes e layouts de IA mais usados. A outra é UI/UX Pro Max, uma habilidade da comunidade que vem com dezenas de estilos de UI, paletas de cores e combinações de fontes que você pode usar sob demanda.
• O fluxo de imagem/vídeo é real. O ElevenLabs agora agrega os principais modelos visuais (GPT Image, Google Veo 3.1) mais o upscaling do Topaz dentro de uma única aba — eu verifiquei isso, eles migraram para imagem e vídeo no final de 2025. Então você gera uma imagem estática, anima ela e faz o upscaling sem sair da página.
• O Claude Code está incluído no plano Claude Pro por $20/mês ($17 se for cobrado anualmente). Você não precisa de um plano Max para isso. Confirmado como atual em junho de 2026.
• Hospedagem em um provedor econômico com domínio grátis no primeiro ano custa cerca de $40–45/ano.

O que NÃO é mágico: Os "$10.000" são o valor da entrega, não seu pagamento garantido. Um site como este é o que agências cobram de $5K a $15K para construir. Se você realmente vai ganhar isso depende de você vendê-lo — mais sobre o dinheiro abaixo. Os prompts aqui são pontos de partida, não uma máquina de vendas.

Cada ferramenta mencionada é real. Cada preço está atualizado até junho de 2026.

O que separa um site de $10.000 de um de $200

Antes de construir qualquer coisa, você precisa de um alvo. Perguntei ao Claude o que realmente faz um site parecer caro, e se resume a 8 coisas em 3 grupos:

Bom gosto

1. Ponto de vista — uma direção de design real, não um mood board
2. Tipografia — fontes intencionais (e não as mais usadas)
3. Cor — moderação, no máximo 4–5 valores hex, sem arco-íris

Substância 4. Hierarquia — o tamanho diz ao olho o que ler 1º, 2º, 3º 5. Imagens — personalizadas ou convincentemente geradas por IA, nunca material de banco de imagens 6. Texto — contido, sensorial, escrito como um humano, não uma máquina de adjetivos

Qualidade percebida 7. Movimento — efeitos de cursor e microinterações que fazem parecer vivo 8. Mobile — projetado para celulares, não um desktop encolhido

Guarde esta lista. No final, você avaliará seu próprio site em relação a todos os 8. Essa autoavaliação é o único movimento que separa um resultado polido de um genérico.

Para quem é isso

Isso funciona se você:

• Quer vender sites para negócios locais (restaurantes, academias, clínicas, imobiliárias, etc.) e não sabe programar
• Já é freelancer e quer multiplicar sua produção e seus preços por 10
• Quer um site premium para seu próprio negócio ou marca pessoal
• Pode dedicar uma tarde focada e está disposto a iterar em vez de esperar perfeição com um clique

Isso não é para você se quer um brinquedo de "apertar botão, ganhar dinheiro". A qualidade do seu briefing e sua disposição para insistir quando algo parece sem graça é o trabalho.

O que você precisa (e quanto custa)

Custo total realista para um site finalizado: ~$60 (um mês de Claude Pro + hospedagem + domínio para o ano).

A construção completa, passo a passo

Passo 1 — Configure o Claude Code

Inscreva-se no Claude Pro em claude.com. Baixe o aplicativo para desktop (ícone de download, canto inferior esquerdo → seção Claude Code → aplicativo para desktop → execute o instalador). Faça login.

Mude do modo de chat para o modo de código (aba no canto superior esquerdo, ou Cmd/Ctrl + 3).

Crie uma nova pasta vazia em qualquer lugar do seu computador — este é seu espaço de trabalho. Clique no botão de selecionar pasta perto da caixa de chat e abra-a dentro do aplicativo. O Claude Code funciona melhor quando tem sua própria pasta para trabalhar.

A interface é atualizada com frequência, então, se um botão não estiver exatamente onde descrevi, não entre em pânico — o conceito é o mesmo, apenas encontre o equivalente.

Passo 2 — Aprimore o Claude com duas habilidades

Fora da caixa, o Claude é um generalista. Seu design padrão é ok — ele usa as mesmas fontes e layouts que você já viu em todo site feito por IA. As habilidades resolvem isso.

Instale a habilidade #1 — frontend-design (roda em segundo plano): Cole o link da habilidade frontend-design no Claude Code com:

1Instale esta habilidade globalmente.

Permita as edições quando ele pedir.

Instale a habilidade #2 — UI/UX Pro Max (você a chama sob demanda): Cole o link do UI/UX Pro Max no Claude Code com este texto exato — a redação é importante porque instala de forma limpa pelo terminal:

1Instale este plugin usando npm, globalmente.

Permita as edições.

Passo 3 — Ative o modo automático

No canto inferior esquerdo, abaixo do chat, mude o seletor de modo para modo automático. Isso permite que o Claude trabalhe sem parar para pedir permissão a cada passo. Com o modo automático ativado e ambas as habilidades instaladas, você está pronto para construir.

Passo 4 — Reúna referências (seu atalho para o bom gosto)

Descrever gosto visual com palavras é difícil, especialmente se você é novo em design. Referências resolvem isso: capturas de tela de sites que você gosta e que você entrega ao Claude para que ele combine o estilo. É muito mais fácil mostrar gosto do que descrevê-lo.

Onde eu as encontro:

• Dribbble — onde designers publicam seus trabalhos
• Awwwards — sites premiados, nível muito alto
• Pinterest — pesquise exatamente o que você quer, por exemplo, "design de site de restaurante moderno"

Encontre de 3 a 5 sites que você goste e salve as capturas de tela. Você não está copiando-os — você está mostrando a direção ao Claude.

Passo 5 — O único prompt que constrói o site

Este é o vídeo inteiro em um único movimento. Você chama a habilidade de design, dá o briefing, anexa suas capturas de tela de referência e termina com a linha mágica.

Para minha construção, fiz um site para um restaurante em Seattle. Aqui está a estrutura do prompt — adapte o briefing ao seu projeto:

1/ui-ux-pro-max
2
3Construa um site de página única para [NEGÓCIO — ex.: um steakhouse de alto padrão em Seattle].
4
5Direção: [o estilo em suas próprias palavras — ex.: luxo escuro e sombrio, mas com raízes no
6Pacífico Noroeste, NÃO um steakhouse genérico de Manhattan].
7
8Seções (em ordem): [ex.: hero, filosofia/história, cardápio, o ambiente, reservas].
9Sem galeria, sem sistema de reservas — apenas uma página que rola de cima a baixo.
10
11Estou anexando de 3 a 5 capturas de tela de referência para o estilo visual.
12Combine a *sensação*, não as copie.
13
14Stack técnico: HTML/CSS/JS estático em arquivo único (sem React — mantenha simples).
15
16Antes de escrever qualquer código, faça perguntas esclarecedoras.

Essa última linha — "faça perguntas esclarecedoras" — é o que faz o Claude parar e pensar antes de construir. Ele voltou para mim com cerca de 7 perguntas: o nome, a direção do estilo, quais seções, quem escreve o texto, o stack técnico, o nível de animação e qualquer outra coisa.

A parte que mais importa: o Claude me ofereceu três direções de estilo para escolher, como um menu. Eu escolhi luxo escuro/sombrio com raízes no Pacífico Noroeste, cinco seções, sem galeria, sem reservas — uma página de rolagem.

Este é o momento mais importante de toda a construção. Suas respostas aqui se tornam o site inteiro. Quanto mais específico você for agora, menos você vai lutar contra o Claude depois. Não tenha pressa.

Então envie. O Claude gasta cerca de 3 minutos lendo e planejando antes de escrever uma linha, depois cerca de 4–5 minutos construindo. Avance para a revelação.

Perguntas seguidas pelo Claude

Revelação da 1ª versão

Passo 6 — Avalie-se contra a lista de verificação de 8 pontos

Antes de continuar polindo, verifique o site em relação ao padrão que você definiu. Cole a lista de verificação de 8 pontos (do início deste artigo) no Claude e pergunte:

1Aqui está minha lista de verificação de 8 pontos para um site de $10.000. Analise o site atual e
2me diga honestamente onde ele se encaixa em cada um: forte, misto ou ausente. Seja brutal.

Na minha construção, o Claude respondeu: ponto de vista — forte, cor — forte, hierarquia — forte, tipografia — misto, e imagens/movimento/mobile/coisas invisíveis — todos mistos. Você terá uma divisão semelhante, e tudo bem. O objetivo é saber exatamente o que falta.

Passo 7 — É aqui que ele passa de profissional para caro

Este capítulo é toda a diferença. Não conserte as coisas uma de cada vez — isso desperdiça tokens e o resultado parece remendado. Lidere com intenção, não especificidades, e peça um lote.

Aqui está o prompt exato que eu uso:

1Precisamos de mais microinterações artesanais. As seções inferiores parecem um pouco genéricas.
2Não precisamos torná-las mais ocupadas — apenas mais caras. Proponha um lote de refinamentos
3e aplique todos de uma vez.

Observe que não estou dizendo ao Claude o que adicionar — estou dizendo como quero que pareça. O Claude é melhor em transformar intenção em especificidades do que a maioria das pessoas em escrever especificações. Ele voltou com um lote: granulação de filme em todo o site, linhas animadas de latão entre as seções, um efeito de brasa brilhante, revelações de manchete palavra por palavra. Cinco mudanças, um prompt, entregues juntas.

Em seguida, conduza você mesmo a passagem por seção. Role, encontre as seções que ainda parecem sem graça — sempre há algumas — e dê ao Claude uma interação de movimento ou cursor por seção:

1A seção [história] parece estática. Adicione um micromovimento ou interação de cursor elegante
2aqui. Mantenha sutil e refinado — vivo, não barulhento.

Se a primeira tentativa for muito óbvia, insista: "Deixe mais sutil, adicione um leve atraso para que ele siga o cursor." Na minha construção, isso transformou um halo de vela estático em um que segue seu cursor com um atraso suave. Dois prompts, duas seções — essa camada é a diferença entre um site que parece caro e um que parece caro enquanto você navega.

Passo 8 — Imagens: forneça ou gere

GIF

As imagens são o único pilar que o Claude não consegue resolver completamente sozinho. Melhor opção: fotografia personalizada. Coloque-a na sua pasta de projeto e diga ao Claude o que é e onde.

Sem orçamento para fotos? A geração por IA já é boa o suficiente para que ninguém perceba. O truque que torna isso rápido: não escreva o prompt de imagem você mesmo — o Claude já conhece seu projeto, então peça a ele para escrever o prompt para você:

1Escreva um prompt de geração de imagem para o hero deste site. Ele deve combinar com o
2clima exato, a paleta de cores e a direção que construímos até agora. Produza apenas o prompt.

Cole isso no seu gerador de imagens e você obtém algo alinhado à marca na primeira tentativa. No ElevenLabs, você pode gerar uma imagem estática (GPT Image), colocar esse quadro exato no Google Veo 3.1 para animá-lo e fazer upscaling com Topaz — tudo em uma única aba. Coloque o ativo final na sua pasta de projeto.

Passo 9 — Incorpore componentes profissionais do 21st.dev

GIF

Quando você quiser um elemento visual marcante (um efeito de rolagem, um hero sofisticado), o 21st.dev é uma biblioteca gratuita de componentes construídos por desenvolvedores reais. Encontre um que você goste, clique em Copiar Prompt, cole no Claude Code, anexe seu ativo e diga ao Claude para construir o hero com ele.

Aqui está a parte importante: o Claude protege sua arquitetura. O componente de rolagem que escolhi foi construído para React; meu projeto era um site estático simples, então o Claude se recusou a colocar a versão React porque isso mudaria a forma como todo o projeto funciona — e reconstruiu o efeito em HTML puro. (Se o seu projeto realmente precisar de React — um painel, um checkout, um login — o Claude diria sim. Ele não quebra as coisas só porque você pediu.)

Quando o efeito falha na primeira tentativa — o meu falhou — apenas descreva o que está errado:

1O vídeo aparece, mas não está rolando como o componente deveria. Vá mais fundo —
2abra a página no navegador, inspecione o que está realmente acontecendo e corrija a causa real.

O Claude abriu a página, inspecionou-a ao vivo e encontrou o bug real três camadas depois. A lição: continue insistindo. Explique o que quebrou e o que você esperava — o Claude quase sempre consegue resolver se você deixá-lo olhar mais de perto.

Passo 10 — Texto, fontes e mobile (as vitórias rápidas)

GIF

Texto: O texto de IA explica demais por padrão. O texto premium é contido e sensorial — "Bife dry-aged. 16oz. 60 dias. Grelhado no fogo." parece que foi escrito por um chef. A habilidade frontend-design empurra o Claude nessa direção, e é por isso que ela ganha seu lugar em todo projeto.

Fontes: há uma fonte — Inter — tão usada que instantaneamente grita "IA fez isso". Se você a vir na sua saída:

1Substitua Inter em todos os lugares por uma fonte menos usada — Geist funciona bem. Mantenha a fonte do título.

Mobile: "responsivo" não é "projetado para celulares". Os celulares verão seu site muito mais do que os desktops. Peça uma passagem dedicada:

1Faça uma passagem mobile dedicada. Decida o que deve ser ocultado em telas pequenas, o que deve
2ser mais compacto e o que deve redimensionar. Esta é a versão que a maioria das pessoas realmente verá.

Na minha construção, a navegação foi recolhida, o espaçamento da marca foi ajustado e os botões ganharam uma variante menor. Com isso, todos os 8 itens da lista de verificação estão concluídos.

Passo 11 — Coloque no ar (a parte que todo mundo erra)

Agora, seu site só existe no seu computador — aquela URL localhost só funciona na sua máquina. Para compartilhá-lo, você precisa de hospedagem + um domínio real.

Escolha um provedor com um domínio grátis no primeiro ano. Para um site estático simples (sem login, sem checkout, sem banco de dados), o nível "premium/compartilhado" mais barato é suficiente. Defina o prazo para 12 meses — esse é o mínimo que garante o domínio grátis. Pesquise seu domínio, reivindique-o. Meu total foi de cerca de $43 para o ano: hospedagem + domínio + e-mail.

Se o Claude construiu algo com um backend real (ele disse

sim

para React, configurou Node.js, um banco de dados, etc.), escolha o

nível empresarial

— ele suporta Node.js. O momento em que o Claude aceitou ou recusou React no Passo 9 diz qual plano você precisa.

O único erro que carrega uma página em branco: ao fazer upload, compacte os arquivos dentro da sua pasta de projeto — não a pasta em si. Abra sua pasta de projeto, selecione tudo dentro dela (Cmd/Ctrl + A) e compacte. Você quer um único zip com o index.html no nível superior. Se você compactar a pasta inteira, o provedor descompacta um diretório muito fundo e seu domínio mostra uma página em branco.

Na integração do provedor, escolha Migrar Site Existente → Fazer Upload de Arquivos de Backup, selecione seu domínio, arraste o zip, envie. Clique no seu domínio — e lá está ele, seu site de $10.000 ao vivo em uma URL personalizada.

Quanto você pode realmente ganhar com isso

O site em si é um ativo de $10.000 de valor. Aqui está como isso se transforma em dinheiro:

• Vender sites para negócios locais é o caminho mais rápido. Restaurantes, dentistas, academias, corretores de imóveis e prestadores de serviços pagam rotineiramente $1.000–$5.000 por um site premium de página única. Construa um em uma tarde, cobre de acordo. Dois clientes por mês a $2.000 = $4.000/mês em tempo parcial.
• Freelancers experientes / pequenas agências cobram $5.000–$15.000 exatamente por esse tipo de site personalizado, animado e projetado para mobile — e agora o entregam em horas em vez de semanas. A margem é o ponto principal.
• Serviço transformado em produto: venda um pacote fixo de "página única premium em 5 dias por $1.500". Previsível, repetível, e você pode executar vários ao mesmo tempo.
• Sua própria marca: se você está usando para si mesmo, o "ganho" são os negócios e a credibilidade que um site com aparência de cinco dígitos traz.

Rampa realista para alguém começando hoje: primeiro cliente pago em algumas semanas, $1K–$5K/mês em tempo parcial em alguns meses se você realmente fizer prospecção. A construção não é mais o gargalo — vendas é.

O que muda para você depois disso

GIF

Antes, um site premium personalizado significava aprender a programar por meses ou pagar milhares a um desenvolvedor. Depois disso, a barreira técnica desapareceu. Você pode produzir um site genuinamente caro, totalmente personalizado, animado e projetado para mobile em uma tarde — e vendê-lo ou usá-lo para fazer sua própria coisa parecer séria.

A habilidade que você realmente adquire não é "programação". É direção — saber como é o caro, fazer o briefing com precisão e insistir até que esteja certo. Essa habilidade se acumula em cada site que você construir depois deste.

Seu próximo passo (faça isso hoje)

1. Inscreva-se no Claude Pro e instale o aplicativo para desktop.
2. Instale ambas as habilidades (Passo 2) e ative o modo automático.
3. Salve de 3 a 5 capturas de tela de referência do Dribbble ou Awwwards.
4. Execute o prompt de construção do Passo 5 — incluindo "faça perguntas esclarecedoras" — e responda com cuidado.

Não pule a coleta de referências ou as perguntas esclarecedoras. É daí que vêm 80% da qualidade. Construa um site do início ao fim antes de se preocupar em vender — você precisa ver funcionar primeiro.

Uma coisa honesta

Isso não é uma pílula mágica. É uma ferramenta real que faz um trabalho real — mas o resultado depende de você. Os prompts acima são pontos de partida, não scripts. A diferença entre um site que parece um template e um que parece de $10.000 é o gosto que você traz, as referências que escolhe e quantas vezes você insiste em uma seção sem graça em vez de aceitar "bom o suficiente".

O Claude cuida da execução. Sua direção e seu esforço decidem o resultado. O que você faz com isso é inteiramente com você.

*

*Por favor, marque como favorito, retuite e siga @thegreatest_svpara mais conteúdo de alto nível, ferramentas de IA e pesquisas de qualidade.AVISO LEGAL (Ganhos e Informações) Os ganhos ou estatísticas mostrados neste artigo são exemplos da minha pesquisa, experiência própria e não são garantias do que você ganhará. Os resultados variam com base no nicho, qualidade do conteúdo, RPM/CPM, engajamento do público, consistência, esforço e outros fatores. Isso não é aconselhamento financeiro, fiscal, jurídico ou profissional — consulte os especialistas apropriados antes de tomar decisões de negócios.Recursos e links

Ferramentas e recursos do Claude Code: https://claude.com/

**Habilidade Frontend Design (por Anthropic):

**https://github.com/anthropics/skills/tree/main/skills/frontend-design

**Habilidade UI/UX Pro Max:

**https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

21st.dev: https://21st.dev

A lista de verificação do site de $10K (download gratuito em PDF): https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view

Sites de referência de design

Dribbble: https://dribbble.com

Awwwards: https://www.awwwards.com

Pinterest:https://pinterest.com