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

Eu gravei tudo e depois dividi passo a passo para você poder copiar. O site abaixo parece que um freelancer cobrou cinco dígitos por ele. Ninguém que o visita consegue perceber que uma IA escreveu o código. Custo total para colocá-lo no ar: cerca de $60.

GIF

Primeiro — a verificação honesta dos fatos

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 para 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. Este é o motivo principal pelo qual o resultado pode alcançar um padrão premium.
• As duas habilidades que 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 construída pela 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 trabalho 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 — verifiquei isso, eles migraram para imagem e vídeo no final de 2025. Então você gera uma imagem estática, anima e faz o upscale sem sair da página.
• O Claude Code está incluído no plano Claude Pro por $20/mês ($17 se faturado 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 um domínio grátis no primeiro ano custa cerca de $40–45/ano.

O que NÃO é mágica: Os "$10.000" são o valor da saída, 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 venda automática.

Cada ferramenta nomeada é real. Cada preço é atual em 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 tudo se resume a 8 coisas em 3 grupos:

Bom gosto

1. Ponto de vista — uma direção de design real, não um quadro de inspiração
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 como 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. Esse momento de autoavaliação é o único passo 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 por 10 sua produção e seus preços
• 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 e ganhar dinheiro". A qualidade do seu briefing e sua disposição para refinar 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 do 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 de modo de chat para 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 seleção de pasta perto da caixa de chat e abra-a dentro do aplicativo. O Claude Code funciona melhor quando tem sua própria pasta para habitar.

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

Passo 2 — Turbine 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 de IA. As habilidades corrigem 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 perguntar.

Instale a habilidade #2 — UI/UX Pro Max (você a chama sob demanda): Cole o link da UI/UX Pro Max no Claude Code com este texto exato — a redação é importante porque instala de forma limpa através do 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 bom gosto visual com palavras é difícil, especialmente se você é novo em design. As referências resolvem isso: capturas de tela de sites que você gosta e que entrega ao Claude para que ele combine o estilo. É muito mais fácil mostrar bom gosto do que descrevê-lo.

Onde eu as encontro:

• Dribbble — onde designers publicam seu trabalho
• Awwwards — sites premiados, nível muito alto
• Pinterest — pesquise exatamente o que você quer, ex. "design de site de restaurante moderno"

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

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 restaurante de alto padrão em Seattle].
4
5Direção: [a vibe em suas próprias palavras — ex. luxo escuro e dramático, 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 para 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: Claude me ofereceu três direções de estilo para escolher, como um menu. Eu escolhi luxo escuro/dramático 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 terá que lutar com 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 a 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, mediano ou ausente. Seja implacável.

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

Passo 7 — É aqui que ele passa de profissional a 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 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. Claude é melhor em transformar intenção em especificidades do que a maioria das pessoas em escrever especificações. Ele voltou com um lote: granulado de filme em todo o site, linhas de latão animadas entre as seções, um efeito de brasa brilhante, revelações de título palavra por palavra. Cinco mudanças, um prompt, enviadas juntas.

Em seguida, conduza você mesmo a passagem por seção. Role, encontre as seções que ainda parecem sem graça — sempre tem algumas — e dê ao Claude um movimento ou interação de 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 ruidoso.

Se a primeira tentativa for muito óbvia, pressione: "Deixe mais sutil, adicione um pequeno atraso para que acompanhe 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: traga-as ou gere-as

GIF

As imagens são o único pilar que o Claude não consegue resolver totalmente 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, paleta de cores e 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 upscale 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 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 seu projeto realmente precisar de React — um painel, um checkout, um login — Claude diria sim. Ele não quebra 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. Investigar mais a fundo —
2abra a página no navegador, inspecione o que está realmente acontecendo e corrija a causa real.

Claude abriu a página, inspecionou-a ao vivo e encontrou o verdadeiro bug três camadas depois. A lição: continue pressionando. Explique o que quebrou e o que você esperava — Claude quase sempre pode resolver se você permitir que ele olhe 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. 450g. 60 dias. Grelhado na brasa." soa como se um chef tivesse escrito. A habilidade frontend-design empurra Claude nessa direção, e é por isso que ela merece seu lugar em todo projeto.

Fontes: há uma fonte — Inter — tão usada que instantaneamente grita "IA fez isso." Se você a vir em 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
2ficar mais apertado e o que deve redimensionar. Esta é a versão que a maioria das pessoas realmente verá.

Na minha construção, a navegação recolheu, a marca teve espaçamento mais apertado 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-o no ar (a parte que todo mundo erra)

Neste momento, seu site só existe no seu computador — aquela URL de 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 mais barato "premium/compartilhado" é suficiente. Defina o prazo para 12 meses — esse é o mínimo que garante o domínio grátis. Pesquise seu domínio, registre-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

business

nível — ele suporta Node.js. O momento em que Claude aceitou ou recusou React no Passo 9 indica 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 (Cmd/Ctrl + A), depois 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 acima e seu domínio mostra uma página em branco.

Na configuração inicial do provedor, escolha Migrar Site Existente → Enviar 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 online em uma URL personalizada.

Quanto você realmente pode ganhar com isso

O site em si é um ativo no valor de $10.000. 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 objetivo principal.
• Serviço transformado em produto: venda um pacote fixo "página única premium em 5 dias por $1.500". Previsível, repetível, e você pode executar vários de uma vez.
• Sua própria marca: se você o 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.

Progressão 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 personalizado premium 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 de aparência cara, 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 é algo caro, fazer o briefing com precisão e pressionar 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 bom gosto que você traz, as referências que escolhe e quantas vezes você pressiona para melhorar uma seção sem graça em vez de aceitar "está bom".

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, retweet e siga @thegreatest_svpara mais conteúdo de alto valor, ferramentas de IA e pesquisas de qualidade.AVISO LEGAL (Ganhos e Informações) 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. Isto 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