Do prompt à URL no ar — Editar, inspecionar e fazer deploy com um clique no Open Design

Este guia leva um protótipo de um prompt até uma URL no ar: escolha um design system, gere, refine com as ferramentas Edit e Inspect direto no canvas e, então, faça o deploy direto para a Vercel ou o Cloudflare Pages — sem sair do Open Design. Ele segue a demonstração que o 01Coder faz em seu passo a passo, adaptada para este guia escrito e atualizada com a versão atual. Assista ao vídeo acima para ver a execução ao vivo ou continue lendo a versão escrita.

O workspace do Open Design: descreva o que você quer construir, escolha um modo, e seu agente faz o resto.

O que é o Open Design?

O Open Design é uma plataforma de design open source e local-first que roda em cima do agente de codificação que você já usa — Claude Code, Codex, Gemini, Hermes e outros — ou da sua própria API key. Ele é distribuído como um app de desktop (sem necessidade de compilar) e combina uma biblioteca profunda de skills com uma biblioteca profunda de design systems de nível de marca, para que você comece a partir de uma estética de verdade em vez de uma tela em branco.

• Open source, Apache-2.0 — clone, hospede você mesmo ou simplesmente baixe o app.
• Roda localmente — seus projetos vivem na sua própria máquina.
• Agente plugável — troque o agente no canto inferior esquerdo a qualquer momento.
• Design systems de marcas reais — Apple, Airbnb, ElevenLabs e muito mais.

Passo 1 — Instale e escolha um design system

O caminho mais fácil é o app de desktop em open-design.ai/download (macOS e Windows; Docker ou pnpm se você preferir rodar a partir do código-fonte). Ao iniciar, o canto inferior esquerdo mostra o agente ativo (o 01Coder usa o Codex) — clique nele para trocar.

Crie um Prototype, dê um nome a ele e escolha um design system no dropdown — cada item reveste a saída com o visual daquela marca. Se você já construiu algo no Claude Design, importe o ZIP dele aqui.

A biblioteca de plugins: instale skills direto do registro — incluindo skills de design anti-slop.

Passo 2 — Gere com descoberta + uma direção visual

Escreva seu briefing e envie. O Open Design faz um conjunto curto de perguntas de descoberta (para quem é, o tom do design, o contexto da marca, o idioma) e então oferece um seletor de direção visual — o 01Coder escolhe uma direção editorial “FT Magazine”. Escolha uma e ele constrói a primeira versão à direita.

Passo 3 — Ajuste fino com Edit e Inspect

É aqui que você refina sem refazer prompts:

• Edit — clique em qualquer elemento e mude o conteúdo dele diretamente. O 01Coder encurta um rótulo de “GitHub” para “GH” e reescreve uma palavra de um título, depois clica em apply content. Você pode ajustar os links da mesma forma, e o painel à esquerda mostra o artefato organizado por camadas.
• Inspect — para o estilo visual. Na primeira vez, ele avisa que o artefato não tem tags data-oid; deixe o agente adicioná-las (é assim que o Open Design mira nos elementos de forma confiável), depois recarregue. Agora, clicar em qualquer elemento (digamos o h1 do hero) permite ajustar cor, fundo e tamanho de fonte, com um reset caso você exagere.

Para mudanças maiores, volte ao chat para uma edição conversacional direta — Edit/Inspect são para os ajustes rápidos e cirúrgicos.

Passo 4 — Faça o deploy para uma URL no ar com um clique

Quando estiver pronto, o menu Share (canto superior direito) exporta para PDF, PPTX, ZIP ou HTML autônomo — ou faz o deploy para a Vercel ou Cloudflare Pages com um clique. Usando o Cloudflare como o 01Coder faz:

1. Clique em deploy → Cloudflare, depois em get / create an API token.
2. Crie um token personalizado com a permissão de Cloudflare Pages, avance até o resumo e crie-o.
3. Cole o token no Open Design, adicione seu account ID (copie-o do dashboard do Cloudflare) e faça o deploy.
4. Abra o link que ele fornece — se o primeiro carregamento parecer estranho, atualize uma ou duas vezes enquanto ele propaga.

Um protótipo real gerado, renderizado na pré-visualização — uma landing page de agência escura e cinematográfica.

Não gostou do resultado no ar? Volte ao chat, itere e faça o deploy de novo.

Dicas

• Comece a partir de um design system para que a primeira versão já saia alinhada à marca.
• Deixe o agente adicionar as tags data-oid antes de usar o Inspect, depois recarregue a pré-visualização.
• Use Edit para o texto, Inspect para o estilo, o chat para a estrutura — escolha a ferramenta certa para cada mudança.
• Para o deploy no Cloudflare você precisa dos dois: um token de API (com permissão de Pages) e seu account ID.
• Atualize após o primeiro deploy se a página ainda não tiver propagado.

Perguntas frequentes

Eu realmente consigo fazer deploy para uma URL pública de dentro do Open Design? Sim — o menu Share faz o deploy para a Vercel ou Cloudflare Pages com um clique (você fornece o token do provedor; o Cloudflare também precisa do seu account ID).

O que é data-oid e por que o Inspect o pede? É um atributo que o Open Design adiciona aos elementos para conseguir mirar neles de forma confiável. Deixe o agente adicioná-lo, recarregue, e o Inspect funciona.

Eu preciso rodar a partir do código-fonte? Não — baixe o app de desktop para macOS ou Windows. Docker e pnpm a partir do código-fonte são opções, se você preferir.

É gratuito? O app é open source sob Apache-2.0 e gratuito para rodar localmente. Você só paga pelo uso de modelo e mídia do agente e dos provedores que conectar.

---

Este guia em texto é baseado na demonstração prática do 01Coder. Assista ao vídeo completo acima e inscreva-se no canal do 01Coder para mais análises aprofundadas de produtos de IA.