Como construir uma landing page com Claude Code, Supabase e Vercel

Requisitos

O que precisa estar pronto antes de começar.

Passo 1 — Monte um design system básico com Claude Code

Antes de desenhar qualquer tela, defina a identidade visual em um lugar só.

Esse é o passo que a maioria pula — e é o que evita que cada página nova saia com uma cor, uma fonte ou um espaçamento diferente. Peça pro Claude Code criar um arquivo único, tipo design-system.html, com as suas cores, fontes e componentes básicos em variáveis CSS. Esse arquivo vira a referência que você cola no início de toda conversa nova sobre uma página do site.

Quero montar um design system básico pro site da minha marca antes de criar
qualquer página. Crie um único arquivo HTML (design-system.html) que sirva de
referência visual, com:

1. Paleta de cores (fundo, texto, destaque, bordas) como variáveis CSS em :root
2. Um par de fontes: uma de destaque para títulos (mais impactante) e uma pra
   texto corrido (legível), carregadas via Google Fonts
3. Escala de espaçamento (ex.: 8, 16, 24, 32, 48, 64px)
4. Estilo de botão primário e secundário
5. Um exemplo de card e de formulário usando essas mesmas variáveis

Contexto da marca: <descreva em 2-3 frases o tom da marca — sério, divertido,
premium, técnico etc. — e se já existe um logo ou cor principal>

Revise o resultado como quem revisa uma identidade visual, não código: as cores combinam com a marca? O título grande tem presença? Dá pra ler o texto corrido sem cansar? Ajuste ali mesmo antes de seguir — corrigir o design system agora é muito mais barato do que corrigir cinco páginas depois.

Passo 2 — Crie o layout da página

Com os tokens prontos, a estrutura da página é a parte rápida.

Agora sim, peça a página em si. Dê pro Claude Code o arquivo do passo 1 como contexto e descreva a estrutura em blocos — nav, hero, formulário, seção de detalhes, rodapé — em vez de descrever pixel por pixel. Se tiver uma página existente cuja organização você gosta, cole o link como referência de estrutura (nunca peça pra copiar o conteúdo de outra marca).

Usando as variáveis de cor, fonte e espaçamento definidas em design-system.html,
crie a página <nome-da-pagina>.html com esta estrutura:

1. Nav fixa no topo, com logo e um botão de CTA
2. Hero com título grande, um parágrafo curto e um formulário de inscrição
   (campos: nome e email) ao lado — duas colunas no desktop, empilhado no
   celular, formulário aparece antes do resto do conteúdo no mobile
3. Seção com 3-4 blocos de detalhe (ex.: data, formato, para quem é)
4. Rodapé simples com link de volta pra home

Depois de enviado o formulário, troque o card do formulário por uma mensagem
de confirmação (não recarregue a página).

Referência de estrutura, não de conteúdo: <cole aqui o link de uma página que
você gosta, se tiver>

Nesse ponto a página já existe, mas o formulário ainda não guarda nada em lugar nenhum — é só HTML. É isso que o próximo passo resolve.

Passo 3 — Armazene os dados com Supabase

Conecte o formulário a um banco de verdade, com as permissões certas.

No painel do Supabase, crie um projeto e rode este SQL no SQL Editor pra criar a tabela que vai guardar as inscrições:

create table public.inscricoes (
  id uuid primary key default gen_random_uuid(),
  nome text not null,
  email text not null,
  created_at timestamptz not null default now()
);

-- Row Level Security ligado: por padrão, ninguém lê nem escreve nada.
alter table public.inscricoes enable row level security;

-- Só abre a porta que precisa: qualquer visitante pode INSERIR uma inscrição,
-- mas ninguém de fora consegue LER a lista de inscritos pela chave pública.
create policy "Qualquer pessoa pode se inscrever"
  on public.inscricoes for insert
  to anon
  with check (true);

Com a tabela pronta, pegue a Project URL e a publishable key em Project Settings → API Keys, e ligue o formulário do passo 2 a elas:

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
  const SUPABASE_URL = 'https://SEU-PROJETO.supabase.co';
  const SUPABASE_KEY = 'sb_publishable_...'; // a chave publicável, nunca a service_role
  const db = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

  document.getElementById('signup-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const nome = e.target.nome.value;
    const email = e.target.email.value;

    const { error } = await db.from('inscricoes').insert({ nome, email });

    if (error) {
      console.error(error);
      return;
    }

    // aqui entra a troca pra tela de confirmação do passo 2
  });
</script>

Peça pro Claude Code fazer essa ligação por você, apontando os dois arquivos: "conecta o formulário de <nome-da-pagina>.html nessa tabela do Supabase, usando a publishable key do projeto, e mostra a mensagem de confirmação só depois que o insert der certo".

Passo 4 — Publique com Vercel

Como é um site estático, o deploy é a parte mais rápida de tudo.

1. Suba a pasta do projeto pra um repositório no GitHub (privado ou público).
2. Crie uma conta gratuita na Vercel e clique em Add New Project.
3. Selecione o repositório e importe.
4. Como é HTML puro, sem build de verdade, um vercel.json simples na raiz do projeto resolve tudo — inclusive as URLs limpas (sem .html no final):

{
  "buildCommand": "echo 'Static site'",
  "outputDirectory": ".",
  "cleanUrls": true
}

5. Clique em Deploy. Em menos de um minuto a página está no ar num endereço .vercel.app.
6. (Opcional) Aponte um domínio próprio em Settings → Domains.

Pronto — daqui pra frente, toda vez que você der git push numa alteração, a Vercel publica a nova versão sozinha.

Notas operacionais

• Guarde o design-system.html do passo 1 e cole o link ou o conteúdo dele no início de qualquer conversa sobre uma página nova — é o que mantém a identidade visual consistente entre páginas.
• Nunca coloque a service_role key do Supabase em código que roda no navegador. Só a publishable key é segura pra isso, e mesmo assim depende do Row Level Security estar configurado.
• Teste o formulário de ponta a ponta antes de divulgar a página: preencha, confirme que a linha apareceu na tabela do Supabase e só depois solte o link.
• Cada página nova é um arquivo .html na raiz do projeto — com cleanUrls ligado, publicar uma página nova é só subir o arquivo e dar push.