← Guias Previa: Faça o deploy do Open Design na cloud com o Sealos Skills
Previa

Faça o deploy do Open Design na cloud com o Sealos Skills

Com base na demo da Sealos: leve o Open Design de um workspace local a um app rodando na cloud. Um agente de código o coloca no ar a partir do repositório do GitHub e, em seguida, o Sealos Skills analisa a configuração do Docker, as portas e as variáveis de ambiente, e faz o deploy para uma URL pública que qualquer pessoa pode abrir.

Sealos 15 de junho de 2026 3:59 YouTube ↗

O Open Design é ótimo na sua própria máquina — mas uma URL local só funciona para você, não para o seu time, clientes ou parceiros. Este guia acompanha a demo da Sealos, em que um agente de código coloca o Open Design no ar a partir do repositório no GitHub e, em seguida, o Sealos Skills faz o deploy para uma URL pública na cloud. Assista ao vídeo acima para ver a execução ao vivo, ou continue lendo a versão em texto.

O workspace do Open Design rodando antes de ir para a cloud. Open Design rodando localmente: um workspace de design open source e agent-native — o ponto de partida antes de colocá-lo online.

O que é o Open Design?

O Open Design é um workspace de design open source e agent-native — uma alternativa ao Claude Design e ao Figma que roda em cima do agente de código que você já usa. Algumas coisas que vale a pena saber antes deste passo a passo:

  • Open source, Apache-2.0 — leia cada linha e faça self-host onde quiser.
  • Local-first, ou self-hostável — rode na sua própria máquina ou leve para a cloud (que é exatamente o que este guia faz).
  • Traga seu próprio agente e sua própria key — ele conduz a geração através do Claude Code, Codex, Gemini e outros, usando o seu próprio acesso a modelos.
  • Mais do que protótipos — páginas web, protótipos, dashboards, apresentações de slides e outros entregáveis, tudo em um único workspace.

Por que levar o Open Design para a cloud

Ao rodar o Open Design a partir do código-fonte, o workspace abre em uma URL local. Isso é perfeito para trabalhar sozinho: você inicia, projeta, visualiza o resultado ao vivo. Mas, como a demo da Sealos aponta, há um problema — esse endereço é essencialmente localhost. Funciona para você, e mais ninguém consegue acessá-lo.

Para compartilhar um design com colegas de equipe, entregar um protótipo funcionando a um cliente, ou deixar usuários externos experimentarem o resultado, o app precisa de uma URL pública. É exatamente esse o ponto deste passo a passo: levar o Open Design de um workspace local para um serviço online, para que “rodar localmente” seja apenas o começo.

Colocando o Open Design no ar a partir do repositório do GitHub

Em vez de ler manualmente a documentação de instalação, a demo entrega todo o trabalho a um agente de código (Codex, neste caso). A ideia é simples: apontar o agente para o repositório do Open Design no GitHub e deixar que ele faça o trabalho de configuração.

  • Dê o repositório ao agente. Envie o link do GitHub e peça para ele colocar o Open Design para rodar. Ele lê o README e o guia de início rápido, descobre os passos de instalação e os executa para você.
  • Abra a URL local. Quando o lançamento termina, o agente mostra uma URL. Abra-a e o workspace carrega — sem instalação manual, comando por comando, da sua parte.

Como o Open Design é open source, o agente pode inspecionar o repositório diretamente: a estrutura do projeto, como ele deve rodar e o que precisa. É isso que transforma o próximo passo — o deploy na cloud — em uma tarefa do agente, em vez de uma tarefa manual.

Criando no workspace

Assim que o workspace abre, você percebe que não é uma ferramenta de chat comum. Você pode escolher entre um conjunto de skills — páginas web, protótipos, dashboards, decks — e escolher um design system para que o resultado tenha um estilo visual consistente.

A demo escolhe um skill de protótipo, cola um briefing, e o agente começa a trabalhar imediatamente. No caminho, ele pergunta sobre a sua intenção criativa, e você responde de acordo com o que quer. O agente roda à esquerda enquanto o resultado é pré-visualizado em tempo real à direita — funciona exatamente como um workspace de design com IA local.

Um protótipo gerado no workspace do Open Design. Uma landing page gerada no workspace — o agente trabalha à esquerda, o preview ao vivo é renderizado à direita.

Você pode navegar pelo catálogo completo de skills e design systems no hub de plugins, então nunca começa de uma tela em branco.

O hub de plugins do Open Design. O hub de plugins: skills e design systems que você pode aplicar para moldar o que o workspace produz.

Fazendo deploy no Sealos Cloud com o Sealos Skills

É aqui que o problema da URL local é resolvido. Na demo, a próxima instrução dada ao Codex é simplesmente usar o Sealos Skills — um pacote de skills para agentes de IA — para analisar o projeto do Open Design e fazer o deploy dele no Sealos Cloud.

O Sealos Skills dá ao agente o know-how de deploy que ele não teria de outra forma. Este é o fluxo que a demo executa:

  1. Analisar o projeto. O skill inspeciona a estrutura do projeto, a configuração do Docker, as portas e as variáveis de ambiente — os detalhes que determinam como o app deve rodar na cloud.
  2. Gerar um plano de deploy. A partir dessa análise, ele produz a configuração de deploy para o Sealos Cloud.
  3. Confirmar e fazer o deploy. Se o plano parecer correto, você responde yes quando solicitado, e ele faz o deploy do projeto no Sealos Cloud automaticamente.
  4. Obter uma URL pública. Depois do deploy, a Sealos retorna um link de acesso público — não é mais um endereço local. Membros da equipe, parceiros e usuários externos podem abri-lo e experimentar o app diretamente.

A mudança principal aqui é quem faz o trabalho. Fazer o deploy de um projeto open source normalmente exige muito julgamento manual: ler configurações, alinhar portas, conectar variáveis de ambiente e resolver problemas quando algo quebra. O Sealos Skills transforma tudo isso em um fluxo de trabalho que um agente de IA pode executar de ponta a ponta — analisar, fazer o deploy, verificar e publicar.

Do workspace local a um app rodando na cloud

Neste ponto, o Open Design passou de uma ferramenta local a um serviço online. O valor real não está apenas em tirar o design do workspace — está no fato de que um deploy manual e cheio de julgamento se tornou algo que um agente pode executar de forma repetida e confiável. Rodar localmente é só o começo; estar acessível para outras pessoas é o que transforma o seu trabalho em algo que você realmente pode compartilhar.

Perguntas frequentes

Preciso usar a Sealos para rodar o Open Design? Não. O Open Design é local-first — rodá-lo na sua própria máquina funciona bem. A Sealos é o provedor de cloud de terceiros usado nesta demo para tornar o app acessível por uma URL pública; você também pode fazer self-host da forma que preferir, já que ele é open source sob a licença Apache-2.0.

O que é o Sealos Skills? É um pacote de skills para agentes de IA, mostrado na demo conduzindo o Codex. Ele dá ao agente o know-how de deploy — analisando a configuração do Docker, as portas e as variáveis de ambiente de um projeto, gerando um plano de deploy e publicando o app no Sealos Cloud.

O que o agente realmente faz durante o deploy? Ele lê a estrutura do projeto, verifica a configuração do Docker, as portas e as variáveis de ambiente, gera uma configuração de deploy e — depois que você confirma — faz o deploy na cloud e retorna uma URL pública.

O Open Design é gratuito? Sim — ele é open source sob a licença Apache-2.0. Você só paga pelo uso de modelo/API do agente de código que conectar, além de qualquer hospedagem na cloud (como a Sealos) que decidir usar.

Qual agente de código é usado aqui? A demo usa o Codex, mas o Open Design roda em cima de qualquer agente de código que você conectar — Claude Code, Codex, Gemini e outros — usando a sua própria key.


Este guia em texto é baseado na demo da Sealos. Assista ao vídeo completo acima, e inscreva-se no canal da Sealos para mais conteúdo sobre deploy na cloud com agentes de IA.


Open Design Desktop

Um design system. Sua marca consistente em tudo

No Vibe Design Workspace completo, aplique as mesmas regras de marca a sites, apresentações, protótipos interativos, dashboards, imagens e vídeos HTML. Conecte Codex, Claude Code, Cursor e outros agentes de código locais e crie de graça.

  • Sites, apresentações, protótipos, dashboards, imagens e vídeo
  • Mais de 140 design systems e a biblioteca completa de templates e skills
  • Codex local e mais de 21 agentes de código · Grátis
Baixar grátis

Disponível para macOS, Windows e Linux