Como Criar Site no Cursor e Publicar sem Sair do Editor

Sim, dá para implantar um site criado no Cursor sem sair do editor (ou publicar, como a maioria diz), e este guia mostra como. O Cursor é um editor de código com inteligência artificial embutida: em vez de copiar código de uma aba para outra, você trabalha direto nos arquivos, vê o projeto sendo criado em tempo real e ajusta conversando com o agente. E, com o conector do HTMLy, o mesmo agente publica e atualiza o site por você.

Este guia vai da instalação ao site no ar, com um prompt real de 3 páginas, e termina com o que quase nenhum tutorial cobre: colocar o projeto do Cursor na internet e mantê-lo atualizado, de graça.

Atualizado em setembro de 2026 com o conector do HTMLy para o Cursor.

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 cria site com IA, 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:

1. 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
2. Mostrar um diff (diferença) para cada arquivo, para que você revise o código antes de aceitar
3. 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.

Publicar sem sair do editor: conecte o Cursor ao HTMLy

O HTMLy tem um conector para IA no padrão MCP, o mesmo que o Cursor usa para falar com serviços de fora. Em uma frase: você conecta uma vez, aprova na tela, e o agente do Cursor passa a implantar e atualizar seus sites por conta própria, sem build, sem GitHub e sem sair do editor.

Para conectar o Cursor ao HTMLy:

1. Na página do conector, clique em Adicionar ao Cursor. O Cursor abre e pede confirmação. Se preferir fazer na mão, cole isto no seu mcp.json:

{"mcpServers":{"htmly":{"url":"https://htmly.com.br/api/mcp"}}}

2. Em Settings, MCP, clique para autorizar o HTMLy. Uma tela do HTMLy abre no navegador; aprove uma vez (se ainda não tem conta, crie a gratuita ali).
3. No painel do agente, com o projeto aberto, peça: "Publique este site no HTMLy."

O agente envia os arquivos do projeto (páginas, css/, js/, imagens) e responde com o endereço do site no ar, no formato marina-costa.htmly.com.br, com HTTPS e cada página no caminho certo. A resposta traz a lista do que foi publicado e o espaço ocupado. Para escolher o nome, diga na mesma frase: "publique com o nome marinacosta".

Três coisas que valem saber:

• Funciona no plano gratuito do Cursor e no plano gratuito do HTMLy: 1 site, 10 MB, 3 atualizações por dia, sem cartão.
• A IA não apaga nem paga. Excluir site, mudar plano ou mexer em cobrança não existem como ferramenta do conector. Isso só acontece no painel, por você.
• Você desconecta quando quiser em Perfil, Conexões com IA, no HTMLy.

A referência técnica completa, com limites e ferramentas, está na documentação do MCP. Para automação sem editor, existe a API.

Atualizar depois: só o que mudou

É aqui que o conector muda a rotina de quem mantém site de cliente. Peça ao agente:

"Troque o telefone em contato.html para (11) 3456-0000 e publique a atualização."

Ele edita o arquivo e envia só o que mudou. O conector aplica por cima do que já está no ar: o que o agente manda entra, o que ele não manda fica exatamente como estava. Uma resposta cortada no meio nunca apaga uma página. Apagar arquivo só acontece quando você pede um pelo nome, e cada publicação devolve a lista do que mudou.

O mesmo vale para o site de qualquer cliente que já existe: abra a pasta no Cursor, peça a alteração e publique. Para freelancers que mantêm vários sites, é a diferença entre atualizar em um minuto e reenviar tudo.

Caminho alternativo: ZIP pelo painel

Conectar é opcional. Para projeto grande, cheio de imagens, ou se você preferir não conectar, o jeito clássico de hospedagem de sites HTML continua sendo o mais simples: compactar e arrastar.

1. Compacte a pasta do projeto. Windows: botão direito na pasta, Enviar para, Pasta compactada. macOS: botão direito, Comprimir. Linux: zip -r meu-site.zip meu-site/.
2. Acesse htmly.com.br e arraste o ZIP para a área de upload.
3. O HTMLy extrai mantendo a estrutura de pastas e reconhece o index.html como página inicial.

Se o projeto tem build (Vite, Next e afins): rode o comando de build no terminal do Cursor e compacte o conteúdo da pasta dist/ ou build/, não a raiz do projeto. O HTMLy hospeda o resultado do build, não o código-fonte. Para site em HTML puro, como o deste guia, não há build: é compactar e enviar.

O site publicado vem com HTTPS, CDN, endereço seu-nome.htmly.com.br, contagem de visitas sem cookies e, nos planos pagos, domínio próprio. Para quem publica por script, a API cobre o mesmo caminho.

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.

Crie seu site agora

O Cursor reduz a distância entre a ideia e o site pronto: um ambiente só, onde o agente entende o projeto inteiro. E com o conector do HTMLy a distância entre o site pronto e o site no ar também some.

1. Abra a pasta do projeto no Cursor e descreva o site com um prompt detalhado (use o da Marina Costa como base).
2. Revise o diff, aceite e ajuste no agente até ficar do seu jeito.
3. Conecte o HTMLy uma vez e peça: "publique este site no HTMLy".
4. Quando precisar mudar algo, peça na mesma conversa. A IA publica por você.

Se preferir o chat no navegador, o caminho está em criar site com o Claude e publicar direto do chat; quem usa o terminal encontra o guia do Claude Code. Outras formas de criar sites com inteligência artificial estão no guia geral. E se precisar de um preview rápido para enviar a um cliente, o HTMLy resolve sem exigir que o cliente instale nada.