Crie com a qualidade do Claude Design sem queimar tokens

Este guia encara o ângulo do custo de frente: se você já usou uma ferramenta de design em nuvem fechada, conhece a mágica — e sabe que os tokens acabam rápido. O Open Design permite que você projete com qualidade semelhante rodando o trabalho por qualquer modelo que você quiser — o agente que você já paga, ou a sua própria chave — para não ter que racionar um orçamento de design separado. Ele segue a construção que Roy Shavit faz em sua demonstração, reescrita em inglês e atualizada para a versão atual. Assista ao vídeo acima para ver ao vivo, ou continue lendo a versão escrita.

A galeria HyperFrames: peças de motion e vídeo orientadas por código que você pode forkar e remixar.

O que é o Open Design?

O Open Design é uma plataforma de design de código aberto e local-first. Como a ferramenta em nuvem fechada, você dá um prompt e recebe de volta um artefato real — uma landing page, app ou deck — como HTML editável no qual você pode continuar trabalhando no VS Code ou no seu editor. Três coisas o diferenciam, e as duas primeiras são o motivo de ser mais barato de operar:

• É de código aberto (Apache-2.0) — leia o código, faça um fork, hospede você mesmo.
• Roda no seu computador — os arquivos ficam na sua máquina; nada vai para uma nuvem de terceiros.
• Usa qualquer modelo que você quiser — Codex, Claude ou mais de 15 outros modelos via sua CLI existente, ou sua própria chave de API (BYOK).

A questão do custo: pare de racionar tokens

A formulação de Roy é direta e é exatamente o ponto: uma ferramenta de design em nuvem fechada consome sua cota de tokens muito rápido, então você acaba racionando o seu trabalho de design. O Open Design remove esse teto porque a geração roda pelo agente/assinatura que você já tem, ou por uma chave que você controla. Você decide o equilíbrio custo/qualidade por projeto — um modelo barato para rascunhos, um modelo de ponta para a passada final — em vez de ser tarifado pelo teto de design separado de outra pessoa. A auto-hospedagem também significa que o trabalho acontece na sua máquina, o que mantém tudo enxuto.

Passo 1 — Instale e detecte seus modelos

O caminho mais simples é o app de desktop: vá em open-design.ai/download, escolha seu sistema operacional, baixe e arraste para dentro. Prefere o código-fonte:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Abra a URL local que ele imprime (uma porta dinâmica — não fixe nenhuma no código). Nas configurações, o Open Design reconhece imediatamente os modelos instalados localmente — Roy tem Codex e Claude, e ele também captaria o OpenCode ou outros. Defina um padrão, ou traga sua própria chave de qualquer provedor para nem precisar de uma CLI instalada. Essa é a singularidade: você não é forçado a um único fornecedor.

Modo de apresentação de slides: escolha uma categoria de apresentação e faça um fork de um exemplo como ponto de partida.

Passo 2 — Construa uma landing page, itere barato

Roy constrói uma landing page para um serviço de streaming de jogos. Ele envia o briefing, o Open Design retorna um formulário de descoberta (tipo de saída, público, direção de marca, escopo, nível de movimento), ele responde, e ele constrói — rodando aqui no Claude Opus porque é o que sua CLI está configurada para usar. O resultado é uma primeira versão sólida: hero, números de demo, suporte a plataformas, uma página de preços, depoimentos, FAQ — responsiva em desktop, tablet e celular.

As ferramentas de iteração mantêm baixo o custo das mudanças: selecione uma área e adicione uma nota, deixe um comentário ou faça edição inline para alterar o texto diretamente. Mude para a visão de código para ver o HTML gerado e os arquivos de design. Quando estiver satisfeito, o botão Compartilhar exporta para PDF ou faz deploy direto para o Vercel ou Cloudflare Pages (cole seu token e o site vai ao ar), ou você clica para o código-fonte e continua trabalhando no VS Code, Cursor ou no seu editor.

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

Passo 3 — Além das páginas: gere um vídeo

O Open Design não se limita a design estático. Roy usa a skill de movimento hyperframes para gerar um gráfico de barras animado no estilo do New York Times — leva alguns minutos e produz um MP4 de verdade que você pode inserir em um vídeo mais longo ou usar como um trecho de marca. Há também mais de 170 plugins de design systems para escolher (Apple, PlayStation e mais), e como a biblioteca é aberta, a comunidade continua acrescentando a ela.

Quando usar qual (a avaliação honesta)

Roy é justo quanto a isso. Recorra ao Open Design quando quiser flexibilidade de modelos, custo menor ou auto-hospedagem — o trabalho fica na sua máquina e roda no modelo que você escolher, inclusive um de terceiros. Recorra à ferramenta em nuvem fechada quando quiser uma configuração mínima, sem instalação, e o menor esforço para começar — e note que ela ainda é um pouco mais polida de cara. Mesmo conteúdo, um acabamento ligeiramente maior lá; bem mais controle e custo de operação menor aqui.

Dicas

• Rode no agente que você já paga (ou BYOK) para escapar de um teto de tokens separado.
• Rascunhe em um modelo barato, finalize em um forte — você controla o botão de custo/qualidade por projeto.
• Use edição inline e comentários por área para mudanças baratas e cirúrgicas em vez de regenerações completas.
• Exporte para código ou faça deploy no Vercel/Cloudflare direto pelo Compartilhar quando terminar.
• Experimente a skill hyperframes quando precisar de movimento/vídeo, não apenas páginas estáticas.

FAQ

Como isso economiza tokens em comparação com uma ferramenta em nuvem fechada? A geração roda pelo seu próprio agente/assinatura ou pela sua própria chave de API, então não há um orçamento de design separado e tarifado para esgotar — você escolhe o modelo e o custo.

Posso continuar trabalhando a saída no meu editor? Sim — a saída é HTML/arquivos editáveis. Clique para o código-fonte e continue no VS Code, Cursor ou em qualquer editor, ou faça deploy no Vercel/Cloudflare Pages.

Ele faz mais do que páginas web? Sim — protótipos, decks, imagens e vídeo (via a skill de movimento hyperframes), além de uma grande biblioteca de design systems.

É gratuito? O app é de código aberto sob Apache-2.0 e gratuito para rodar localmente. Você paga apenas pelo uso de modelo e mídia do agente e da chave que conectar.

---

Este guia escrito é baseado na demonstração de Roy Shavit. Assista ao vídeo completo acima e inscreva-se no canal de Roy Shavit para mais conteúdo prático de construção com IA.