Open Design: o Claude Design aberto que roda na sua máquina

A Anthropic lançou o Claude Design em 17 de abril.

A ferramenta funciona. Aponta pra onde o design com IA está indo. Mas é fechada.

Você usa dentro do claude.ai. Depende do plano da Anthropic. Roda no modelo que eles deixam você usar.

Poucas semanas depois, apareceu o Open Design no GitHub.

Apache 2.0. Mais de 6 mil estrelas. Roda local.

E faz uma coisa simples de entender, mas importante.

Ele pega o agent que você já usa e transforma esse agent em uma ferramenta de design.

Não é só um clone open source.

É um pedaço de infraestrutura que realizaram um trabalho insana de engenharia reversa.

O que é o Open Design

Pensa assim.

Hoje você pode ter Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen ou GitHub Copilot rodando na sua máquina.

Cada um desses agents lê arquivo, escreve código, executa comando e monta coisa.

Mas eles ainda são genéricos.

Você precisa explicar demais. Pedir do jeito certo. Conduzir o fluxo. Revisar tudo no braço.

O Open Design entra como uma camada por cima disso.

Ele não tenta ser o agent.

Ele usa o agent que você já tem instalado como motor.

O papel dele é organizar o processo de design pra esse agent trabalhar melhor.

Você escolhe uma skill. Escolhe um design system. Escreve o brief. Responde algumas perguntas. E ele coloca o agent pra trabalhar dentro de um fluxo guiado.

Um daemon local roda na sua máquina.

Esse daemon dá ao agent acesso ao filesystem, com Read, Write, Bash e WebFetch.

Em outras palavras: o Open Design cria um ambiente onde a IA abre arquivo, cria arquivo, roda comando e busca informação dentro do seu projeto local.

Ela não fica imaginando uma tela.

Ela trabalha em cima de arquivos reais.

No final, o resultado aparece como artifact renderizado, uma caixinha isolada dentro da interface onde você vê a tela funcionando sem expor o resto do ambiente.

Você gera, vê, edita, exporta. HTML, PDF, PPTX, ZIP ou Markdown.

Como ele opera, na prática

Quando você pede pra uma IA “criar uma landing page bonita”, ela tenta adivinhar tudo.

Adivinha o público. Adivinha o tom. Adivinha a hierarquia. Adivinha o estilo visual. Adivinha o que é importante.

Às vezes acerta.

Mas a maior parte das vezes entrega uma tela genérica. Bonita por fora, fraca por dentro.

O Open Design tenta resolver isso com processo.

Antes de gerar, ele pergunta.

Qual é a superfície? Landing, dashboard, app mobile, deck, documentação? Quem é o público? Founder, designer, dev, usuário final, time interno? Qual é o tom? Mais premium, mais técnico, mais editorial, mais simples? Existe contexto de marca, design system, identidade visual? Qual é a escala? Protótipo rápido ou artifact completo?

Pra um leigo, parece detalhe.

Pra Product Designer, isso é o básico que separa uma tela aleatória de uma solução minimamente pensada.

Design não começa no Figma.

Design começa na pergunta certa.

E é nisso que o Open Design força disciplina.

Skill define o tipo de raciocínio. Design system define a gramática visual. Direção visual define o tom estético. Checklist define o critério de qualidade. Discovery form define o brief.

A IA continua tendo liberdade.

Mas dentro de restrição.

E restrição é o que melhora output.

O que vem pronto

19 skills baseadas em arquivos

As skills são modos de trabalho.

Cada skill ensina o agent a criar um tipo específico de artifact.

Tem skill pra:

Web prototype. SaaS landing. Dashboard. Pricing page. Docs page. Blog post. Mobile app. Simple deck. Guizang PPT, que é deck com estética de revista. PM spec. Weekly update. OKRs. Runbook. Kanban. Fatura. Relatório financeiro.

E outros templates de documento.

Isso é importante porque uma dashboard não nasce com a mesma lógica de uma landing.

Uma landing precisa vender uma promessa. Uma dashboard precisa organizar decisão. Uma documentação precisa reduzir dúvida. Um deck precisa conduzir uma narrativa. Um PM spec precisa alinhar escopo, contexto, critérios e trade-offs.

Cada formato pede um raciocínio diferente.

O Open Design empacota esse raciocínio em arquivos.

71 design systems em DESIGN.md

Aqui está uma das partes mais fortes.

Ele já vem com 71 design systems estruturados.

Tem referência como Linear, Stripe, Vercel, Airbnb, Notion, Apple, Cursor, Supabase, Figma, Resend, Raycast, Lovable, Spotify, PostHog, Sentry, MongoDB, Cal e várias outras.

Mas o ponto não é copiar a estética da Stripe.

O ponto é dar ao agent uma gramática visual.

Sem isso, a IA mistura tudo.

Um pouco de SaaS genérico. Um pouco de startup premium. Um pouco de dashboard futurista. Um pouco de template bonito do Dribbble.

Com DESIGN.md, o agent recebe direção concreta. Espaçamento, tipografia, tom visual, densidade, componentes, uso de cor, hierarquia, estilo de interface.

Pra Product Designer, isso é ouro.

A IA deixa de trabalhar por gosto e passa a trabalhar por restrição.

5 direções visuais curadas

Quando você não tem brand definida, o Open Design oferece 5 caminhos:

Editorial Monocle. Modern Minimal. Tech Utility. Brutalist. Soft Warm.

Cada direção vem com palette OKLch e font stack determinísticos.

Em outras palavras: ele já amarra cores e fontes que combinam, em vez de deixar a IA escolher um azul bonito qualquer.

5 device frames pixel perfect

Frames pra:

iPhone 15 Pro. Pixel. iPad Pro. MacBook. Browser Chrome.

Útil quando você quer apresentar a interface dentro de um contexto real de uso.

Não é só a tela solta. É a tela dentro do dispositivo.

Pra apresentação, estudo de caso, pitch ou doc, isso muda a percepção de qualidade.

Como instalar

Pré-requisito:

Node 24. pnpm 10.33.x.

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

Abre a URL que o tools-dev imprime. Pronto.

Na primeira carga, ele faz algumas coisas sozinho.

Detecta os CLIs disponíveis no seu PATH. Carrega as 19 skills. Carrega os 71 design systems. Abre um welcome dialog pra você colar a API key da Anthropic, caso queira usar o fallback BYOK.

BYOK significa Bring Your Own Key. Você usa a sua própria chave de API. Não fica obrigado a pagar uma assinatura nova só pra ferramenta funcionar..

Em texto direto: o estado do trabalho fica salvo localmente, mas não vai pro seu repositório principal.

Seus primeiros 10 minutos

O fluxo do primeiro projeto é mais ou menos assim.

Você escreve o brief.

Exemplo: “crie uma landing page pra uma ferramenta de análise de documentos jurídicos com IA, voltada pra advogados autônomos.”

Antes de sair gerando a tela, o Open Design abre um question form. Surface, audience, tone, brand context, scale. Você responde no rádio em poucos segundos.

Isso parece pequeno, mas é uma mudança grande.

A maioria das ferramentas de IA pula essa etapa. Elas querem entregar rápido.

O Open Design tenta entender antes de executar.

Se você não tem marca definida, ele abre um segundo form com as 5 direções visuais. Você escolhe uma. O agent pega aquela direção e faz bind verbatim da palette e do font stack no template seed.

Em texto direto: ele amarra o visual escolhido no começo do projeto, pra o resultado não virar uma salada estética no meio do caminho.

Daí o agent começa a trabalhar.

Você vê o todo card sendo atualizado em tempo real. In progress. Completed. Etapas. Arquivos.

Se quiser mudar a direção no meio, você redireciona sem perder tudo.

O artifact aparece renderizado no iframe sandbox. O arquivo fica editável no workspace. A sessão fica persistida em SQLite.

Você fecha hoje, abre amanhã, o todo card está onde você deixou.

Um detalhe muito iraaado!

Essa é a parte que muita gente vai meio que deixar de lado.

Cada camada do prompt stack é um arquivo.

Cada skill é uma pasta. Cada design system é um DESIGN.md. Cada checklist é um arquivo de critério. Cada direção visual é um spec.

Isso significa que você pode mexer no método.

Duplicar uma skill. Editar o checklist. Criar um design system da sua empresa. Adaptar o tom. Trocar a regra visual. Padronizar outputs pro seu time. Transformar seu jeito de trabalhar em um sistema reutilizável.

Esse é o verdadeiro valor.

Não é só gerar uma tela.

É transformar processo de design em infraestrutura.

Se você trabalha em produto, isso vai abrir várias possibilidades.

Um time pode ter uma skill de discovery. Uma skill de landing. Uma skill de dashboard. Uma skill de documentação. Uma skill de handoff. Uma skill de estudo de caso. Uma skill de apresentação executiva.

Tudo com o mesmo padrão visual e o mesmo nível de exigência.

A skill vira o método do time, escrito em Markdown, versionado em Git, editável por qualquer um.

Onde ele diverge do Figma

O Figma é ferramenta de desenho, colaboração e prototipação visual.

O Open Design é outra coisa.

Ele não começa pelo canvas.

Ele começa pelo brief.

O output pode até virar interface visual, mas o caminho é diferente.

No Figma, você desenha o estado final.

No Open Design, você descreve intenção, restrição e contexto, e o agent monta o artifact. Pode matar o Figma, mas é uma proposta diferente.

Pra algumas coisas, Designer ainda vai querer refinar visualmente no Figma.

Pra outras, talvez nem precise começar por ele.

Landing simples. Protótipo navegável. Tela interna. Dashboard inicial. Deck. Documento. Spec. Pricing. Docs.

Muita coisa pode nascer direto como artifact.

E esse artifact pode ser exportado.

Não é “a IA fez uma telinha bonita”.

É o fluxo saindo do canvas e indo pra um sistema de geração orientado por contexto.

O que ele não resolve

Não dá pra romantizar.

Open Design não vai transformar um brief ruim em produto bom.

Se você não sabe o que quer, ele vai organizar uma incerteza. Se o design system for fraco, o output vai carregar essa fraqueza. Se a skill estiver mal escrita, o agent vai seguir uma regra ruim. Se você não souber avaliar hierarquia, usabilidade, densidade e clareza, vai aceitar qualquer tela bonita.

A ferramenta melhora o fluxo.

Mas o critério ainda precisa ser humano.

Principalmente em produto.

Porque uma interface pode parecer boa e ainda assim resolver o problema errado.

Uma visão importante

A Anthropic vende o Claude Design como parte do Pro, Max e Team.

O Open Design aponta pra outra direção.

Sua API key. Seu CLI. Sua máquina. Seu design system. Seu processo. Seu output.

Isso conversa com uma tendência maior.

Ferramentas fechadas vão tentar vender ambientes completos.

Ferramentas abertas vão tentar virar camada de orquestração em cima dos agents que você já usa.

E essa segunda opção é interessante pra times de produto.

Porque ela permite adaptação.

Você não fica preso ao gosto visual de uma plataforma. Não fica preso a um modelo único. Não fica preso a um fluxo imposto. Não fica dependente de uma assinatura nova pra cada camada do processo.

Você monta sua própria esteira.

O ponto

Se você já paga Claude Code, Cursor, Codex ou outro CLI compatível, você já paga o motor.

O Open Design adiciona a camada que faltava.

UI. Daemon local. Skills. Design systems. Direções visuais. Checklist. Preview. Exportação. Persistência.

Ele pega um agent genérico e dá a ele um processo de design.

Esse é o sinal importante.

Design está deixando de ser só uma prática dentro de uma ferramenta visual.

Está virando uma camada operacional em cima de agents.

Brief. Pergunta. Direção. Sistema. Execução. Revisão. Artifact.

Esse fluxo é o futuro mais provável do Product Design com IA.

E o Open Design é uma das primeiras ferramentas abertas mostrando isso com clareza.

GitHub: github.com/nexu-io/open-design

Acesse minha mentoria