Open Design — um primeiro olhar honesto (bugs, contornos e configuração com qualquer modelo)

Este guia é um primeiro olhar deliberadamente honesto sobre o Open Design — as partes que simplesmente funcionam e as arestas com que você vai se deparar, mostradas ao vivo em vez de cortadas na edição. Ele também aborda um truque genuinamente útil: conectar qualquer modelo de forma barata por meio de um provedor compatível com OpenAI. Segue a avaliação prática que Sasha (ИИШНЫЙ) grava 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 espaço de trabalho do Open Design: descreva o que você quer construir, escolha um modo e seu agent faz o resto.

O que é o Open Design?

O Open Design é uma plataforma de design de código aberto e local-first — uma alternativa agent-native ao Claude Design. O problema do "mingau roxo da IA" (toda interface gerada parecer igual) é exatamente o que ferramentas como esta tentam resolver, e a resposta do Open Design é rodar por cima do agent de programação que você já usa em vez de entregar um modelo próprio. Ele detecta Claude Code, Codex, Cursor, Gemini, OpenCode e outros na sua máquina e usa isso como motor. O enquadramento de Sasha: ele acumulou dezenas de milhares de estrelas no GitHub na primeira semana porque é gratuito, aberto e não está preso a um único provedor.

• Código aberto, Apache-2.0 — clone, leia, hospede você mesmo.
• Roda localmente — seus projetos são pastas na sua própria máquina.
• Qualquer agent, qualquer modelo — incluindo sua própria API key por meio de qualquer provedor compatível com OpenAI.
• Uma biblioteca robusta de habilidades de design e design systems embutida.
• Mais do que protótipos — apresentações de slides, imagens, até vídeo.

Passo 1 — Instalar e configurar

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 a fixe no código). Prefere zero configuração? Pegue o aplicativo desktop em open-design.ai/download. No primeiro início, a página de configurações detecta as CLIs de agent na sua máquina — Sasha usa o Codex — e permite definir um modelo padrão, adicionar provedores de mídia (MiniMax, OpenAI GPT Image e outros), conectar fontes de dados, trocar de idioma e escolher um tema.

Passo 2 — Use qualquer modelo via um provedor compatível com OpenAI

Esta é a pepita mais útil da análise de Sasha. Além das CLIs detectadas, o Open Design permite que você traga sua própria key para qualquer API compatível com OpenAI — o que significa que você pode rotear por um agregador como o OpenRouter e usar quase qualquer modelo, muitas vezes mais barato:

1. No seu provedor, crie uma API key e copie-a.
2. Nas configurações do Open Design, escolha o tipo de provedor OpenAI (OpenRouter e agregadores semelhantes falam a API OpenAI).
3. Cole a key e, crucialmente, altere a base URL para o endpoint do seu provedor (por exemplo, a base URL do OpenRouter) e então escolha o modelo desejado.
4. Salve — a geração agora é roteada por esse provedor.

Uma pegadinha que Sasha encontra: a seleção de modelo muda de forma global, não por projeto, então se a geração de mídia quebrar depois da troca, é porque o provedor de imagens seguiu a troca de modelo. Defina as keys dos seus provedores de mídia explicitamente.

Passo 3 — Construa um protótipo (com arestas e tudo)

Crie um projeto, escreva seu brief, escolha alta fidelidade e envie. O Open Design executa primeiro um formulário de descoberta — ele adapta as perguntas ao seu prompt (plataforma alvo, para quem é, tom, animação, restrições), depois um seletor de direção visual (tipografia + paleta) e então constrói. A saída é um protótipo vivo e interativo com controles embutidos — o app gerado por Sasha permite alternar animações e trocar a cor de destaque direto na página.

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

Ressalvas honestas que Sasha mostra na câmera (e como lidar com elas):

• Ele pode escolher por padrão a habilidade errada. Se começar a construir um "checkpoint/blog" quando você queria um app mobile, diga explicitamente: "use a habilidade mobile-app / front-end". Defina a habilidade antes de gerar.
• O Inspect precisa de tags data-oid. A ferramenta Inspect no canvas precisa do artefato com tags; se ela disser que não consegue selecionar elementos, peça ao agent para "reconstruir o protótipo com tags data-oid" e então recarregue.
• Ele é jovem e lança rápido. Espere falhas ocasionais (a navegação some após uma edição, etc.) — o projeto se atualiza quase diariamente, então faça pull de novo com frequência.

Passo 4 — As ferramentas sobre o canvas (o verdadeiro atrativo)

Uma vez com tags, o ciclo de edição é o destaque. O Inspect permite passar o cursor sobre qualquer elemento e ajustar cor, tamanho e estilo diretamente. O Edit permite reescrever texto inline (sem ir e voltar ao chat para mudar uma única palavra). O Comment/picker permite selecionar uma área, desenhar e enviar uma nota ao agent ("transforme este menu em um carrossel com rolagem e barra de progresso"). É o ciclo de feedback rápido e visual que é desajeitado de reproduzir com um agent simples num terminal.

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

Quando terminar, o Share exporta para PDF, PPTX, HTML autônomo ou markdown — ou faz deploy na Vercel com um clique. O veredito honesto de Sasha: para apresentações e páginas de isca digital já é um mini construtor conveniente; para prototipagem de apps/sites complexos, espere iteração de verdade. Considerando que tem apenas uma semana e se atualiza constantemente, a base é sólida.

Dicas

• Conecte o OpenRouter (ou qualquer provedor compatível com OpenAI) para usar modelos mais baratos ou diferentes — lembre-se de alterar a base URL.
• Defina a habilidade explicitamente antes de gerar para que ele não escolha por padrão o template errado.
• Peça tags data-oid se o Inspect não conseguir selecionar elementos, e então recarregue.
• Apoie-se no Inspect/Edit/Comment para ajustes visuais rápidos em vez de refazer o prompt no chat.
• Faça pull de novo com frequência — o projeto lança correções quase diariamente.

FAQ

Posso usar um modelo diferente do Claude — e pagar menos? Sim. Aponte o Open Design para qualquer CLI detectada, ou traga sua própria key para qualquer provedor compatível com OpenAI (por exemplo, OpenRouter) definindo a key e a base URL — isso abre quase qualquer modelo.

O Inspect/edit não está selecionando elementos — por quê? O artefato precisa de tags data-oid. Peça ao agent para reconstruir o protótipo com elas e então recarregue a pré-visualização.

Está pronto para produção? É cedo e está iterando rápido. Já é ótimo para decks e páginas de isca digital; para apps complexos, trate a saída como um rascunho sólido que você refina.

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

---

Este guia escrito é baseado na análise prática de Sasha (ИИШНЫЙ). Assista ao vídeo completo acima e inscreva-se no ИИШНЫЙ para mais testes honestos e sem edição de ferramentas de IA.