Como o Open Design funciona — a arquitetura auto-hospedável de "traga sua própria chave"

Este guia é para quem quer entender o que está realmente executando: como o Open Design funciona por baixo do capô, por que ele pode ser auto-hospedado e BYOK em cada camada, e por que suas skills e design systems são apenas arquivos que você pode bifurcar. Ele segue o walkthrough centrado em arquitetura que o AI Stack Engineer apresenta em seu vídeo completo, reescrito e atualizado para a versão atual. Assista ao vídeo acima para a execução ao vivo, ou continue lendo para a versão escrita.

O hub de plugins: navegue pelo registro, importe plugins e prepare-os para sua equipe.

O que é o Open Design?

O Open Design é um substituto totalmente de código aberto para uma ferramenta de design em nuvem: local-first, implantável na web e BYOK em cada camada. "BYOK" significa traga sua própria chave (bring your own key). Em vez de embutir o próprio modelo ou agente, o Open Design varre sua máquina em busca de qualquer CLI de programação que você já tenha — Claude Code, Codex, Cursor, Gemini, OpenCode e outros — e a usa como motor. Se nenhuma estiver no seu path, há um fallback para a API da Anthropic. A licença é Apache-2.0, então você pode bifurcá-lo, implantá-lo internamente e modificá-lo livremente.

O ponto ao qual o AI Stack Engineer sempre retorna: uma ferramenta de design em nuvem roda apenas no modelo de um único fornecedor, na nuvem dele, atrás de um plano pago, sem nenhuma opção de auto-hospedagem. O Open Design inverte os três — sua máquina, seu agente, sua chave.

Como ele é construído (a parte que vale a pena entender)

A arquitetura é deliberadamente simples:

• Frontend — um app em Vite + React + TypeScript.
• Backend — um daemon em Node + Express com SQLite para projetos, conversas, mensagens e abas.
• O daemon é o único processo privilegiado. Ele inicia a CLI que você escolheu, com o diretório de trabalho definido como uma pasta por projeto dentro de um diretório oculto .od.

Esse último ponto é o que faz do Open Design mais do que uma caixa de chat: o agente recebe ferramentas reais de leitura / escrita / bash / web-fetch sobre um sistema de arquivos real. Quando ele gera um artefato, está gravando arquivos de verdade no disco, que você pode abrir, editar, versionar e exportar — em vez de devolver um blob numa janela de chat.

Skills e design systems são apenas arquivos

Dois blocos de construção fazem a maior parte do trabalho, e ambos são arquivos simples que pertencem a você:

• As skills cobrem superfícies reais — protótipo web, landing SaaS, dashboard, página de preços, docs, blog, app mobile, apresentações (incluindo uma skill de PPT estilo revista) — além de modelos de entregáveis como specs de PM, atualizações semanais, atas de reunião, runbooks, relatórios financeiros, faturas, quadros Kanban e OKRs. Cada uma é um arquivo que você pode ler, editar ou ampliar.
• Os design systems são armazenados como arquivos DESIGN.md em markdown puro. Cada um define cor, tipografia, espaçamento, layout, componentes, movimento, tom, regras de marca e antipadrões, extraídos de marcas reais.

O espaço de trabalho do Open Design: descreva o que você quer criar, escolha um modo e seu agente faz o resto.

Como ambos são arquivos, todo o seu fluxo de design se torna versionável e bifurcável — uma equipe pode manter sua própria skill interna e seu DESIGN.md de marca no git e fazer qualquer agente gerar com base neles.

Instalar e auto-hospedar

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install   # isso baixa muitas dependências — dê um minuto a ele
pnpm tools-dev run web

Abra a URL local que ele imprimir (uma porta dinâmica — não fixe no código). Prefere zero configuração? O app de desktop em open-design.ai/download dispensa Node e pnpm. No primeiro carregamento, ele varre seu PATH e lista os agentes que encontrou; escolha um (o AI Stack Engineer testa o caminho não-Claude com OpenCode), ou use a opção BYOK da Anthropic.

Dois detalhes espertos na pilha de prompts que vale a pena conhecer: um formulário de descoberta (ele pergunta sobre superfície, público, tom, marca e escala antes de escrever — 30 segundos de botões de opção economizam 30 minutos de redirecionamento) e um seletor de direção (cinco direções visuais selecionadas com paletas determinísticas, para que o modelo não improvise o clima).

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

Quando terminar, exporte para HTML, PDF ou ZIP — ou implante. Como é implantável na web e local-first, nada precisa tocar a nuvem de terceiros.

O veredito honesto

O AI Stack Engineer é equilibrado: uma ferramenta em nuvem polida e afinada para um modelo de ponta ainda vence no acabamento pronto para uso e na amplitude de exportação. O Open Design vence no que importa para muita gente — é gratuito e Apache-2.0, você traz seu próprio agente e chave, e a flexibilidade de modelo é um superpoder discreto: se um fornecedor aumentar os preços, ou você quiser comparar como dois modelos lidam com um layout, basta trocar o agente no menu suspenso e executar de novo. Algumas notas honestas: está em estágio inicial de research preview; o Claude Code recebe o streaming mais rico (stream-JSON estruturado), enquanto outras CLIs são bufferizadas por linha; a qualidade da saída depende muito do modelo para o qual você aponta; e alguns recursos, como edições cirúrgicas no modo comentário, ainda estão no roadmap.

Dicas

• Entenda a pasta de projeto .od — seus artefatos são arquivos reais ali; faça backup / commit deles.
• Mantenha skills e DESIGN.md no git para um fluxo versionado e compartilhável em equipe.
• Use uma CLI local para que a geração rode sobre uma assinatura que você já paga.
• Escolha o motor com intenção — um modelo fraco, mesmo com um ótimo design system, ainda produz resultado fraco.
• Auto-hospede / implante quando precisar de privacidade ou controle — nada precisa sair da sua máquina.

Perguntas frequentes

O que significa "BYOK em cada camada"? Você traz sua própria CLI de agente e sua própria chave de modelo. O Open Design fornece a superfície de design, as skills e os design systems; o modelo e seu custo ficam do seu lado.

Onde meu trabalho realmente fica? Na sua máquina, em uma pasta por projeto dentro de .od, gerenciada pelo daemon local (SQLite + arquivos reais). É auto-hospedável e implantável na web.

Posso personalizar as skills e os design systems? Sim — são arquivos simples (skills como pastas, design systems como DESIGN.md). Edite-os, adicione os seus e mantenha-os sob controle de versão.

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

---

Este guia escrito é baseado no walkthrough completo do AI Stack Engineer. Assista ao vídeo completo acima e inscreva-se no AI Stack Engineer para mais análises práticas de stacks de IA.