Mais um repositório de código aberto acabou de clonar o Claude Design

Este guia é um primeiro olhar estruturado sobre o Open Design: instale, rode uma demo rápida, percorra os sistemas de design e os templates integrados e termine com uma leitura honesta de onde ele brilha e onde ainda está cru. Ele segue o caminho que o Chase AI percorreu em seu passo a passo prático, reescrito e atualizado para a versão atual para que você possa acompanhar etapa por etapa. Assista ao vídeo acima para ver a execução ao vivo ou continue lendo para a versão escrita.

O espaço de trabalho do Open Design — um canvas tranquilo e familiar com protótipos, apresentações, imagens e vídeo, tudo em um só lugar.

O que é o Open Design?

O Open Design é uma plataforma de design de código aberto e local-first que roda em cima do agente de programação que você já usa. Em vez de prendê-lo a um único provedor de modelos, ele detecta as CLIs que já estão na sua máquina — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode e mais algumas dezenas — e deixa esse agente conduzir a geração. O Chase chama isso de "traga seu próprio agente", e é exatamente esse o ponto: você não paga taxas de API separadas em cima de uma assinatura que já tem, porque a geração roda pela sua própria CLI.

Alguns pontos que valem a olhada:

• Código aberto, Apache-2.0 — clone, hospede você mesmo, leia cada linha.
• Roda localmente — seus projetos ficam em pastas na sua própria máquina, não na nuvem de outra pessoa.
• Agente plugável — mais de 21 agentes de programação são suportados; você escolhe qual CLI conduz o trabalho ou traz sua própria chave de API para outro harness.
• Mais do que protótipos — protótipos, apresentações, layouts de revista, geração de imagens e até vídeo, tudo a partir de um único espaço de trabalho.
• Uma biblioteca robusta de sistemas de design e skills já integrada, para que você não comece de um canvas em branco.

Se você já usou o Claude Design, a interface vai parecer familiar de imediato — o Open Design mantém a mesma estética tranquila e então acrescenta capacidades extras (apresentações, imagem e vídeo) por cima. O enquadramento honesto: é um espaço de trabalho próprio, aberto, local e agent-native, não apenas uma repaginação de alguma ferramenta.

Antes de começar

Você tem três maneiras de instalar o Open Design. Escolha a que combina com você:

Caminho	Melhor para	Requisitos
App de desktop	A maioria das pessoas — zero configuração	Nenhum. É só baixar e abrir.
Rodar a partir do código-fonte	Desenvolvedores que querem ler ou modificar o código	Node ~24, pnpm 10.33.x
Instalar no seu agente	Quem vive no terminal	Uma CLI de agente de programação já existente

O Chase mostra o caminho do terminal no vídeo, mas hoje o app de desktop é o caminho recomendado — sem Node, sem pnpm, sem clonar, e ele detecta seus agentes automaticamente para você.

Passo 1 — Instale o Open Design

Opção A — App de desktop (recomendado, zero configuração)

Acesse open-design.ai/download e pegue a build para o seu sistema operacional. Depois de instalar, o app detecta automaticamente cada CLI de agente de programação que já esteja no seu PATH e carrega para você as skills e os sistemas de design integrados. É a forma mais rápida de chegar a um espaço de trabalho funcionando.

Opção B — Rodar a partir do código-fonte

Se você prefere rodar a partir do repositório — como o Chase faz no vídeo —, basta um punhado de comandos:

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

Depois abra a URL local que ele imprime no seu terminal. Ele resolve uma porta dinâmica, então não fixe nenhuma — apenas clique no endereço que aparecer. Você precisa de Node ~24 e pnpm 10.33.x; o Corepack vai selecionar a versão fixada do pnpm para você. (Se um servidor de desenvolvimento não subir, você pode dizer ao seu agente "suba o servidor de desenvolvimento do Open Design" e deixá-lo cuidar do comando.)

Opção C — Instalar no seu agente de programação

Para usar o Open Design sem nunca abrir a GUI — chamando-o como uma skill dentro do seu agente — rode:

od mcp install <agent>
# od ships with Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Depois, dentro do agente, é só pedir: Use open-design to generate a landing page with the Airbnb design system.

Passo 2 — Primeira execução: conecte seu agente de programação

Na primeira vez que você abre o Open Design, ele varre sua máquina e mostra cada CLI local que encontrou. Um aviso pergunta como você quer conduzir a IA. Esta é a etapa do "traga seu próprio agente".

• Escolha uma CLI local. Apontar o Open Design para o Claude Code, o Codex ou o OpenCode significa que a geração usa a assinatura que você já paga, em vez de cobrar taxas de API separadas. (Você também pode conectar sua própria chave de API se preferir outro harness.)
• Deixe o modelo no padrão a menos que tenha um motivo para não fazer isso — ele segue a configuração da sua própria CLI.
• Adicione provedores de mídia (opcional). Quer gerar imagens, vídeo ou áudio? Adicione suas próprias chaves de API para provedores como OpenAI, MiniMax, ElevenLabs e outros. É isso que libera o lado de imagem e vídeo do espaço de trabalho — algo que um clone puro do Claude Design não te dá.
• Ative e desative skills e sistemas de design. Habilite apenas as capacidades de que você precisa para o trabalho à sua frente.

Você pode mudar qualquer uma dessas opções depois, então mantenha tudo simples na primeira passada.

Passo 3 — Explore o espaço de trabalho

No topo você vai encontrar Designs, Exemplos, Sistemas de design e as bibliotecas de templates de imagem e vídeo. As duas que mais importam num primeiro olhar são os sistemas de design e os exemplos.

A biblioteca de sistemas de design: cada entrada decompõe uma marca real em paleta, tipografia, componentes e atmosfera visual que você pode reutilizar como ponto de partida.

A biblioteca de sistemas de design é o destaque. Cada entrada pega uma marca do mundo real — a Airbnb, por exemplo — e a decompõe em paleta, tipografia, componentes e atmosfera visual geral. Se você quer uma página com a cara daquela marca, encaixa o sistema e a geração parte dessas regras em vez de um canvas em branco.

Uma observação franca do passo a passo do Chase: os exemplos são produzidos por prompts de uma única linha, com o prompt exato exibido logo no card. Eles parecem impressionantes, mas não há mágica secreta por trás — o que você vê é o que você digitou. Trate-os como inspiração, não como uma promessa de mágica em um clique. As galerias de templates de imagem e vídeo são parecidas: úteis como referência, mas com menos valor no dia a dia do que os fluxos de protótipos e apresentações. Concentre sua atenção nos entregáveis que você de fato vai publicar.

A biblioteca de templates: pontos de partida de protótipo, slide, imagem e vídeo que você pode filtrar por tipo e bifurcar para começar.

Você pode navegar pela biblioteca completa de plugins na web em open-design.ai/plugins antes de instalar qualquer coisa.

Passo 4 — Construa algo

O fluxo de trabalho de verdade — e onde o Open Design justifica seu valor — é criar protótipos e apresentações. Funciona mais ou menos como você esperaria:

1. Dê um nome ao projeto e escolha um ou mais sistemas de design da lista integrada.
2. Escolha a fidelidade — wireframe para esboçar a estrutura rápido, ou alta fidelidade para a versão completa e estilizada.
3. Opcionalmente, importe um ZIP do Claude Design. Construiu seu próprio sistema de design no Claude Design? Abra o projeto lá, escolha Share → Download project as .zip e então faça upload desse ZIP no Open Design. Todos os arquivos de design aparecem no espaço de trabalho, prontos para reutilizar. (No momento, essa importação de ZIP é a forma mais limpa de trazer sua própria marca — ainda não há um botão de "criar um sistema de design do zero".)
4. Escreva o briefing e clique em criar. O Open Design roda o mesmo tipo de perguntas e respostas esclarecedoras que você veria no Claude Design — para quem é, quantos slides, qual fidelidade, qual tom visual — e então monta uma lista de tarefas e vai resolvendo. No vídeo, o Chase pede uma landing page para um SaaS fictício chamado Lighthouse com três direções comparáveis (empilhada clássica, editorial e arrojada) e depois gera uma apresentação brutalista e a exporta para o PowerPoint.

A saída é um artefato real e interativo construído a partir do sistema de design que você escolheu. A leitura honesta do Chase: os resultados chegam a algo como uma "solução de 90%" — uma apresentação fiel à marca e utilizável, com alguns ajustes de espaçamento e formatação que sobram para você. Para algo que ainda é inicial, é um ponto de partida forte.

Dicas

• Use uma CLI local, não a API, para que a geração use uma assinatura que você já tem em vez de ser cobrada por chamada.
• Parta de um sistema de design integrado para pular o canvas em branco; importe um ZIP do Claude Design quando precisar da sua própria marca.
• Adicione apenas as chaves de mídia que você de fato vai usar — você não precisa de todos os provedores para começar.
• Espere um rascunho de 90% e depois refine. Exporte cedo (inclusive para o PowerPoint) para pegar os pequenos desvios de formatação antes de entregar.
• Apoie-se primeiro em protótipos e apresentações. São as superfícies mais polidas; as galerias de exemplos e templates funcionam melhor como inspiração do que como entregáveis prontos.

Perguntas frequentes

O Open Design é gratuito? Sim — é de código aberto sob a licença Apache-2.0. Você o roda localmente de graça; você só paga pelo uso de modelo e mídia de qualquer agente e provedores de API que conectar. Apontá-lo para uma CLI local significa que a geração se apoia na assinatura que você já tem.

Quais agentes de programação ele suporta? Mais de 21 agentes, incluindo Claude Code, Codex, Cursor, Gemini, GitHub Copilot e OpenCode. O Open Design detecta automaticamente as CLIs já instaladas na sua máquina, então geralmente você não precisa configurar nada.

Posso usar meu próprio sistema de design? Sim. O caminho mais tranquilo hoje é construir o sistema no Claude Design, baixar o projeto como um ZIP e importar esse ZIP no Open Design — seus tokens e componentes vêm direto. Ainda não há um botão dedicado de "criar um sistema de design" na GUI, então a importação de ZIP é o caminho recomendado.

Em que ele difere do Claude Design? A mesma sensação familiar, mas de código aberto, local-first e com agente plugável em mais de 21 CLIs — além de capacidades extras como apresentações, layouts de revista, geração de imagens e vídeo que uma ferramenta de provedor único não oferece. É uma versão inicial, então conte com algumas arestas, mas a base é sólida.

---

Este guia escrito é baseado no passo a passo prático do Chase AI. Assista ao vídeo completo acima e inscreva-se no Chase AI para mais análises práticas de ferramentas de IA.