cerebro-vip INEMA.CLUB
início › INEMA.DEV Desenvolvimento

Apresentação e análise do **Open Design**, alternativa open-source e…

INEMA.DEV Desenvolvimento · 2026-05-01 · ~13 min · ver no Telegram ↗

INEMA

github.com/inematds/open-design ↗

A tese principal é:

Claude Design é excelente para começar, mas Open Design pode ser melhor para escalar, usar múltiplos modelos, trabalhar com clientes e evitar limites artificiais.

Em resumo: Open Design transforma o conceito do Claude Design em uma ferramenta local, aberta e multimodelo, permitindo criar designs, dashboards, sites e apps com mais liberdade e menos custo.

Resumo: “Substituí o Claude Design… 100% ILIMITADO”⌗

Apresento o Open Design como uma alternativa open-source e local ao Claude Design, com a principal promessa de escapar dos limites de uso do Claude/Anthropic e permitir criar designs, sites, dashboards e apps usando praticamente qualquer modelo de IA.

A ideia central é: Claude Design é bom, mas limitado. O problema é que ele consome o limite muito rápido, prende o usuário ao ecossistema da Anthropic e só permite trabalhar com modelos específicos. O Open Design tenta resolver isso permitindo uso local, múltiplos modelos, exportações variadas e design systems prontos.

Principais pontos⌗

O Open Design é descrito como um clone local do Claude Design, mas com vantagens importantes:

  • roda localmente no computador;
  • pode usar diferentes modelos de IA, como Claude, Codex, Gemini, modelos via OpenRouter etc.;
  • tem licença Apache 2.0, permitindo uso comercial e em trabalhos para clientes;
  • inclui vários design systems prontos, inspirados em marcas e estilos conhecidos;
  • permite exportar projetos como HTML, PDF, PowerPoint, ZIP e outros formatos;
  • possibilita importar projetos do Claude Design;
  • permite integrar geração de imagens com APIs como OpenAI;
  • pode fazer deploy direto para Vercel.

Demonstração⌗

Clona o repositório do Open Design e rodar o projeto localmente. Depois, ele abre a interface, escolhe um modelo/agente disponível no computador e cria um projeto chamado algo como Vantage, um dashboard SaaS de analytics.

Durante o processo, o Open Design faz perguntas para refinar o briefing, como:

  • tipo de produto;
  • público-alvo;
  • estilo visual;
  • tom da interface;
  • design system desejado;
  • nível de densidade da tela;
  • uso de animações;
  • elementos visuais principais.

A partir disso, o sistema gera um dashboard interativo com gráficos, métricas, cards e animações. Depois, ele troca o modelo de IA usado no projeto — por exemplo, de Claude para Codex — e pede melhorias específicas, mostrando que é possível usar um modelo para criar a base e outro para refinar.

Estratégia recomendada⌗

A recomendação principal é usar modelos fortes, como Claude/Opus, para criar o design inicial e depois usar modelos mais baratos ou gratuitos para fazer ajustes, variações e escala.

A lógica é:

Use o melhor modelo para criar a “arquitetura visual” inicial. Depois que o estilo já existe, outros modelos conseguem continuar e melhorar com muito menos custo.

Comparo isso com pintar uma sala: depois que a direção visual está definida, é mais fácil fazer variações e ajustes.

OpenRouter e modelos gratuitos⌗

Uma forma é conectar o Open Design ao OpenRouter via OpenCode, permitindo usar modelos gratuitos ou muito baratos. Caminhos como:

  • usar modelos gratuitos, como DeepSeek;
  • usar modelos pagos baratos via OpenRouter;
  • evitar depender do limite semanal/mensal da Anthropic;
  • misturar Claude, GPT, Gemini, DeepSeek e outros conforme a tarefa.

Apesar disso, ele diz que, para trabalho sério, prefere modelos pagos, porque são mais estáveis e confiáveis.

Para quem é útil⌗

O Open Design é apresentado como especialmente útil para:

  • agências;
  • freelancers;
  • criadores de sites SaaS;
  • pessoas que fazem muito design com IA;
  • quem já usa Claude Code, Codex, Cursor ou Gemini;
  • quem está cansado dos limites do Claude Design;
  • quem quer usar designs comercialmente com segurança.

Quando talvez não valha a pena⌗

Talvez não seja ideal para pessoas muito iniciantes ou que não querem lidar com instalação local, terminal, repositório GitHub e configuração de modelos. Para essas pessoas, o Claude Design tradicional pode ser mais simples.

Também o projeto ainda é recente, com cerca de poucos dias/semanas de vida, então pode ter bugs.

Conclusão⌗

O Open Design como uma alternativa poderosa ao Claude Design: mais aberta, local, flexível, comercialmente segura e sem depender de um único modelo.

FIM DA SKILL⌗

Ao final, o usuário terá:

  • ✅ CLI do OpenCode instalada e disponível no $PATH
  • ✅ OpenCode configurado com a chave de API do OpenRouter
  • ✅ Modelo padrão definido conforme escolha gratuita ou paga
  • ✅ Open Design rodando com OpenCode no dropdown de agente
  • ✅ Designs sendo gerados via OpenRouter, não Claude/Anthropic
  • ✅ Limite semanal da Anthropic não sendo mais usado

b-instruct:free google/gemini-2.0-flash-exp:free mistralai/mistral-small-3.1-24b-instruct:free `

Slugs úteis de modelos pagos⌗

anthropic/claude-sonnet-4.7
openai/gpt-5.5-codex
deepseek/deepseek-chat-v3.1
google/gemini-2.5-pro
qwen/qwen3-coder-plus`

Para voltar a usar Claude diretamente no Open Design, basta escolher “Claude” no dropdown de agente. O Open Design detecta automaticamente as CLIs que estão no `$PATH`.

---

## FALLBACK — se o adaptador OpenCode estiver quebrado no Open Design

O Open Design tem uma regressão conhecida, `#163`, em que o adaptador do OpenCode às vezes sai com código 1. Se os logs do daemon mostrarem isso, mude para o caminho Codex + redirecionamento por variável de ambiente:

```# Passo F1 — instalar Codex
npm install -g @openai/codex

## Passo F2 — adicionar ao ~/.zshrc
cat >> ~/.zshrc << EOF

## OpenRouter via Codex (fallback do Open Design)
export OPENAI_BASE_URL=https://openrouter.ai/api/v1
export OPENAI_API_KEY=$OPENROUTER_KEY
EOF

source ~/.zshrc

## Passo F3 — reiniciar o Open Design a partir de um terminal novo
cd ~/Desktop/open-design
pnpm tools-dev run web```

No dropdown de agente do Open Design, escolha **Codex**. Ele vai rotear pelo OpenRouter por baixo dos panos; o Codex acha que está chamando a OpenAI, mas o OpenRouter aceita o mesmo formato de conexão.

---

## SOLUÇÃO DE PROBLEMAS — erros comuns

| Sintoma                                                      | Causa                                         | Correção                                                                              |
| ------------------------------------------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------- |
| `401 Unauthorized` do OpenRouter                             | chave errada ou revogada                      | recriar a chave em `openrouter.ai/keys`                                               |
| `429 too many requests`                                      | limite do plano gratuito                      | esperar ou migrar para o pago                                                         |
| `model X not found`                                          | slug do modelo errado ou descontinuado        | verificar os modelos atuais em `openrouter.ai/models`                                 |
| Open Design escolhe Claude mesmo com OpenCode instalado      | daemon foi iniciado antes do OpenCode         | reiniciar o daemon a partir de um shell novo                                          |
| Arquivo de autenticação do OpenCode editado, mas nada mudou  | caminho errado                                | rodar `opencode config path` para encontrar o local correto                           |
| `Error: Cannot find module 'opencode-ai'`                    | instalação global não atualizou o PATH        | adicionar `$(npm prefix -g)/bin` ao PATH em `~/.zshrc`                                |
| Painel de custo mostra valor diferente de zero no OpenRouter | o painel está mostrando o estimador do Claude | é apenas visual; o OpenRouter cobra separadamente e registra o uso em `openrouter.ai` |

---

## NOTAS PARA O AGENTE QUE EXECUTAR ISTO

* **Sempre pergunte ao usuário se ele quer gratuito ou pago no Passo 1** antes de escrever qualquer configuração. Nunca presuma.
* **Espere a chave de API no Passo 2** — não continue sem ela.
* **Pare se o teste rápido falhar no Passo 5** — não force o processo. Mostre o erro e pergunte ao usuário como ele quer seguir.
* **Não repita a chave de API inteira no chat** depois que o usuário colar. Apenas confirme que foi salva. Se precisar exibir, mascare tudo exceto os últimos 4 caracteres.
* **Trate isto como idempotente** — se o usuário já tiver feito alguns passos, como instalar o OpenCode, pule adiante e não reinstale.

---

TER_KEY",
      "baseURL": "https://openrouter.ai/api/v1"
    }
  },
  "defaultProvider": "openrouter",
  "defaultModel": "$DEFAULT_MODEL"
}
EOF

Restrinja as permissões da configuração, pois ela contém a chave em texto puro:

bash chmod 600 ~/.config/opencode/config.json

Confirme ao usuário:

✅ OpenCode configurado com OpenRouter. Modelo padrão: $DEFAULT_MODEL. Configuração protegida em ~/.config/opencode/config.json.

PASSO 5 — Teste rápido do OpenCode⌗

opencode "Say hello in exactly three words."

Esperado: uma resposta com 3 palavras.

Falhas comuns:

Saída Significado Correção
401 Unauthorized chave incorreta pedir novamente a chave do OpenRouter
429 rate limit limite do plano gratuito esperar 60s e tentar de novo, ou sugerir o caminho pago
model not found erro de digitação ou modelo descontinuado tentar outro modelo da lista abaixo
Travou por mais de 30s problema de rede verificar com curl https://openrouter.ai/api/v1/models -H "Authorization: Bearer $OPENROUTER_KEY"

Se o teste rápido falhar, pare e mostre o erro — não continue para o Passo 6.

PASSO 6 — Verificar a instalação do Open Design⌗

Encontre onde o usuário clonou o Open Design. O padrão é ~/Desktop/open-design. Pergunte se não estiver lá.

cd ~/Desktop/open-design 2>/dev/null || (echo "Where is Open Design cloned?" && exit 1) test -f package.json && grep -q '"name": "open-design"' package.json && echo "OK" || echo "WRONG_DIR"

Confirme que as dependências estão instaladas:

test -d node_modules || pnpm install

PASSO 7 — Reiniciar o Open Design⌗

O daemon do Open Design detecta CLIs de código na inicialização. Ele precisa reiniciar para reconhecer o OpenCode.

Diga ao usuário:

⚠ Se o Open Design estiver rodando agora, pare-o neste momento com Ctrl+C naquele terminal. Vou iniciar novamente em seguida.

Espere a confirmação e rode:

cd ~/Desktop/open-design pnpm tools-dev run web

Observe os logs do daemon. Procure por uma linha como:

[od] detected agents: claude, opencode, ...

Se opencode não aparecer nessa linha:

  1. Verifique which opencode; se estiver vazio, o OpenCode não está no $PATH deste shell
  2. Rode a partir de um terminal novo onde o binário global do npm esteja no $PATH

PASSO 8 — Trocar o agente na interface⌗

Diga ao usuário:

Abra http://localhost:3000 — ou a porta que o daemon informou — no navegador.

Na área de chat, clique no dropdown de agente no canto superior direito, onde atualmente aparece “Claude”, e selecione OpenCode.

Tente este prompt:

Build a SaaS landing page for an AI analytics product. Use the Linear design system. Hero with one headline + CTA + screenshot mockup. Three feature cards. Pricing section. Footer.

O painel de custo no canto inferior direito deve mostrar $0.0000. Você está usando OpenRouter, não Anthropic, então o estimador de custo do Claude é ignorado.

PASSO 9 — Confirmar e explicar como trocar modelos depois⌗

Se tudo funcionou, diga ao usuário:

✅ Pronto. O Open Design agora está usando OpenCode → OpenRouter → $DEFAULT_MODEL.

Para trocar modelos depois:

  • Edite ~/.config/opencode/config.json e altere defaultModel
  • Ou passe --model <slug> por chamada, se o OpenCode oferecer suporte

Slugs úteis de modelos gratuitos⌗

```text deepseek/deepseek-chat-v3.1:free meta-llama/llama-3.3-70b-instruct:free qwen/qwen-2.5-coder-32

config/opencode/config.json << EOF { "providers": { "openrouter": { "apiKey": "$OPENROU

Open Design para OpenRouter⌗

Cole esta página inteira no seu agente (Anti-Gravity, Claude Code, Cursor, Codex). O agente vai configurar o OpenCode + OpenRouter de ponta a ponta e conectá-lo ao Open Design.

O que esta skill faz: configura a CLI do OpenCode, autentica com o OpenRouter, faz um teste rápido da conexão e depois integra isso a uma instalação em execução do Open Design para que o agente de design use o OpenRouter — com modelos gratuitos ou pagos — em vez de Claude, OpenAI etc.

Tempo estimado: 10 minutos.

Pré-requisitos que o agente deve verificar primeiro⌗

  • macOS ou Linux; Windows funciona via WSL
  • Node 20+ instalado (node --version)
  • npm disponível (npm --version)
  • Um navegador para pegar a chave do OpenRouter
  • Open Design já clonado em algum lugar; padrão: ~/Desktop/open-design

PASSO 0 — Pré-verificação, executada pelo agente⌗

node --version npm --version which open-design 2>/dev/null || ls ~/Desktop/open-design 2>/dev/null echo $SHELL

Esperado:

  • Node ≥ v20.0.0
  • npm disponível
  • Pasta do Open Design existe em algum lugar
  • Shell é /bin/zsh ou /bin/bash

Se alguma verificação falhar, pare e diga ao usuário o que está faltando antes de continuar.

PASSO 1 — PERGUNTE AO USUÁRIO qual caminho ele quer⌗

⚠ Antes de escrever qualquer configuração, o agente DEVE parar e fazer esta pergunta ao usuário. Não presuma.

OpenRouter gratuito ou pago?⌗

O OpenRouter tem dois caminhos:

Caminho A — Modelos gratuitos Sem cartão necessário.

  • Modelos marcados com :free, como DeepSeek V3.1, Llama 3.3 70B, Qwen Coder 32B, Gemini 2.0 Flash exp, Mistral Small 24B
  • Com limite de uso: cerca de 20 requisições/minuto e cerca de 200/dia por modelo
  • Qualidade: boa para testes e projetos pessoais; alguns modelos gratuitos reduzem bastante a velocidade no meio da sessão
  • Melhor para: testar, projetos hobby, trabalhos ocasionais de design

Caminho B — Pago, BYOC, frações de centavo por chamada

  • Mesmos modelos sem o sufixo :free, além de modelos pagos como Claude Sonnet 4.7, GPT-5.5, DeepSeek V3 Pro
  • Recarregue US$ 5 uma vez no OpenRouter; você talvez gaste cerca de US$ 0,30 por design
  • Sem rate limits, sem throttling, sem queda de qualidade
  • Melhor para: trabalho real, entregas para clientes, qualquer coisa que você vá iterar bastante

Qual deles — A (gratuito) ou B (pago)?

Espere a resposta do usuário antes de continuar. Salve a resposta em uma variável PATH_CHOICE (free ou paid).

PASSO 2 — Obter a chave de API do OpenRouter⌗

Diga ao usuário:

Abra esta URL no navegador: *https://openrouter.ai/keys*

  1. Faça login ou crie uma conta — é grátis

  2. Clique em Create Key

  3. Dê um nome como “open-design”

  4. Copie a chave — ela começa com sk-or-v1-...

  5. Cole a chave de volta aqui para mim

⚠ Espere o usuário colar a chave. Salve em OPENROUTER_KEY.

Valide o formato:

echo "$OPENROUTER_KEY" | grep -E '^sk-or-v1-[a-zA-Z0-9]{20,}$' || echo "INVALID FORMAT"

Se for inválido, peça novamente.

PASSO 3 — Instalar a CLI do OpenCode⌗

npm install -g opencode-ai

Verifique:

opencode --version

Esperado: um número de versão, por exemplo 0.x.x.

Se aparecer command not found:

NPM_BIN=$(npm prefix -g)/bin echo "Add this to ~/.zshrc: export PATH=\"$NPM_BIN:\$PATH\""

Depois peça ao usuário para adicionar essa linha e rodar:

source ~/.zshrc

PASSO 4 — Configurar o OpenCode com a chave do OpenRouter⌗

Escolha o modelo padrão com base na escolha anterior do usuário:

Se o usuário escolheu Modelo padrão
free deepseek/deepseek-chat-v3.1:free
paid anthropic/claude-sonnet-4.7

Escreva o arquivo de configuração:

```bash mkdir -p ~/.config/opencode cat > ~/.config/opencode/config.json << EOF { "providers": { "openrouter": { "apiKey":

Resumo do repositório nexu-io/open-design

Open Design é uma alternativa open-source e local-first ao Claude Design. A proposta é gerar artefatos de design com IA — protótipos web, mobile, dashboards, apresentações, posts, documentos, imagens/vídeos etc. — usando agentes de código que já estão instalados na máquina do usuário, como Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, Copilot CLI e outros.

O projeto não “traz um agente próprio”; ele funciona como uma camada de workflow, UI, daemon local, skills e design systems. O daemon detecta CLIs no PATH, escolhe um agente disponível e o coloca para trabalhar em um projeto real no filesystem. Se não houver CLI, há fallback BYOK com proxy compatível com OpenAI.

O que ele oferece:

  • 31 skills embutidas, divididas entre modo prototype e modo deck.
  • Design systems prontos, com esquemas de cor, tipografia, layout, componentes, motion, voz e anti-patterns.
  • Preview sandboxed em iframe.
  • Exportação para HTML, PDF, PPTX, ZIP e Markdown.
  • Persistência local com SQLite e arquivos em .od/.
  • Suporte a protótipos web, mobile, decks, dashboards, landing pages, e-mails, carrosséis sociais, runbooks, OKRs, invoices e relatórios.

A arquitetura usa Next.js 16 + React 18 + TypeScript no frontend, um daemon em Node 24 + Express + SSE + better-sqlite3, e transporte via child_process.spawn para conversar com os agentes CLI. O armazenamento fica em arquivos locais e SQLite dentro da pasta .od/.

Como rodar:

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

Requisitos principais: Node ~24 e pnpm 10.33.x. Na primeira execução, ele detecta os agentes disponíveis, carrega as skills/design systems e cria automaticamente a pasta local .od/.

Em uma frase: É uma plataforma local e open-source para transformar prompts em artefatos visuais reais, usando agentes de código existentes, workflows de design estruturados, skills reutilizáveis e design systems portáveis.

OPEN DESIGN

chatgpt.com ↗

1

Recursos

↑ voltar ao topo · ver no Telegram ↗