Design local-first · BYOK · Apache-2.0

A alternativa open-source ao Claude Design

A CLI de agente que já vive no seu laptop vira o motor de design — conduzida por skills componíveis e design systems de marca, transmitindo artefatos para um preview sandboxed.

# 3 comandos: clonar, instalar, subir
git clone https://github.com/inematds/open-design
cd open-design && pnpm install
pnpm tools-dev  # sobe daemon + web
O que é

Design orientado por agentes, rodando na sua máquina

Open Design (OD) replica o loop artifact-first do Claude Design sem o lock-in: mesmo modelo mental, mas local-first, BYOK em todas as camadas e implantável na web. Não envia um agente — conecta o agente de codificação que você já usa a um fluxo de design orientado por skills.

🎨 11 CLIs de agente

Detecta automaticamente no seu PATH — Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, Copilot CLI e mais. Troca com um clique. Sem CLI? Use o proxy BYOK compatível com OpenAI.

🎨 Skills + Design Systems

31 skills componíveis (prototype e deck) e dezenas de design systems de marca (Linear, Stripe, Vercel, Notion...). O daemon parseia o frontmatter od: de cada SKILL.md verbatim.

🎨 Preview sandboxed

Todo <artifact> renderiza num iframe limpo segundos depois. Editável no workspace de arquivos, exportável em HTML / PDF / PPTX / ZIP / Markdown.

Como funciona

Do brief ao artefato renderizado

Você digita o brief, o OD trava as perguntas antes de improvisar um pixel, escolhe uma direção visual curada e o daemon faz spawn da sua CLI numa pasta de projeto real em disco.

Brief Formulário de descoberta Direção visual Plano TodoWrite ao vivo Daemon faz spawn da CLI Auto-crítica 5D <artifact> no preview

Daemon local

Único processo privilegiado: faz spawn da CLI na pasta do projeto, dando ao agente Read / Write / Bash / WebFetch reais contra disco real.

Persistência SQLite

Projetos, conversas, mensagens, abas e templates ficam em .od/app.sqlite. Reabre amanhã e tudo está onde você deixou.

Implantável

Local com pnpm tools-dev, camada web na Vercel, ou shell Electron empacotado (em andamento).

Pré-requisitos

O que você precisa antes de subir

Monorepo pnpm com Node 24. Pelo menos uma CLI de agente no PATH — ou as credenciais do seu provedor BYOK compatível com OpenAI.

Node 24 + pnpm

Runtime e gerenciador de pacotes do workspace (pnpm 10.33+).

# versões esperadas
node -v  # ~24
pnpm -v  # >=10.33.2

CLI de agente no PATH

Qualquer uma das 11 suportadas. O OD detecta sozinho ao iniciar.

# exemplo: Claude Code
which claude codex cursor-agent

Fallback BYOK (opcional)

Sem CLI? Cole baseUrl + apiKey + model de qualquer provedor compatível com OpenAI no proxy.

# proxy em /api/proxy/stream
baseUrl=https://...
apiKey=sk-...
Guia de uso · passo a passo

Subindo o Open Design do zero

Três comandos para rodar local. Depois é digitar o brief e deixar o agente trabalhar.

1

Clonar o repositório

Traga o monorepo para a sua máquina.

git clone https://github.com/inematds/open-design
cd open-design  # entra no projeto
2

Instalar dependências

O postinstall prepara os sidecars (tools-dev / tools-pack) e ativa os builds nativos (better-sqlite3, esbuild).

pnpm install  # resolve o workspace inteiro
3

Subir daemon + web

Ponto de entrada único do ciclo de vida. Inicia o daemon local e o app web sob stamps de sidecar tipados.

pnpm tools-dev  # start / stop / run / status / logs / inspect / check
4

Escolher skill e design system

Na tela de entrada, selecione uma skill (web-prototype, saas-landing, dashboard, deck...), um design system e digite o brief. O OD emite o formulário de descoberta antes de gerar.

# exemplo de brief
crie um pitch deck estilo revista para nossa rodada seed
5

Iterar e exportar

Acompanhe o card de todos ao vivo, redirecione em pleno voo, edite os arquivos no workspace e exporte o artefato pronto.

# exportações suportadas
HTML · PDF · PPTX · ZIP · Markdown
6

(Opcional) Build da camada web

Para implantar a UI na Vercel ou rodar checagens.

pnpm build      # build do @open-design/web
pnpm typecheck  # typecheck do monorepo
Exemplos

O que dá para criar

As 31 skills cobrem nove cenários — design, marketing, operação, engenharia, produto, finanças, RH, vendas e pessoal.

Pitch deck estilo revista

Modo deck com a skill guizang-ppt: layouts de revista, fundo hero WebGL, saída em arquivo HTML único e exportação PDF.

Protótipo mobile

Chrome do iPhone 15 Pro pixel-accurate com Dynamic Island. Multi-tela reusa os frames compartilhados em assets/frames/ — o agente nunca redesenha um celular.

Landing SaaS / dashboard

Skills saas-landing e dashboard aplicam um dos design systems de marca, com paleta OKLch e font stack determinísticos por direção visual.

Importar do Claude Design

Solte um ZIP de exportação do Claude Design no diálogo de boas-vindas — POST /api/import/claude-design o decompõe num projeto real para o agente continuar editando.

Roadmap

Para onde o projeto vai

Local-first hoje, web na Vercel, e o shell desktop empacotado em andamento.

Agora
Local-first completoDaemon + web via pnpm tools-dev, 11 CLIs detectadas, 31 skills, design systems de marca e exportação em cinco formatos.
Próximo
Camada web na VercelDeploy da UI mantendo o loop BYOK sem spawn de CLI via proxy compatível com OpenAI.
Em andamento
Desktop Electron empacotadoShell com renderer sandboxed e IPC de sidecar (STATUS / EVAL / SCREENSHOT / CLICK / SHUTDOWN) — placeholder por enquanto.
Contínuo
Mais skills e design systemsCatálogo crescente, agrupado por cenário no seletor, mantendo a convenção SKILL.md do Claude Code.