Criador de sites com IA

O criador de sites com IA
com quem você só conversa.

Diga ao Buddy, a IA integrada à sua loja, o que você quer. Ele escreve a página na tela ao vivo, com a cara da sua marca, enquanto você assiste. Depois, assuma o controle manual de qualquer elemento, até a regra CSS, sem sair do editor.

O Buddy criando uma loja na tela ao vivo, do primeiro prompt até o Publish.

Primeiros passos

Dois jeitos de começar.
Nenhum precisa de desenvolvedor.

Criar com IA é o caminho mais rápido: descreva a loja que você quer e o Buddy cria a loja inteira, com identidade visual, páginas e produtos incluídos. Um tema oferece o mesmo editor e o mesmo Buddy, com o layout já definido.

Build with AI Recomendado

Conte o que você vende e a Orderain cria a loja inteira para você: identidade visual, páginas e produtos.

Start with a theme 51+ temas

Escolha um design de que você goste e deixe com a sua cara no mesmo Builder.

A tela de nova loja com a opção Build with AI e um botão Create shop, ao lado de Start with a theme com um mosaico de 51 capas de temas
A primeira decisão ao criar uma loja.
O espaço de trabalho

Sua vitrine, ao vivo
no centro do editor.

A tela mostra a loja real. Sete painéis à esquerda cuidam de todo o resto, e o Buddy é um deles, aberto ao lado da loja que está editando.

O Builder da Orderain: a barra de ferramentas com o seletor de dispositivo, o zoom e o Publish, a coluna de painéis à esquerda, uma loja de discos de vinil aparecendo ao vivo na tela e o dock do Buddy flutuando por cima
  1. PagesTodas as páginas da loja. Adicione uma, gere uma ou pesquise.
  2. LayersA página como uma árvore de elementos. Selecione, reordene, duplique, exclua.
  3. LayoutsMenus de navegação e rodapés prontos, ou gere um sob medida.
  4. BlocksBlocos dinâmicos, estáticos e de elementos para soltar na página.
  5. SettingsTemas, dados da loja, SEO, cache, CSS personalizado e opções de IA.
  6. Version historyCada salvamento como uma versão, com quem fez e um caminho de volta.
  7. AI BuddyDescreva uma mudança e o Buddy a aplica em toda a loja.
Conversando com o Buddy

Entra uma frase.
Sai uma página pronta.

Sem formulário para preencher, sem editor avançado para aprender. Você fica em um só chat e o Buddy, o assistente de IA integrado à sua loja, faz a construção.

O dock do Buddy sobre a loja: o prompt “create a contact page”, o Buddy descrevendo a seção hero, o formulário e o horário de funcionamento que vai criar, e um status Generating page
Passo 1Peça no chatDigite o que você quer, como “create a contact page”, e o Buddy diz o que vai criar antes de começar.
A tela escurecida atrás de um diálogo Generating your style, com as variáveis CSS da própria marca sendo escritas
Passo 2Veja a página sendo escritaLayout, textos e estilo são gerados de acordo com a sua marca, até o CSS que ele vai escrevendo enquanto você assiste.
O Buddy confirmando que a página foi gerada e a imagem do formulário atualizada, com Keep it e Undo lado a lado
Passo 3Fique com ela ou continue conversandoPágina gerada. Ajuste no mesmo chat com “use the ember jar photo in the form section”, e cada mudança oferece Keep it ou Undo.

Dois prompts. Não precisou de mais nada. O dock mantém a conversa, então a segunda instrução é aplicada à página que a primeira criou em vez de começar do zero. E nada é confirmado pelas suas costas: cada mudança chega com Keep it ou Undo logo ao lado.

Controle manual

A IA é o caminho rápido,
não o único.

Toda página gerada continua totalmente editável. Nada é exportado para um formato que você não consiga abrir.

O painel Layers mostrando uma página como uma árvore de elementos pesquisável
A árvore de camadasA estrutura e a visibilidade da página em uma só lista. Pesquise nela, expanda ou recolha a árvore inteira e alcance elementos difíceis de clicar na tela.
O painel de propriedades de um elemento com as abas Controls e Inspector, uma barra Ask Buddy, etiquetas de classe e uma regra CSS
Propriedades dos elementosAs abas Controls e Inspector, uma barra Ask Buddy e um editor de regras CSS que edita todos os elementos que compartilham a classe.
O editor Edit Navbar Code mostrando HTML e CSS com um botão Apply Changes
O código, à mãoAbra o HTML e o CSS por trás de um menu de navegação ou rodapé gerado, edite e aplique as mudanças.
Rascunhos e histórico

Nada vai ao ar
até você mandar.

O controle de publicação: mudanças não publicadas com o horário do último salvamento, o domínio próprio e o subdomínio orderain.com marcados como no ar, e um único botão Publish
Preview
Veja a loja exatamente como um visitante veria, sem salvar nem publicar nada.
Save
Guarde o trabalho como rascunho e volte a ele depois. Cada salvamento também fica guardado como uma versão para a qual você pode voltar, e os visitantes continuam vendo a última versão publicada.
Publish
É o que coloca suas edições na frente dos clientes. Até você clicar, o botão mostra um ponto de mudanças não publicadas e o horário do seu último salvamento.
Os dois endereços de uma vez
Publicar envia as mudanças ao mesmo tempo para o seu domínio próprio e para o seu subdomínio orderain.com, e os dois aparecem no ar no mesmo painel.
Version history: cada salvamento listado com quem fez e o que mudou, a versão no editor marcada como Editing, a publicada como Live e uma versão com nome marcada com uma estrela

E se você precisar voltar atrás

Cada salvamento vira uma versão, assinada por quem a fez: você, sua equipe ou o Buddy. Abra uma para ver o que a restauração mudaria e volte para ela com um clique. A versão no editor recebe a etiqueta Editing e a que os clientes veem, Live, e uma ramificação permite testar um novo visual enquanto a loja continua como está. Veja como funciona o histórico de versões.

Páginas e SEO

Cada página configurada
e pronta para os buscadores enquanto você cria.

Os três painéis que você preenche ao criar uma página. Nada disso fica como faxina para depois, e os equivalentes para a loja inteira ficam nas configurações da loja.

O painel General: nome da página Home, URL da página /home, Required auth desativado e Make landing ativado
GeneralUm nome de página, uma URL que você pode editar em vez de só aceitar, e opções para liberar o acesso só com login e definir qual é a landing page.
O painel SEO com o título, a descrição e as palavras-chave da página preenchidos para a loja Ember
SEOTítulo, descrição e palavras-chave da página, escritos enquanto você a cria, em vez de correr atrás deles depois.
A lista de páginas do sistema: Home, Products, Product details e Collections, cada uma com sua rota, das nove incluídas
System pagesNove páginas já vêm com rotas e conexões prontas: Home, Products, Product Details, Collections e o resto da vitrine.

Além dessas páginas do sistema, você tem páginas personalizadas que cria, renomeia e exclui quando quiser, e páginas hospedadas que a Orderain serve para você com a sua marca aplicada.

  • Sitemap e robots.txt gerados para cada loja
  • Renderização no servidor, para que os buscadores recebam HTML de verdade
  • Título, descrição e palavras-chave por página
  • Slug de URL editável em cada página
  • Opções de acesso com login e de landing page por página

Quer a versão completa?
Pule para um capítulo.

Perguntas

O que as pessoas perguntam
antes de criar.

Preciso saber programar para criar o site?

Não. Você descreve a página que quer e ela é gerada na tela ao vivo, com a cara da sua marca, sem desenvolvedor. O código está disponível se você quiser: dá para abrir o HTML e o CSS por trás de um menu de navegação ou rodapé gerado e editar diretamente. É uma opção, não uma etapa obrigatória.

Posso editar o que a IA gera ou fico preso ao resultado?

Toda página gerada continua totalmente editável. A árvore de camadas mostra a página como uma lista de elementos para selecionar, reordenar, duplicar e excluir, o painel de propriedades edita qualquer elemento, e o editor de regras CSS muda de uma vez todos os elementos que compartilham uma classe. Nada é exportado para um formato que você não consiga abrir.

Alguma coisa vai ao ar automaticamente enquanto eu edito?

Só duas coisas, e de propósito: trocar para um novo tema, que vem com Undo, e mudanças no logo ou nas cores da marca. Todo o resto espera o Publish. O Preview mostra a loja como um visitante a veria sem salvar, e o Save guarda seu trabalho como rascunho enquanto os visitantes continuam vendo a última versão publicada. Até você publicar, o botão mostra um ponto de mudanças não publicadas e o horário do seu último salvamento.

E se a IA errar uma página?

Cada mudança que o Buddy faz chega com Keep it ou Undo ao lado, então nada é confirmado pelas suas costas. Além disso, cada salvamento fica no histórico de versões, inclusive os do Buddy, então você pode ver o que uma versão anterior mudaria e voltar para ela com um clique.

As páginas que ele cria são boas para SEO?

As vitrines são renderizadas no servidor, então os buscadores recebem HTML de verdade, e não uma página vazia que precisa rodar JavaScript para ser lida. Cada página tem seu próprio título, descrição, palavras-chave e slug de URL editável, preenchidos quando a página é criada, sem precisar correr atrás deles depois, e um sitemap e um robots.txt são gerados para cada loja.

Posso publicar no meu próprio domínio?

Sim. Publicar envia as mudanças ao mesmo tempo para o seu domínio próprio e para o seu subdomínio orderain.com, e os dois aparecem no ar no mesmo painel para você ver o que foi para onde.

Começo pela IA ou por um tema?

Tanto faz: os dois levam ao mesmo editor, com o mesmo Buddy. Criar com IA é o caminho mais rápido: descreva a loja e a identidade visual, as páginas e os produtos são criados para você. Com um tema, você começa a partir de um dos 51 designs ou mais, com o layout já definido, e personaliza do mesmo jeito.

O Builder está incluído em todos os planos?

Sim. O Builder, o Buddy e todos os blocos estão em todos os planos, a partir de US$ 5 por mês, e a Orderain fica com 0% das suas vendas em todos eles.

Descreva a loja que você quer.
Publique hoje mesmo.

O Builder, o Buddy e todos os blocos estão em todos os planos, a partir de US$ 5/mês. 0% de taxa da plataforma, sempre.