Como Criar Site com o Cursor e Publicar Grátis

Se você é desenvolvedor ou freelancer, provavelmente já ouviu falar do Cursor. Diferente de ferramentas como ChatGPT ou Claude, que funcionam via chat no navegador, o Cursor é uma IDE completa — um editor de código com inteligência artificial embutida. Você não copia e cola código de uma aba para outra. Você trabalha direto nos arquivos, com preview ao vivo, autocomplete inteligente e um assistente que entende todo o seu projeto.

Isso muda completamente a experiência de criar sites com IA. Em vez de pedir "gere um HTML" e torcer para sair certo, você conversa com a IA dentro do seu ambiente de trabalho, vê os arquivos sendo criados em tempo real e consegue iterar rápido — corrigir, ajustar, refinar. É a diferença entre pedir uma receita e cozinhar com um chef do lado.

Neste guia, vamos desde a instalação do Cursor até a publicação do site na internet. Tudo explicado passo a passo, com exemplos práticos e prompts prontos para você usar.

O que o Cursor consegue criar

O Cursor trabalha com arquivos reais no seu computador. Isso significa que ele consegue gerar projetos com múltiplos arquivos — algo que ferramentas baseadas em chat fazem com dificuldade. Na prática, você pode criar:

Sites com arquivos separados: index.html, style.css, script.js, pasta de imagens
Projetos multi-página: home, sobre, serviços, contato, cada um com seu próprio HTML
Landing pages responsivas com animações CSS e interatividade JavaScript
Portfólios profissionais com galeria de imagens e navegação entre projetos
Sites institucionais completos para empresas e profissionais liberais
Cardápios digitais, páginas de evento, currículos online
Protótipos funcionais para apresentar a clientes

A grande diferença em relação ao ChatGPT ou ao Claude é que você não recebe um bloco de código para copiar. Os arquivos aparecem diretamente no explorador de arquivos da IDE, organizados em pastas, prontos para editar. Se algo não ficou como você queria, você seleciona o trecho e pede uma modificação — sem precisar reenviar todo o contexto.

Para quem usa IA para criar sites, o Cursor representa o próximo passo: sair do chat e entrar na IDE.

Como instalar e configurar o Cursor

O Cursor é um fork do VS Code, então a interface vai ser familiar para qualquer pessoa que já usou o Visual Studio Code. Extensões, atalhos, temas — tudo funciona igual. A diferença é que a IA já vem integrada nativamente.

Passo 1: Baixar e instalar

Acesse cursor.com e clique em "Download". O Cursor está disponível para Windows, macOS e Linux. A instalação é padrão — baixar, executar, avançar. Em menos de dois minutos você tem a IDE funcionando.

Passo 2: Criar uma conta

Na primeira abertura, o Cursor pede para criar uma conta. O plano gratuito (Hobby) já inclui acesso limitado ao Composer e ao Chat com IA. Para a maioria dos projetos de sites estáticos, o plano gratuito é suficiente.

Se você já tem uma conta no VS Code ou GitHub, pode usar para login rápido.

Passo 3: Configurar o modelo de IA

O Cursor permite escolher qual modelo de IA usar. Nas configurações (Cursor Settings > Models), você pode selecionar entre Claude Sonnet, GPT-4o, e outros. Para gerar sites HTML, tanto o Claude Sonnet quanto o GPT-4o funcionam bem. O Claude Sonnet tende a gerar código mais limpo e semântico, enquanto o GPT-4o é mais criativo com designs visuais.

A recomendação para iniciantes: deixe o modelo padrão. Você pode experimentar outros depois.

Passo 4: Abrir uma pasta de projeto

Crie uma pasta vazia no seu computador — por exemplo, meu-site — e abra no Cursor com File > Open Folder. Essa pasta vai conter todos os arquivos do seu site. Manter os arquivos organizados desde o início facilita a publicação depois.

Criando um site passo a passo

Vamos criar um portfólio de freelancer completo, com múltiplas páginas. Esse é o tipo de projeto onde o Cursor realmente brilha, porque envolve vários arquivos que precisam ser consistentes entre si.

Abrindo o Composer

O Composer é o recurso mais poderoso do Cursor para gerar sites. Ele entende que você quer criar múltiplos arquivos e faz isso de forma coordenada — os estilos do CSS batem com as classes do HTML, a navegação entre páginas funciona, o JavaScript encontra os elementos certos.

Para abrir o Composer, use o atalho Ctrl+I (Windows/Linux) ou Cmd+I (macOS). Uma janela lateral vai abrir onde você pode descrever o que quer.

O prompt

Aqui está um prompt detalhado para um portfólio de freelancer. Copie e cole no Composer:

"Crie um site de portfólio para uma freelancer de design gráfico chamada Marina Costa. O site deve ter 3 páginas HTML separadas com CSS e JavaScript em arquivos próprios.

Estrutura de arquivos:

index.html (home)

projetos.html (portfólio)

contato.html (formulário e informações)

css/style.css (estilos globais)

js/main.js (interatividade)

Página Home (index.html):

Header fixo com logo 'Marina Costa' e menu de navegação (Home, Projetos, Contato)

Hero section com título 'Design que comunica', subtítulo 'Identidade visual, social media e materiais gráficos para negócios que querem se destacar', botão 'Ver projetos'

Seção 'Serviços' com 3 cards: Identidade Visual, Social Media, Material Impresso. Cada card com ícone SVG inline, título e descrição de 2 linhas

Seção 'Sobre' com texto em 2 parágrafos (5 anos de experiência, formada em Design pela ESPM, já atendeu mais de 80 clientes)

Seção 'Depoimentos' com 3 depoimentos de clientes com nome, empresa e comentário

Footer com links para Instagram, Behance e LinkedIn, e-mail [email protected]

Página Projetos (projetos.html):

Mesmo header e footer

Grid de 6 projetos com imagem placeholder (picsum.photos/400/300), nome do projeto, categoria (tag) e link 'Ver detalhes'

Filtro por categoria no topo: Todos, Identidade Visual, Social Media, Impresso

Filtro funcional com JavaScript

Página Contato (contato.html):

Mesmo header e footer

Formulário com campos: Nome, E-mail, Tipo de projeto (select: Identidade Visual, Social Media, Material Impresso, Outro), Mensagem, Botão Enviar

Informações de contato ao lado: e-mail, telefone (11) 98765-4321, horário (segunda a sexta, 9h-18h), cidade (São Paulo)

Design: moderno e feminino. Fundo branco (#ffffff), textos em cinza escuro (#2d2d2d), cor destaque lilás (#9b59b6), hover em lilás escuro (#7d3c98). Fonte: Poppins do Google Fonts. Cantos arredondados nos cards (8px). Sombras suaves. Totalmente responsivo com mobile-first."

Repare que o prompt especifica tudo: nomes de arquivos, estrutura de páginas, conteúdo de cada seção, cores exatas, fonte, comportamento do filtro. Quanto mais detalhado o prompt, menos ajustes você vai precisar fazer depois.

O que acontece em seguida

Depois de enviar o prompt, o Cursor vai:

Criar os arquivos na sua pasta de projeto — você vai ver index.html, projetos.html, contato.html, css/style.css e js/main.js aparecendo no explorador lateral
Mostrar um diff (diferença) para cada arquivo, para que você revise o código antes de aceitar
Pedir sua confirmação para aplicar as mudanças

Revise o código gerado. Se algo não ficou como você queria, não aceite ainda — escreva uma mensagem de follow-up no Composer explicando o que precisa mudar. Por exemplo: "O filtro de projetos não está funcionando no mobile. Corrija para funcionar com touch events" ou "Mude a cor do botão de lilás para azul marinho (#1a365d)".

Visualizando o resultado

Para ver o site funcionando, instale a extensão Live Server no Cursor (o mesmo processo do VS Code: Extensions > buscar "Live Server" > Install). Clique com o botão direito no index.html e selecione Open with Live Server. O site abre no navegador com hot reload — cada mudança que você salvar aparece instantaneamente.

Navegue entre as páginas, teste o filtro de projetos, redimensione a janela para verificar a responsividade. Tudo o que precisa ser corrigido pode ser ajustado direto no Cursor.

Recursos poderosos do Cursor

O Composer é o recurso principal para gerar sites, mas o Cursor tem outras funcionalidades que fazem diferença no dia a dia.

Composer (Ctrl+I / Cmd+I)

Gera e modifica múltiplos arquivos de uma vez. É o modo ideal para criar projetos do zero ou fazer alterações que afetam vários arquivos simultaneamente — como mudar a paleta de cores do site inteiro, adicionar uma nova página com a mesma navegação das outras, ou refatorar a estrutura do CSS.

O Composer entende o contexto do projeto inteiro. Se você pedir "adicione uma página de blog com o mesmo estilo das outras páginas", ele vai reaproveitar o header, footer, classes CSS e padrões visuais que já existem.

Tab (autocomplete com IA)

Enquanto você digita código, o Cursor sugere completar trechos inteiros — não apenas nomes de variáveis, mas blocos completos de HTML, regras CSS, funções JavaScript. Ele aprende o padrão do seu projeto e sugere código consistente com o que já existe.

Na prática, você começa a digitar uma nova seção no HTML e o Cursor sugere a estrutura completa baseada nas seções anteriores. Pressione Tab para aceitar.

Chat (Ctrl+L / Cmd+L)

Abre um chat lateral para fazer perguntas sobre o código. Diferente do Composer (que modifica arquivos), o Chat apenas responde — útil para tirar dúvidas sem alterar nada.

Exemplos de uso: "Por que o flexbox não está centralizando esse elemento?", "Como faço para o menu fechar ao clicar em um link no mobile?", "Esse código é acessível para leitores de tela?".

Edição inline (Ctrl+K / Cmd+K)

Selecione um trecho de código e pressione Ctrl+K para pedir uma modificação específica naquele trecho. Ideal para ajustes pontuais: "mude essa animação para ser mais suave", "adicione um hover effect nesse botão", "torne esse grid responsivo com 2 colunas no mobile".

Referência com @codebase

No Composer ou no Chat, use @codebase para que a IA considere todos os arquivos do projeto na resposta. Isso é fundamental em projetos multi-arquivo — garante que as mudanças sejam consistentes com o resto do código.

Exemplo: "@codebase adicione um dark mode toggle no header que funcione em todas as páginas". O Cursor vai modificar o CSS, o HTML de cada página e adicionar o JavaScript necessário, tudo de uma vez.

Cursor vs Claude vs ChatGPT: quando usar cada um

Cada ferramenta tem seu ponto forte. A escolha depende do tipo de projeto e do seu fluxo de trabalho.

Critério	Cursor	Claude	ChatGPT
Interface	IDE (editor de código)	Chat no navegador	Chat no navegador
Múltiplos arquivos	Gera e organiza automaticamente	Um arquivo por vez (ou bloco longo)	Um arquivo por vez
Preview ao vivo	Sim (com Live Server)	Artifacts (limitado)	Não nativo
Iteração	Modifica código diretamente	Requer copiar/colar	Requer copiar/colar
Custo	Plano gratuito limitado	Plano gratuito limitado	Plano gratuito limitado
Instalação	Requer download	Nenhuma	Nenhuma
Qualidade do HTML	Depende do modelo escolhido	Excelente (semântico)	Bom (funcional)
Ideal para	Projetos multi-arquivo, iteração rápida	Sites one-page, código limpo	Ideias rápidas, prototipagem

Quando usar o Cursor

Você quer um projeto com vários arquivos organizados (HTML + CSS + JS separados)
Precisa iterar rapidamente sobre o design e a funcionalidade
Já tem familiaridade com VS Code ou editores de código
Vai trabalhar em um site que precisa de manutenção contínua
Quer controle total sobre o código, com a IA como assistente

Quando usar Claude ou ChatGPT

Precisa de uma página rápida, sem instalar nada
Quer gerar um HTML único para copiar e publicar
Está longe do computador e só tem o celular
Precisa de ajuda com texto e conteúdo, não só código
Quer testar uma ideia antes de abrir a IDE

A boa notícia é que as ferramentas se complementam. Você pode prototipar no Claude, refinar no Cursor e publicar no Htmly. O código HTML é o mesmo — o que muda é o fluxo de trabalho.

Como publicar o site

Depois que o site ficou pronto no Cursor, publicar é a parte mais rápida. Você precisa dos arquivos que estão na pasta do projeto — aqueles mesmos que o Cursor criou.

Opção 1: Upload direto na Htmly

Abra htmly.com.br
Arraste a pasta do projeto (ou os arquivos) para a área de upload
Pronto. Em segundos, seu site está no ar com um link como marina-costa.htmly.com.br

A hospedagem de sites na Htmly é gratuita, com HTTPS incluso e sem necessidade de configurar servidor, DNS ou qualquer coisa técnica. Para freelancers que precisam publicar sites de clientes rapidamente, é o caminho mais direto.

Opção 2: Upload via ZIP

Se o seu projeto tem muitos arquivos (imagens, fontes, múltiplas páginas), compacte a pasta em um arquivo ZIP e faça o upload. A Htmly extrai automaticamente, mantendo a estrutura de pastas.

No Windows, clique com o botão direito na pasta do projeto > Enviar para > Pasta compactada (zipada). No macOS, botão direito > Comprimir. No Linux, zip -r meu-site.zip meu-site/.

Opção 3: Via API (para automatizar)

Se você é dev indie e quer integrar a publicação no seu fluxo de trabalho, a Htmly tem uma API REST. Com uma chamada POST, você envia os arquivos e o site é publicado automaticamente. Consulte os planos para ver os limites de API de cada plano.

Depois da publicação

O site publicado na Htmly vem com:

HTTPS gratuito (certificado SSL automático)
CDN global via Cloudflare (carregamento rápido em qualquer lugar)
Subdomínio personalizado (seu-nome.htmly.com.br)
Opção de domínio próprio nos planos pagos
Analytics server-side (sem cookies, compatível com LGPD)

Se precisar atualizar o site, basta fazer um novo upload. A versão anterior é substituída instantaneamente.

Dicas para aproveitar o Cursor ao máximo

Depois de criar alguns sites, você vai desenvolver um fluxo natural com o Cursor. Aqui vão algumas dicas que aceleram o processo:

Comece pelo Composer, refine com Ctrl+K. Use o Composer para gerar a estrutura inicial do site inteiro, depois faça ajustes pontuais com edições inline. Isso evita regenerar tudo por causa de um detalhe.

Salve prompts que funcionaram. Se você criou um prompt que gerou um portfólio incrível, salve em um arquivo de texto. Na próxima vez, adapte o prompt em vez de escrever do zero. Troque nomes, cores e conteúdos, mantenha a estrutura.

Use @codebase para consistência. Sempre que pedir uma alteração que afeta múltiplos arquivos, inclua @codebase no início do prompt. Sem isso, o Cursor pode gerar código que conflita com o que já existe.

Instale extensões úteis. Além do Live Server, considere: Prettier (formatação automática de código), HTML CSS Support (autocomplete de classes CSS no HTML) e Image Preview (visualizar imagens no editor).

Teste no mobile antes de publicar. No Chrome, pressione F12 > clique no ícone de dispositivo móvel > selecione modelos como iPhone SE e Galaxy S20. Sites que ficam lindos no desktop podem quebrar no mobile — verifique sempre.

Perguntas frequentes

O Cursor é gratuito?

Sim, o plano Hobby é gratuito e inclui acesso ao Composer e ao Chat com IA. Há um limite de requisições por mês, mas para criar sites estáticos é suficiente na maioria dos casos. Se você precisar de mais, os planos pagos começam em US$ 20/mês.

Qual a diferença entre o Cursor e o VS Code?

O Cursor é um fork do VS Code — ou seja, é o VS Code com IA integrada nativamente. A interface é praticamente idêntica, as extensões são compatíveis, os atalhos são os mesmos. A diferença é que o Cursor tem o Composer, o Chat com IA e o autocomplete inteligente embutidos, sem precisar instalar extensões adicionais de IA.

O Cursor funciona em português?

A interface do Cursor é em inglês, mas a IA entende perfeitamente prompts em português. Você pode descrever o site em português, pedir modificações em português e o código gerado terá conteúdo em português com acentuação correta. Se preferir, pode instalar o pacote de idioma PT-BR (o mesmo do VS Code).

Iniciantes conseguem usar o Cursor?

Se você nunca usou um editor de código, o Cursor tem uma curva de aprendizado maior do que simplesmente abrir o ChatGPT e pedir um HTML. Porém, com o Composer, grande parte da complexidade desaparece — você descreve o que quer em linguagem natural e o Cursor cria os arquivos. Não precisa saber programar para começar, mas ter noções básicas de HTML ajuda a entender e ajustar o resultado.

Posso usar o Cursor para editar sites que já existem?

Sim, e esse é um dos maiores pontos fortes. Abra a pasta de qualquer site existente no Cursor e use o Composer ou o Chat para pedir modificações. Por exemplo, "adicione um formulário de newsletter no footer de todas as páginas" ou "mude o layout da galeria para masonry". A IA entende o código existente e faz as alterações de forma consistente.

Crie seu site agora

O Cursor reduz a distância entre a ideia e o site pronto. Em vez de alternar entre abas, copiar blocos de código e montar arquivos manualmente, você trabalha em um ambiente integrado onde a IA entende seu projeto inteiro.

Depois que o site ficou como você quer, a publicação leva segundos. Arraste os arquivos para a Htmly e receba um link compartilhável na hora — com HTTPS, CDN e sem complicação.

Se quiser explorar outras formas de criar sites com inteligência artificial, temos guias para todas as ferramentas principais. E se precisar de um preview rápido para enviar a um cliente, a Htmly resolve isso sem exigir que o cliente instale nada.

Leia também: