Um CMS para sites Claude Code: a camada que faltava

Um CMS para sites Claude Code: a camada que faltava

Já lancei talvez uma dúzia de sites com Claude Code até agora. Páginas de marketing, uma landing page SaaS, algumas one-pagers para agências. Cada um ficou bom o suficiente para um cliente pagar com prazer alguns milhares de reais por ele. E cada um tinha o mesmo defeito fatal no momento em que eu imaginava realmente entregá-lo: o cliente não conseguia mudar uma palavra sem me ligar.

Esse é o segredo sujo que ninguém conta nos vídeos de demonstração. Um CMS para Claude Code não é um complemento agradável para esses sites — é o que decide se um lindo site gerado por IA é um produto real ou uma captura de tela que você postou no Twitter para ganhar likes. O problema de design foi resolvido em algum momento de 2025. O problema do "e agora?" não.

Então, quando encontrei o tutorial do Jack — ele é um empreendedor serial no mundo das startups de IA — abordando exatamente essa lacuna, prestei atenção. Sua abordagem foi direta: aproximadamente 99% dos sites gerados por Claude são inutilizáveis em produção porque não têm uma camada de gerenciamento de conteúdo. Um cliente que precisa corrigir um erro de digitação no título principal tem duas opções. Obter as credenciais brutas do repositório (assustador) ou enviar mensagem para o desenvolvedor (um gargalo que mata suas margens). Nenhuma escala além de um punhado de clientes.

Sua solução é construir um CMS em cima do site estático — uma camada de edição controlada que permite a pessoas não técnicas mudar texto, trocar imagens, adicionar páginas e ajustar SEO, sem nunca tocar no código ou poder quebrar o layout. Quero percorrer como esse stack realmente se encaixa, quanto custa nos planos gratuitos, e — porque usei cada peça desse stack em produção — exatamente onde a realidade da "versão 1" diverge do vídeo de destaques. No final, você saberá se vale a pena construir para seu próprio trabalho com clientes ou se é melhor recorrer a uma ferramenta pronta.

Mas primeiro, a parte que a maioria das pessoas entende errado sobre por que isso importa.

Por que um lindo site Claude Code não vale nada sem um CMS

Aqui está uma cena que já vivi mais de uma vez. Você entrega um site espetacular. O cliente fica empolgado. Duas semanas depois: "Ei, pode mudar o número de telefone no rodapé e atualizar os preços do segundo nível? Desculpa incomodar!"

Essa mensagem te custa. Não pelos cinco minutos que a edição leva — pela troca de contexto, pelo redeploy, pelo "já que está mexendo, pode também..." que se segue. Multiplique por dez clientes e você terá reconstruído exatamente a armadilha freelance sobre a qual escrevi em como a clonagem de sites com IA gera receita recorrente: você está trocando tempo por dinheiro em uma esteira que nunca acelera.

A resposta convencional é "use WordPress" ou "construa no Webflow." Ambos funcionam. Ambos também jogam fora toda a razão pela qual você usou Claude Code — o design personalizado e refinado à mão que não se parece com todos os outros templates da internet. No instante em que você despeja um layout gerado por Claude em um tema WordPress, você lixou o que o tornava especial.

O que a abordagem do Jack preserva é o código personalizado e a editabilidade. O site continua sendo um conjunto estático de arquivos ultrarrápidos. O CMS fica ao lado como um painel separado que sabe quais partes da página são editáveis e grava as mudanças através de um pipeline controlado. O cliente recebe um login que só expõe alvos de edição seguros — o texto do título, o número do preço, o espaço da imagem — nunca o HTML estrutural que mantém o design unido.

Jack chama o objetivo de "imutável à destruição do cliente, mas ainda editável." Essa frase ficou na minha cabeça porque nomeia o requisito real do produto. Clientes devem poder fazer tudo o que precisam e nada que quebre o site. Esse é o jogo inteiro.

E o mecanismo que torna isso possível é um stack de quatro serviços gratuitos ou quase gratuitos conectados entre si. Deixe-me detalhar cada um, porque a arquitetura é a parte interessante — não o marketing.

O stack completo: Claude Code, GitHub, Vercel, MongoDB Atlas, OpenRouter

Retire o pitch e o sistema são cinco componentes, cada um fazendo um trabalho:

• Claude Code gera o site e, separadamente, o próprio painel do CMS.
• GitHub armazena o código-fonte e fornece controle de versão.
• Vercel faz o deploy do site ao vivo a partir do GitHub e cuida da hospedagem.
• MongoDB Atlas armazena todo o conteúdo editável como a única fonte de verdade.
• OpenRouter roteia o assistente de edição com IA para o modelo de linguagem de sua escolha.

O fluxo funciona assim. Claude Code escreve o site e faz push para um repositório privado no GitHub. O Vercel monitora esse repo e faz deploy de tudo que está na branch principal para uma URL ao vivo. Até aqui é um deploy padrão de site estático — nada novo, e algo que já fiz dezenas de vezes. O CMS é onde fica interessante. Em vez de o conteúdo ficar hardcoded no HTML, as peças editáveis vivem como documentos no MongoDB. O site publicado lê dessa base de dados (ou de um build que puxa dela), então quando um cliente edita os preços no painel e clica em publicar, a mudança se propaga para o site ao vivo.

O assistente de edição com IA — a caixa de chat que permite ao cliente dizer "torne esta seção mais curta e impactante" — funciona pelo OpenRouter. Essa é uma escolha inteligente do Jack, e aqui está por que importa: OpenRouter é uma única API que oferece mais de 315 modelos da Anthropic, OpenAI, Google, DeepSeek e outros, todos atrás de um único endpoint compatível com OpenAI. Você troca de modelo com um parâmetro, sem mudanças de código. Para um CMS que você vende a clientes, essa flexibilidade é a diferença entre ficar preso aos preços de um fornecedor e poder mudar para um modelo mais barato assim que um aparecer.

Sou honesto sobre uma coisa, porque a demo passa por cima: conectar essas cinco peças para que fiquem sincronizadas é os 20% difíceis que consomem 80% do tempo. A narrativa de "Claude constrói pra você" é verdadeira para o caminho feliz e otimista em todo o resto. Chegaremos lá. Primeiro, deixe-me mostrar quanto custa operar, porque esse número me surpreendeu.

Quanto realmente custa operar esse stack?

Operar um CMS Claude Code para um único site de cliente custa efetivamente nada nos planos gratuitos, mais uso de IA por edição medido em frações de centavo. Aqui está o detalhamento verificado em junho de 2026.

O próprio Claude é o único custo mensal garantido. O plano Pro custa $20/mês (ou cerca de $17/mês no pagamento anual) e agora inclui Claude na web, o app desktop, Cowork e Claude Code no terminal. Uma ressalva importante que os vídeos pulam: o Pro funciona com janelas de uso rotativas de cinco horas. Atinja o limite às 14h e sua próxima janela abre por volta das 19h. Para geração intensiva de sites você sentirá essa barreira, e é a principal razão pela qual as pessoas migram para o nível Max.

GitHub é gratuito para repos privados. Sem asterisco para este caso de uso.

O plano Hobby do Vercel é gratuito e generoso: 100 GB de banda, 1 milhão de requisições edge e 1 milhão de invocações serverless por mês, com 4 horas de CPU ativa. A armadilha que atinge especificamente agências — Hobby é apenas para uso não comercial. No momento em que você hospeda o site de um cliente pagante, deveria estar no Pro a $20/mês por assento de desenvolvedor, que te dá 1 TB de banda e cobrança por excedente em vez de uma pausa forçada. Para projetos pessoais, o gratuito funciona genuinamente bem. Para trabalho com clientes, orce os $20.

MongoDB Atlas tem um cluster gratuito M0 (anteriormente chamado M0, agora simplesmente "Free") com 512 MB de armazenamento. Para um banco de dados de conteúdo com texto, configuração de layout e histórico de versões, 512 MB é muito — cabem dezenas de sites antes de se tornar relevante. As restrições reais são os limites de throughput: aproximadamente 100 operações por segundo e 500 conexões simultâneas. Bom para um CMS onde edições são ações humanas ocasionais. Não é bom se você acidentalmente apontar renderização de páginas de alto tráfego diretamente nele sem cache.

OpenRouter é puro pague-conforme-o-uso sobre preços de modelo repassados, com uma taxa de plataforma de 5,5% sobre créditos. Não há assinatura. Se o assistente de edição com IA de um cliente executa, digamos, 50 solicitações de edição por mês contra um modelo intermediário, estamos falando de centavos. O OpenRouter também oferece modelos gratuitos (limitados a aproximadamente 20 solicitações/minuto, 200/dia) se você quiser que o assistente não custe literalmente nada durante os testes.

Some tudo para um deploy real de cliente: $20 Claude + $20 Vercel Pro + $0 GitHub + $0 MongoDB + alguns centavos de OpenRouter = aproximadamente $40/mês para operar um número ilimitado de sites de clientes através de um único painel. Se você cobra dos clientes $100–$200/mês por hospedagem e edições — o modelo que detalhei na publicação sobre modelo de retenção de agência IA — a margem é óbvia. Essa é a chave de receita recorrente escondida dentro de um tutorial de CMS.

Agora a parte que realmente me importa: como construir a coisa.

Como construir um CMS em cima de um site Claude Code?

Você constrói um CMS Claude Code gerando primeiro o site estático, fazendo deploy no Vercel, e então fazendo Claude Code gerar um app de painel separado que se conecta ao MongoDB Atlas para armazenamento de conteúdo e ao OpenRouter para o assistente de edição com IA. Aqui está a sequência de cinco passos que Jack demonstra, com minhas observações sobre cada um.

Passo 1: Configure Claude com o plano certo

Pegue o app desktop do Claude e assine pelo menos o plano Pro ($20/mês) para ter acesso ao Claude Code. Se você vai gerar múltiplos sites em uma sessão, considere seriamente o Max — a janela de cinco horas do Pro vai te interromper no meio da construção, e não há nada mais irritante do que esperar três horas para terminar um layout.

Passo 2: Roube uma direção de design (do jeito certo)

Este é o passo que separa um site que parece um site do Claude de um que parece o site do seu cliente. Não aceite a estética padrão do Claude. Busque inspiração real primeiro.

A estratégia do Jack é navegar pelo Dribbble, encontrar layouts que combinem com a vibe que o cliente quer, e alimentar capturas de tela ou URLs no Claude para que ele possa analisar a linguagem visual real. Ele usa uma skill de "extrator de blueprint de design" da sua comunidade para traduzir essa inspiração em um plano de site estruturado — sistema de cores, escala tipográfica, layout de seções, ritmo de espaçamento — antes de uma única linha de código ser escrita.

Você não precisa da skill específica dele para fazer isso. O princípio é o que importa: dê ao Claude uma referência visual concreta mais uma declaração clara do propósito e da marca do site, e você obtém um resultado que está quilômetros à frente do genérico padrão. Encontrei o mesmo resultado toda vez — a qualidade de um design gerado por Claude é quase inteiramente uma função de quão específicos são a referência e o briefing. Briefing vago, site genérico. Briefing preciso com referência real, algo pelo qual um cliente realmente pagará. Aprofundo essa dinâmica no guia de design systems para apps com IA.

Na demo, o exemplo é um site de serviços para uma empresa de automação com IA que vende agentes "Hermes" que cortam os custos operacionais das empresas. Claude produziu um tema profissional coeso, textos de marketing reais, múltiplas ilustrações personalizadas dos conceitos de IA e um layout limpo e seccionado — explicações do sistema, logos de parceiros, o pacote completo. As imagens personalizadas vieram através de uma integração API com um gerador de imagens IA acessível (ele usa um chamado KIE) em vez de fotos de banco de imagens, o que é grande parte do motivo pelo qual não parece um template.

Passo 3: Construa e refine iterativamente

Gere, depois critique com capturas de tela. Isso não é negociável. Você dá ao Claude uma captura do que ele produziu e feedback detalhado — "o espaçamento do hero está apertado demais, a fileira de logos de parceiros precisa de mais respiro, a cor do CTA está competindo com o título" — e ele revisa. A primeira passada nunca é a final. Trate Claude como um designer júnior rápido que você está dirigindo artisticamente, não como uma máquina de venda automática.

Passo 4: Hospede de graça

Claude Code cuida disso quase inteiramente pela CLI. Ele cria um repo privado no GitHub, faz push do código, conecta o Vercel e faz deploy para uma URL ao vivo. A única coisa que você faz manualmente é autenticar. GitHub é seu armazenamento de arquivos e controle de versão; Vercel espelha o que está no repo para o site ao vivo. Pelo painel do Vercel você também pode comprar ou vincular um domínio personalizado. Já executei esse fluxo exato de deploy muitas vezes — genuinamente é quase um único comando depois que sua autenticação está configurada, e é a parte menos problemática de todo o sistema.

Passo 5: Integre o CMS (a parte realmente difícil)

Aqui é onde Claude gera um segundo app — o painel do CMS — e o conecta ao site. O painel se conecta ao MongoDB Atlas (seu armazenamento de conteúdo), usa um token do Vercel para acionar deploys e roteia o assistente de edição com IA através de uma chave API do OpenRouter. Esta é a peça que transforma um site estático em uma plataforma editável, e é a peça que exige trabalho real para acertar.

Se você chegou até aqui e está concordando, já está pensando nisso mais seriamente do que a maioria das pessoas que assiste à demo e segue em frente. A próxima seção é onde separo o que genuinamente funciona do que ainda está cru.

Se preferir que alguém construa e conecte todo esse stack para você — o site, o CMS, a configuração multi-tenant — eu aceito exatamente esse tipo de projeto. Veja o que já construí em fiverr.com/s/EgxYmWD.

Configurando o MongoDB Atlas como seu backend de conteúdo

MongoDB é a escolha certa para isso, e não por acaso. É um banco de dados de documentos — armazena documentos semelhantes a JSON em vez de linhas e colunas rígidas. Isso se encaixa quase perfeitamente em um CMS, onde cada página é realmente apenas uma árvore de blocos de conteúdo: um hero com título e imagem, uma seção de preços com três níveis, um rodapé com informações de contato. Você armazena cada página como um documento, cada versão como um snapshot, e as consultas são rápidas.

Configurar o cluster gratuito é genuinamente simples, e aqui estão os passos exatos da demo, que correspondem ao que você verá na interface do Atlas hoje:

1. Crie uma conta no MongoDB Atlas no console cloud.
2. Escolha o cluster gratuito M0 — 512 MB de armazenamento, sem cartão de crédito.
3. Nomeie o cluster algo óbvio como website-cms.
4. Crie um usuário de banco de dados com nome de usuário e senha com os quais o CMS se autenticará.
5. Libere endereços IP em Acesso de Rede para que seu app possa se conectar. Para desenvolvimento você pode liberar todos os IPs temporariamente, mas restrinja isso antes da produção.
6. Pegue a string de conexão do driver e coloque na configuração do CMS.

Uma vez que essa string de conexão está no lugar, o CMS para de ser um brinquedo local e se torna algo que um cliente pode acessar pela internet. E aqui está o detalhe que genuinamente me impressionou na demo: porque MongoDB é a única fonte de verdade, você pode limpar completamente o cache local e os arquivos e o CMS reconstrói seu estado a partir do banco de dados. O conteúdo não está preso no código. Isso é uma verdadeira vitória arquitetônica e exatamente como um sistema de conteúdo deveria se comportar — o banco de dados é o armazenamento canônico, o código é descartável.

O Atlas também oferece backups automáticos, distribuição global e um cluster gerenciado sempre ativo, então você não fica cuidando de um servidor de banco de dados. Para um operador solo gerenciando sites de clientes, "nunca preciso pensar na infraestrutura do banco de dados" vale muito.

Uma ressalva honesta, porque já passei por isso: o teto de ~100 ops/seg do nível gratuito M0 é bom para edições em ritmo humano, mas vai absolutamente travar se você arquitetar mal — por exemplo, consultando o banco de dados em cada visualização pública de página em vez de construir páginas estáticas a partir dele. Leia conteúdo no build ou cache agressivamente. Não deixe tráfego de visitantes tocar o M0 diretamente. Erre nisso e seu nível "gratuito" se torna silenciosamente a razão pela qual o site de um cliente parece lento.

A arquitetura de dois links: como multi-tenant realmente funciona

Esta é a parte da construção do Jack que achei mais engenhosa, e também a parte onde a honestidade da "versão 1" mais importa.

O sistema usa dois pontos de entrada distintos:

• Um link de controle mestre para você, o desenvolvedor ou a agência. Daqui você gerencia cada site de cliente, escolhe qual modelo de IA alimenta as edições e conecta os backends de hospedagem e banco de dados. Este é seu centro de comando.
• Um link de edição voltado ao cliente, protegido por senha, limitado ao site de um único cliente. O cliente faz login e pode editar seu conteúdo e nada mais. Não pode ver outros clientes, não pode tocar na estrutura, não pode quebrar nada fora do seu sandbox.

Claude gera tanto os sites individuais de clientes quanto o CMS mestre, coordenando a autenticação para que cada usuário alcance apenas suas páginas atribuídas. Tokens do Vercel controlam o deploy; chaves do OpenRouter controlam a IA de edição. Em teoria, isso escala para dezenas ou centenas de sites de clientes sob um único painel, o que é o verdadeiro desbloqueio comercial — é a mesma lógica multi-tenant que faz o modelo de retenção de agência IA funcionar em escala.

O que o cliente pode fazer dentro do seu link: editar texto e preços, ajustar espaçamento e layout dentro de limites seguros, adicionar e modificar imagens, adicionar novas páginas (uma página de artigo, uma página em branco, qualquer coisa), visualizar em desktop/tablet/mobile com sugestões de IA para otimização mobile, e executar ferramentas SEO que pontuam frases-alvo, sugerem melhorias e permitem editar metadescrições por página. Há também uma caixa de entrada de formulários que captura leads diretamente no CMS, e um assistente de chat com IA integrado para ajuda nas edições. Cada mudança tem controle de versão, e apenas conteúdo validado é publicado ao vivo — o que protege a estrutura e o design da "destruição do cliente."

Agora a honestidade. Jack é direto em dizer que isso é versão 1 e básico, e você deveria levar isso a sério. Um CMS multi-tenant com autenticação, isolamento de dados por inquilino, logs de auditoria, orquestração de deploys e uma camada de edição com IA é um produto de software real — o tipo de coisa para a qual empresas levantam capital. Claude Code pode montar uma versão funcional impressionantemente rápido, e a demo prova que a arquitetura é sólida. Mas "a demo funciona do início ao fim" e "eu confiaria nisso com os dados de cinquenta clientes pagantes e um limite de autenticação real" são declarações diferentes.

As coisas que eu pessoalmente reforçaria antes de cobrar alguém: o limite de autenticação e isolamento de inquilinos (um bug aqui significa que um cliente vê os dados de outro — inaceitável), validação de entrada sobre o que o editor de IA pode escrever de volta, e limitação de taxa para que um único cliente não consiga esgotar seus créditos OpenRouter ou atingir o teto de throughput do M0 para todos. Nada disso são razões para não construir. São razões para tratar a versão 1 gerada como um ponto de partida sólido, não como um produto pronto que você entrega a um cliente no primeiro dia.

Essa distinção — ponto de partida sólido versus produto entregável — é todo o ponto de ser honesto sobre software construído com IA. Então deixe-me tomar uma posição clara sobre quando esta é a decisão certa.

Quando esse stack é a escolha certa — e quando não é

Construa o CMS Claude Code quando quiser design totalmente personalizado que nenhum template pode oferecer, estiver gerenciando seus próprios projetos ou um pequeno conjunto de sites de clientes, e tiver julgamento de engenharia suficiente para reforçar os limites de autenticação e dados da versão 1 antes de ir ao ar. O teto na qualidade do design e o custo de hospedagem quase zero são imbatíveis para esse perfil. Esta é a escolha certa para um desenvolvedor-operador rodando uma agência enxuta.

Recorra a uma ferramenta pronta quando precisar de autenticação multi-tenant testada em batalha desde o primeiro dia, não se sentir confortável revisando e reforçando código backend gerado, ou seus clientes precisarem de funcionalidades (e-commerce, permissões complexas, trilhas de auditoria de compliance) que uma v1 não terá. Um CMS headless maduro ou um plano Webflow existe por uma razão. Não há vergonha em não reinventar autenticação.

O erro que eu alertaria — e já vi pessoas cometerem — é tratar a demo polida como pronta para produção e pular o reforço. Software gerado por IA parece pronto porque roda. Rodar e ser seguro para colocar na frente de clientes pagantes não são a mesma coisa. Cometi versões desse erro eu mesmo, entregando algo que funcionava na demo e quebrava no momento em que input do mundo real o atingia. A solução é entediante: revise o código gerado, teste o limite de autenticação como um atacante faria, e cache agressivamente para que seus planos gratuitos não te traiam sob carga.

Aqui está a previsão que estou disposto a fazer. Dentro de um ano, "IA constrói seu site e dá ao seu cliente uma forma segura de editá-lo" deixa de ser um tutorial inteligente e se torna requisito básico para qualquer um que venda trabalho web gerado por IA. O problema de design está resolvido. O problema de editabilidade é o novo fosso. Quem dominar a camada de edição controlada — imutável à destruição do cliente, mas totalmente editável — possui a receita recorrente. As ferramentas mostradas aqui são um esboço inicial e honesto de para onde isso está indo.

Perguntas frequentes

O Claude Code pode construir um CMS?

Sim — Claude Code pode gerar tanto um site estático quanto um painel de CMS separado que se conecta a um banco de dados, faz deploy pelo Vercel e usa um assistente de edição com IA. O CMS gerado é uma sólida versão 1 funcional que precisa de reforço de autenticação e isolamento de dados antes de ser confiado a clientes pagantes. Veja os passos de construção acima para a sequência completa.

Qual é a forma mais barata de hospedar um site Claude Code?

O caminho mais barato pronto para produção é GitHub para o repo (grátis), Vercel Pro para hospedagem comercial ($20/mês) e o cluster gratuito M0 do MongoDB Atlas (512 MB) para conteúdo. O plano gratuito Hobby do Vercel funciona apenas para sites pessoais não comerciais.

O plano gratuito do MongoDB Atlas é suficiente para um CMS de site?

Para um CMS de conteúdo, sim — os 512 MB de armazenamento do cluster gratuito M0 comportam facilmente texto, configuração de layout e histórico de versões para muitos sites. O limite real é o throughput (~100 operações por segundo), então cache agressivamente e nunca aponte renderização de páginas públicas diretamente ao M0 sob tráfego.

O que o OpenRouter faz nessa configuração?

OpenRouter é a API única que alimenta o assistente de edição com IA do CMS, oferecendo mais de 300 modelos da Anthropic, OpenAI, Google e outros atrás de um único endpoint compatível com OpenAI. Você troca de modelo com um parâmetro, e os preços são repassados mais uma taxa de plataforma de 5,5% — sem assinatura. Essa flexibilidade te protege de ficar preso aos custos de um único fornecedor.

Por que os clientes não podem simplesmente editar um site Claude Code diretamente?

Porque o design vive em código personalizado, e dar a um cliente não técnico acesso bruto ao repositório significa que uma edição errada quebra o layout. Uma camada CMS expõe apenas alvos de edição seguros — texto, preços, imagens, meta tags — enquanto mantém o código estrutural bloqueado, para que os clientes possam mudar tudo o que precisam e nada do que não deveriam.

Vamos trabalhar juntos

Quer construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura tecnológica? Adoraria ajudar.

• Fiverr (builds e integrações personalizadas): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (soluções empresariais): ramlit.com
• ColorPark (design e branding): colorpark.io
• xCyberSecurity (serviços de segurança): xcybersecurity.io