Open Design em 20 minutos — instalação completa + demonstração
Um tutorial completo para começar do zero — instale o Open Design, conecte seu coding agent, conheça o workspace e construa seu primeiro protótipo de alta fidelidade. Baseado no vídeo de primeiras impressões prático do CodingMenace.
Este guia leva você pelos seus primeiros 20 minutos com o Open Design — de uma instalação limpa até seu primeiro protótipo gerado. Ele segue o caminho que o CodingMenace (Dennis) percorreu no vídeo de primeiras impressões prático dele, reescrito e atualizado para refletir a versão atual, para que você possa acompanhar passo a passo. Assista ao vídeo acima para ver o tutorial ao vivo, ou continue lendo para a versão escrita.
O Open Design se posiciona como a alternativa open source ao Claude Design — desktop-first, agent-native, Apache-2.0.
O que é o Open Design?
O Open Design é uma plataforma de design open source e local-first — uma alternativa agent-native ao Claude Design e ao Figma. Em vez de prender você a um único provedor de modelos, ele roda em cima do coding agent que você já usa: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode e mais de uma dúzia de outros. É "traga seu próprio agent", não apenas traga sua própria chave.
Algumas coisas que fazem dele algo que vale a pena conferir:
- Open source, Apache-2.0 — clone, faça self-host, leia cada linha.
- Roda localmente — seus projetos ficam nas suas próprias pastas, na sua máquina, e não na nuvem de outra pessoa.
- Agents plugáveis — mais de 21 coding agents são suportados; você escolhe qual CLI vai conduzir a geração.
- Muito além de protótipos — protótipos, artefatos vivos, apresentações de slides, layouts estilo revista, geração de imagens e até vídeo, tudo a partir de um único workspace.
- Uma ampla biblioteca de design systems e skills já embutidos, para que você não comece de uma tela em branco.
Se você já usou o Claude Design, a aparência e a experiência serão imediatamente familiares — o Open Design mantém deliberadamente a mesma estética tranquila e, em cima disso, adiciona recursos.
Antes de começar
Você tem três formas de instalar o Open Design. Escolha a que melhor combina com você:
| Caminho | Ideal para | Requisitos |
|---|---|---|
| App desktop | A maioria das pessoas — zero configuração | Nenhum. Basta 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 dentro do seu agent | Quem vive no terminal | Uma CLI de coding agent já existente |
O vídeo usa o caminho de rodar a partir do código-fonte, mas o app desktop é a rota recomendada hoje — ele não precisa de Node, nem de pnpm, nem de clonar o repositório.
Passo 1 — Instale o Open Design
Opção A — App desktop (recomendado, zero configuração)
Acesse open-design.ai e clique em Download desktop. Há builds disponíveis para macOS (Apple Silicon e Intel), Windows (x64) e Linux (AppImage). Após instalar, o app detecta automaticamente todas as CLIs de coding agent já presentes no seu PATH e carrega para você as skills e os design systems embutidos.
Opção B — Rodar a partir do código-fonte
Se você preferir rodar a partir do repositório — como o Dennis faz no vídeo —, basta executar três comandos:
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run webDepois, abra a URL local que ele imprime. Você precisa de Node ~24 e pnpm 10.33.x; o Corepack vai selecionar para você a versão fixada do pnpm.
Opção C — Instale dentro do seu coding agent
Para usar o Open Design sem nunca abrir a interface gráfica — chamando-o como uma skill ou um servidor MCP dentro do seu agent —, execute:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …Depois, dentro do agent, basta pedir: Use open-design to generate a landing page with the Linear design system.
Passo 2 — Primeira execução: conecte seu coding agent
Na primeira vez que você inicia o Open Design, ele escaneia sua máquina e mostra todas as CLIs locais que encontrou — Claude Code, OpenCode, Copilot CLI e outras. Esta é a etapa do "traga seu próprio agent".
- Escolha um agent e um modelo padrão. Deixe a CLI instalada conduzir a geração, ou force um modelo específico (por exemplo, Claude Opus) para este projeto.
- Adicione provedores de mídia (opcional). Quer gerar imagens, vídeo ou áudio? Adicione suas próprias chaves de API de provedores como OpenAI (gpt-image), MiniMax, ElevenLabs, fal, Suno e mais. É aqui que entra o traga sua própria chave.
- Conecte serviços MCP (opcional). Integre conectores como o Composio se quiser que o agent puxe dados de outras fontes.
- Ative skills e design systems. Habilite apenas os recursos de que você precisa para o tipo de trabalho que está fazendo — protótipos, apresentações de slides, apps mobile, notas de reunião e assim por diante.
Você pode mudar qualquer uma dessas configurações depois, então mantenha tudo simples na primeira passada.
Passo 3 — Explore o workspace
O Open Design mantém seu trabalho com escopo por projeto: quando você o executa em uma pasta, os designs que você cria ficam dentro daquele diretório do projeto. Troque de pasta e você troca de projeto.
Dentro de um projeto, você pode criar protótipos, artefatos vivos, apresentações de slides e animações. Para protótipos, você escolhe entre duas fidelidades:
- Wireframe — a estrutura crua: caixas e formas para esboçar o layout rapidamente.
- Alta fidelidade — um protótipo completo e estilizado da página que você está construindo.
Uma diferença importante em relação ao Claude Design: você não é obrigado a definir um design system antes. O Open Design vem com padrões sensatos e uma galeria de pontos de partida, então você pode começar a partir de um design system existente — ou de nenhum.
A biblioteca de design systems: pontos de partida de marcas do mundo real (Agentic, Airbnb, Airtable e mais) que você pode encaixar em qualquer projeto.
O marketplace vai bem além dos sistemas de marca. A biblioteca de templates cobre protótipos, slides e geração de imagens e vídeo — filtre por tipo e faça fork de qualquer um como ponto de partida.
Templates: pontos de partida de protótipo, slide, imagem e vídeo — filtre por tipo e faça fork 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 seu primeiro protótipo
Agora a parte divertida. No vídeo, o Dennis importa um projeto existente do Claude Design e pede ao Open Design para construir uma nova página para ele. Aqui está o mesmo fluxo:
- Crie um novo protótipo. Dê um nome a ele (o Dennis chama o dele de "Expensely") e escolha Alta fidelidade.
- Importe seu design system. O Open Design pode importar um ZIP existente do Claude Design, então seus tokens e componentes são preservados. Os arquivos de design importados aparecem no workspace ao lado de um preview ao vivo.
- Escreva o briefing. O Dennis pede a ele para "create a new page projecting expenses for 12 months using the previous 3 months." Você obtém o layout dividido familiar: a conversa à esquerda, o preview e os arquivos de design à direita.
- Responda às perguntas de esclarecimento. O agent faz alguns follow-ups inteligentes — mesmas cores? qual fidelidade? média simples de 3 meses? — e então planeja uma lista de tarefas, lê o design system e constrói o artefato (
projections-v2.html). - Itere sobre o design. Não gostou da primeira versão? Peça uma direção diferente. O Dennis pede "a different look and feel", escolhe uma direção editorial e obtém um novo
projections-v3— um design genuinamente diferente, construído a partir dos mesmos dados e do mesmo design system.
O resultado é um protótipo real e interativo: navegue pelos gráficos e páginas, depois exporte ou faça o handoff — tudo construído a partir do design system que você importou.
Dicas para tirar mais proveito
- Comece pela alta fidelidade quando quiser ver a coisa real; use o wireframe para esboçar a estrutura rapidamente.
- Seus designs ficam junto com a pasta do projeto — organize o trabalho executando o Open Design no diretório certo.
- Traga suas próprias chaves de mídia apenas para os provedores que você realmente usa; você não precisa de todas elas.
- Você não precisa de um design system para começar. Parta de um embutido, importe um ZIP do Claude Design ou deixe o Open Design inferir os padrões.
Perguntas frequentes
O Open Design é gratuito?
Sim — ele é open source sob a licença Apache-2.0. Você pode rodá-lo localmente de graça; você só paga pelo uso de modelo/API de qualquer agent e provedores de mídia que conectar.
Quais coding agents ele suporta?
Mais de 21 agents, incluindo Claude Code, Codex, Cursor, Gemini, GitHub Copilot e OpenCode. O Open Design detecta as CLIs já instaladas na sua máquina.
Preciso criar um design system antes de poder projetar?
Não. Diferentemente do Claude Design, o Open Design oferece padrões funcionais e uma galeria de pontos de partida. Você pode trazer seu próprio design system quando quiser um.
Como ele se diferencia do Claude Design?
A mesma experiência familiar, mas open source, local-first e com agents plugáveis — além de recursos extras como apresentações de slides, layouts estilo revista, geração de imagens e vídeo.
Este guia escrito é baseado no tutorial de primeiras impressões do CodingMenace. Assista ao vídeo completo acima e inscreva-se no canal do CodingMenace para mais vídeos práticos sobre ferramentas de IA.