Primeiro o formulário
Surface · público · tom · marca · escala. Trinta segundos de radios valem mais que trinta minutos de retrabalho.
Open source · Local-first · BYOK
Open Design
A alternativa open source ao Claude Design.
Movido pelo coding-agent CLI que você já tem — Claude Code, Codex, Cursor, Gemini, OpenCode e mais onze. 110 Skills · 141 Design Systems · 5 direções visuais · Apache-2.0.
Apache-2.0 · sem cadastro · seu CLI, suas chaves
Open Design · demo ao vivo
Ver os 110 skills Por que isso existe
O Claude Design viralizou. E continuou fechado.
O Claude Design da Anthropic (Opus 4.7, abril de 2026) mostrou o que acontece quando um LLM para de escrever prosa e começa a entregar artifacts de design. Viralizou — e continuou fechado, pago, só na nuvem, preso ao modelo da Anthropic e aos skills da Anthropic. O Open Design é a alternativa open source. O mesmo loop. O mesmo modelo mental de «artifact em primeiro lugar». Sem o lock-in.
Fechado → aberto
Apache-2.0, de cima a baixo.
Cada skill é um arquivo. Cada design system é um arquivo Markdown. Cada prompt é um módulo TypeScript que você pode ler e editar.
Agente embutido → o seu
Use o CLI que você já tem.
16 CLIs de coding-agents detectados automaticamente no seu PATH. Sem CLI? Cole qualquer baseUrl + apiKey compatível com OpenAI.
Nuvem → local
Roda no seu laptop. Faz deploy na Vercel.
pnpm tools-dev pra rodar local. SQLite em .od/. Deploy opcional na Vercel. Seus dados, seu sistema de arquivos, sua decisão.
Como um prompt vira um artifact
Quatro passos. Sem improviso.
O OD não deixa o modelo improvisar nem um pixel. Cada brief é travado antes de a pintura começar.
Seletor de direção
Sem brand spec? Escolha entre 5 direções visuais curadas — cada uma com paleta OKLch determinística e stack tipográfico.
TodoWrite em streaming
O plano do agente chega como card ao vivo. in_progress → completed atualiza em tempo real. Mudar de direção no meio do voo sai barato.
<artifact> renderiza
Preview em iframe sandbox. Editável no lugar. Baixa em HTML, PDF, PPTX ou ZIP.
O que vem na caixa
110 Skills × 141 Design Systems.
Cada Skill é uma pasta. Cada Design System é um arquivo Markdown de 9 seções. Solte uma pasta, reinicie o daemon e ele aparece no picker. Trocou o sistema, o próximo render já usa os novos tokens.
Skill spotlight · html-ppt
Um só skill. 36 temas, 31 layouts, 47 animações, 14 templates de deck.
O skill html-ppt incluso traz cada primitiva que um agente de deck precisa: modo apresentador, biblioteca de layouts, conjunto de animações cinéticas e 14 templates prontos pra forkar. Solte a pasta, reinicie o daemon e você tem um engine PPT no navegador.
Variantes «taste-locked»
O mesmo engine, três tastes.
html-ppt-taste-brutalist e html-ppt-taste-editorial são entregues como wrappers «taste-locked» independentes — o mesmo skill, estética hard-coded. E mais três pra protótipos web: web-prototype-taste-{brutalist,editorial,soft}.
Bring your own agent
16 CLIs detectados automaticamente no seu PATH.
Os que você tiver instalados viram candidatos a engine de design. Troque com um clique pelo picker de modelo.
claude
Claude Code
stream-json
codex
Codex CLI
json-event-stream
cursor-agent
Cursor Agent
json-event-stream
gemini
Gemini CLI
json-event-stream
opencode
OpenCode
json-event-stream
qwen
Qwen Code
plain
qoder
Qoder CLI
json-event-stream
copilot
GitHub Copilot CLI
stream-json
devin
Devin Terminal
ACP
hermes
Hermes
ACP
kimi
Kimi CLI
ACP
kiro-cli
Kiro CLI
ACP
kilo
Kilo
ACP
vibe-acp
Mistral Vibe
ACP
deepseek
DeepSeek TUI
stream-json
pi
Pi
stdio JSON-RPC
Sem CLI instalado? POST /api/proxy/stream aceita qualquer baseUrl + apiKey + model compatível com OpenAI, Azure ou Google. Shim Anthropic-via-OpenAI, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, seu vLLM auto-hospedado — todo mundo no mesmo loop. Protegido contra SSRF na borda do daemon, bloqueando loopback, link-local e RFC1918.
Sete ideias que sustentam tudo
No que a gente acredita, em sete linhas.
01
A gente não traz um agente. O seu basta.
+
01
A gente não traz um agente. O seu basta.
O daemon escaneia o seu PATH atrás de 16 CLIs de coding-agents conhecidos. O que ele acha vira candidato a engine de design, conduzido por stdio com um adaptador por CLI.
02
Skills são arquivos, não plugins.
+
02
Skills são arquivos, não plugins.
Cada skill é SKILL.md + assets/ + references/. Solte uma pasta em skills/, reinicie o daemon, aparece no picker. O bundle magazine-web-ppt está incluído na íntegra, com a licença preservada.
03
Design Systems são Markdown portátil, não JSON de tema.
+
03
Design Systems são Markdown portátil, não JSON de tema.
O esquema DESIGN.md de 9 seções — cor, tipografia, spacing, layout, componentes, motion, voice, marca, anti-patterns. Cada artifact lê o sistema ativo. Trocou o sistema → o próximo render usa os novos tokens.
04
O formulário interativo evita 80 % dos retrabalhos.
+
04
O formulário interativo evita 80 % dos retrabalhos.
O turno 1 é só um <question-form>: nada de pensar, nem ferramenta, nem narrativa. Surface · público · tom · marca · escala. O custo de errar a direção é uma rodada de chat, não um deck terminado.
05
O daemon faz o agente sentir que está no seu laptop.
+
05
O daemon faz o agente sentir que está no seu laptop.
O daemon dispara o CLI com cwd na pasta de artifacts do seu projeto. O agente recebe Read, Write, Bash, WebFetch — ferramentas reais sobre um sistema de arquivos real. SQLite persiste projetos, conversas, mensagens e abas.
06
O prompt stack é o produto.
+
06
O prompt stack é o produto.
Discovery directives + identity charter + DESIGN.md ativo + SKILL.md ativo + metadados do projeto + side-files do skill. Cada camada é composable. Cada camada é um arquivo que você pode editar.
07
Open Design não é um silo. Seus outros agentes leem.
+
07
Open Design não é um silo. Seus outros agentes leem.
`od mcp` expõe o projeto como servidor MCP via stdio. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — qualquer coisa que fale MCP — lê seus artifacts, arquivos e metadados direto. Read-only na borda: leitura de arquivo, search, metadados. Sem superfície de escrita, sem chamadas externas.
O prompt stack
DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (141 systems available)
+ active SKILL.md (110 skills available)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
Cada camada é composable. Cada camada é um arquivo que você pode editar.
Comparativo
Open Design contra o resto.
Produto cloud fechado, par desktop aberto, web app aberta. A gente pega bastante coisa emprestado do open-codesign e dá os créditos em /about — outro formato, outro prompt-stack, mesma estrela-guia.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| Licença e custo | |||
| Licença | fechada | MIT | Apache-2.0 |
| Cobrança mínima | Pro / Max / Team | BYOK | BYOK — qualquer URL compatível com OpenAI |
| Formato | |||
| Formato | Web (claude.ai) | Desktop (Electron) | Web app + daemon local |
| Faz deploy na Vercel | — | — | sim |
| Runtime IA e fluxo | |||
| Runtime do agente | embutido (Opus 4.7) | embutido (pi-ai) | seu CLI existente |
| Flexibilidade de provedor | só Anthropic | 7+ via pi-ai | 16 CLI + proxy BYOK |
| Formulário (turno 1) | — | — | regra dura |
| 5 direções visuais | — | — | sim |
| Autocrítica de 5 dimensões | — | — | porteira antes de emitir |
| Skills, sistemas e migração | |||
| Skills | proprietários | 12 módulos TS | 110 bundles SKILL.md soltáveis |
| Design systems | proprietários | DESIGN.md (v0.2) | 141 sistemas inclusos |
| Importação ZIP do Claude Design | n/d | — | sim — continue de onde a Anthropic parou |
Claude Design é marca registrada da Anthropic. O Open Design não é afiliado nem endossado pela Anthropic.
Além do chat
Imagem, vídeo, áudio — a mesma superfície.
O mesmo chat que produz HTML <artifact> também roda geração de imagem, vídeo e áudio. Cada render aterrissa como um .png ou .mp4 de verdade no workspace do seu projeto. 95 prompts prontos para reproduzir em prompt-templates/.
01
gpt-image-2
Pôsteres · avatares · mapas ilustrados · infográficos · cards sociais estilo revista · UI de jogo · stills narrativos de jogo
expandir gpt-image-2
Evolução de escadaria de pedra 3D
expandir gpt-image-2
Mapa gastronômico ilustrado da cidade
expandir gpt-image-2
Cena de elevador cinematográfica
expandir gpt-image-2
Retrato anime cyberpunk
expandir gpt-image-2
Retrato glamouroso de estúdio
expandir gpt-image-2
Anime Fighting Game — Captain Ryuuga vs Kaze Renshin
expandir gpt-image-2
Three Kingdoms — Guanyu mata Yanliang
expandir gpt-image-2
Three Kingdoms — Lyubu no arco e flecha de Yuanmen
expandir gpt-image-2
Three Kingdoms — Zhaoyun foge com o berço
expandir gpt-image-2
HUD MMO de mundo aberto da China antiga
expandir gpt-image-2
Desenho infantil a giz → refeitura fotorrealista
expandir gpt-image-2
Decomposição de coreografia otaku — 16 painéis
expandir gpt-image-2
Storyboard de dança sensacional — 8 takes
02
Seedance 2.0
15 s de t2v + i2v cinematográficos com áudio · shorts narrativos · filmes de produto
Seedance 2.0
Music Podcast & violão
Seedance 2.0
Close-up emocional
Seedance 2.0
Supercarro de luxo cinematográfico
Seedance 2.0
Sátira do gato da Cidade Proibida
Seedance 2.0
Short de romance japonês
Seedance 2.0
Voo cinematográfico de dragão
Seedance 2.0
Perseguição em fábrica do ermo
Seedance 2.0
Trailer de jogo cyberpunk
Seedance 2.0
Crimson Horizon Sci-Fi
Seedance 2.0
Storyboard de academia mágica
Seedance 2.0
Briga de vampiros no beco
Seedance 2.0
Estética wuxia retrô de HK
Seedance 2.0
Three Kingdoms — Guanyu mata Yanliang
Seedance 2.0
Three Kingdoms — Lyubu no arco e flecha de Yuanmen
Seedance 2.0
Three Kingdoms — Zhaoyun foge com o berço
Seedance 2.0
Garoto 3D animado montando Lego
Seedance 2.0
Resgate do antigo dragão guardião
Seedance 2.0
Antigo reino indiano — FPV
Seedance 2.0
Motion graphics de intro de personagem
Seedance 2.0
Dança de mãos asiática oriental
Seedance 2.0
Bióloga marinha em exploração
Seedance 2.0
Corrida de rua cinematográfica
Seedance 2.0
Jumpscare de torradeira-foguete
Seedance 2.0
Pirata Disney vintage com crocodilo
Seedance 2.0
Fantasia haute couture hollywoodiana
03
HyperFrames
Motion graphics HTML→MP4 · reveals de produto · tipografia cinética · gráficos de dados
expandir HyperFrames
Outro de logo cinematográfico
expandir HyperFrames
Showcase de app em três celulares
expandir HyperFrames
Karaokê TikTok
expandir HyperFrames
Corrida de barras
expandir HyperFrames
Rota em mapa de voo
expandir HyperFrames
Contador de dinheiro hype
expandir HyperFrames
Pilha de overlays sociais
expandir HyperFrames
UI 3D-reveal
Quickstart
Três comandos. Sem cadastro.
Node ~24, pnpm 10.33.x. Roda no macOS, Windows e Linux (build AppImage via `pnpm tools-pack linux build --to appimage`). O daemon cria uma pasta .od/ local pra SQLite e artifacts por projeto. Sem passo de init.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run webO que há de novo · v0.5.0
Quatro guinadas desde v0.4.0.
v0.5.0 sobe o loop do artifact de 'renderizou e acabou' pra 'continua afinando' — Inspect mode pra ajustar estilo elemento por elemento, live dashboards viram categoria de artifact de primeira, a rubrica do Design Jury ficou mais afiada. O `od mcp` da v0.4.0 segue ali, costurando tudo isso com os outros coding agents que você tem no notebook.
Ajuste por elemento
Inspect mode — clica em qualquer coisa no preview.
Hover, clique, ajusta o computed style do elemento — cor, espaçamento, tamanho de fonte — sem voltar pro agente. O artifact atualiza ali mesmo. Quando ficar bom, as mudanças voltam pros arquivos fonte.
v0.5.0 · PR #362
Categoria de primeira
Live dashboards saem do demo e viram padrão.
Três novos skills de dashboard (`live-dashboard`, o template `clinic-console` sob `live-artifact`, `flowai-live-dashboard-template`) mais um prompt template de team-dashboard estilo Notion — todos plugam os artifacts em conectores Composio reais. O que roda no painel de preview são dados ao vivo, não mocks congelados.
v0.5.0 · PR #778 + #795 + #801 + #799
Porteira de qualidade · Fase 5
A rubrica do Design Jury passa pelo system composer.
A rubrica de cada panelista vive agora num prompt template de nível panel, injetada pelo system composer compartilhado. Entre uma rodada e outra, as avaliações ficam consistentes. Persistência, transcript e orquestrador da Fase 4 seguem em pé.
v0.5.0 · PR #524
Protocolo
od mcp — Open Design como servidor MCP.
Roda `od mcp` e qualquer coding-agent que fale MCP (Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf) lê direto os arquivos, o índice de busca e os metadados do seu projeto. Read-only na borda. O projeto que o app OD tá com aberto agora é o que todos os outros agentes enxergam.
v0.4.0 · PR #399
A linhagem do Open Design
Do que o Open Design foi composto.
alchaincyf
Bússola da filosofia de design
huashu-design ↗
Workflow Junior-Designer, protocolo brand-asset de 5 passos, checklist anti-AI-slop, autocrítica de 5 dimensões e as 5 escolas × 20 filosofias de design por trás do seletor de direção do Open Design.
op7418
Modo deck
guizang-ppt-skill ↗
Incluído na íntegra em skills/guizang-ppt/ com a LICENSE original. Layouts estilo revista, hero WebGL e cultura de checklists P0/P1/P2 vazaram pra todos os outros skills do Open Design.
OpenCoworkAI
Parente mais próximo · estrela polar de UX
open-codesign ↗
Loop de artifact em streaming, preview em iframe sandbox, painel de agente ao vivo (todos + tool calls + interruptível), exportação em cinco formatos, anotações em modo comentário. O formato diverge de propósito — open-codesign entrega Electron + pi-ai, Open Design entrega web + daemon local + seu CLI.
multica-ai
Arquitetura do daemon
multica ↗
Detecção de agente por scan do PATH, daemon local como único processo privilegiado, visão do agente como colega de time. Open Design adota o modelo arquitetural; o código do multica em si não é embarcado.
Manda uma estrela
Se isso te economizou meia hora — manda um ★.
Estrelas não pagam aluguel, mas avisam o próximo designer, agente e contributor que esse experimento merece a atenção deles.
Apache-2.0
Open source
110
Skills
141
Design Systems
16 + BYOK
CLIs
FAQ
Perguntas comuns
O que é o Open Design?
+
O Open Design é a alternativa open source ao Claude Design da Anthropic. Roda local com pnpm tools-dev, faz deploy na Vercel e usa o coding-agent CLI que você já tem (Claude Code, Codex, Cursor, Gemini, OpenCode, +11 outros) como engine de design. Sob licença Apache-2.0.
Em que o Open Design difere do Claude Design?
+
O Claude Design é fechado, pago (Pro/Max/Team), só na nuvem e preso ao modelo e skills da Anthropic. O Open Design é open source, BYOK, local-first, e te deixa trocar de modelo livremente entre 16 adaptadores CLI ou qualquer endpoint compatível com OpenAI / Azure / Google.
O Open Design pode substituir o Claude Design pro meu time?
+
Se você precisa de auto-hospedagem, flexibilidade de modelos ou skills próprios, sim. O loop fechado (detectar agente → escolher skill + design system → chat → parsear <artifact> → preview → salvar) roda ponta a ponta. v0.4.x trouxe Critique Theater (nota da Design Jury antes do envio), Tweaks mode (picker de elemento + anexos no chat), Manual edit mode e live artifacts puxando dados ao vivo dos conectores Composio.
Preciso de assinatura Claude Pro pra usar o Open Design?
+
Não. O Open Design usa o coding-agent CLI que você já tem no PATH, ou qualquer chave de API compatível com OpenAI via o proxy BYOK. Traga suas próprias chaves do provedor que preferir.
Quais CLIs de coding-agent o Open Design suporta?
+
16 de fábrica: Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Devin for Terminal, Hermes, Kimi CLI, Kiro CLI, Kilo, Mistral Vibe, DeepSeek TUI e Pi. Detectados automaticamente no PATH ao iniciar o daemon.
Como importo um projeto Claude Design existente pro Open Design?
+
Solte um ZIP de export do Claude Design no diálogo de boas-vindas. POST /api/import/claude-design extrai numa pasta real .od/projects/<id>/, abre o arquivo de entrada como aba e prepara um continue-prompt pro seu agente local.
Dá pra auto-hospedar o Open Design na Vercel?
+
Sim. A camada web é Next.js 16 + React 18 + TypeScript, deployável na Vercel. O daemon local fica no seu laptop. Topology B (Vercel + túnel) pra setups totalmente remotos está no roadmap.
Como adiciono um design system próprio no Open Design?
+
Solte um arquivo DESIGN.md em design-systems/<sua-marca>/ seguindo o esquema de 9 seções (cor, tipografia, spacing, layout, componentes, motion, voice, marca, anti-patterns). Reinicie o daemon — aparece no picker.
O Open Design é grátis? Qual a licença?
+
Apache-2.0. Os bundles skills/guizang-ppt/ e skills/html-ppt/ mantêm as licenças MIT originais com atribuição preservada. Sem tier pago. Sem limite de uso. O único custo é o que o seu provedor de LLM cobrar.
Como o Open Design evita o look de AI-slop?
+
Um formulário no turno 1 trava o brief antes de o modelo pintar. Um picker de 5 direções traz paletas determinísticas quando não tem brand spec. Uma autocrítica de 5 dimensões dá nota antes de emitir. Cada skill traz uma checklist P0/P1/P2 imposta via injeção de side-files no pre-flight. Gradientes roxos agressivos, ícones de emoji genéricos e Inter como display são explicitamente proibidos no prompt stack.
Dá pra usar o Open Design sem instalar nenhum CLI?
+
Dá. POST /api/proxy/stream encaminha chunks SSE pra qualquer endpoint compatível com OpenAI, Azure ou Google. Cole baseUrl, apiKey e model — DeepSeek, Groq, OpenRouter, MiMo, Azure OpenAI, Google Vertex, seu vLLM auto-hospedado, o shim Anthropic-via-OpenAI — todo mundo funciona. Protegido contra SSRF em loopback e redes privadas.
Como valido a config do provider BYOK sem abrir um chat?
+
Settings → Execution ganhou um botão Connection test (v0.5.0, PR #507). Cola baseUrl + apiKey + model, dá Test — Open Design dispara um handshake mínimo no provider e mostra ou a resposta ou o frame de erro exato. Funciona com Anthropic, OpenAI compatível, Azure e Google. Te poupa o desvio 'abrir chat e rastrear a falha' quando a chave tá errada, o nome do modelo tá com typo ou o gateway tá bloqueando.
Meus dados vão pra Anthropic quando uso o Open Design?
+
Só se você escolher o modelo da Anthropic (Claude Code ou via o proxy BYOK com chave da Anthropic). O Open Design em si guarda tudo num SQLite local em .od/app.sqlite e em arquivos por projeto sob .od/projects/. Nada sobe pra servidor do Open Design — não existem servidores Open Design.
Meus outros coding-agents conseguem ler projetos Open Design?
+
Sim. Roda `od mcp` e o Open Design se expõe como servidor MCP via stdio. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — qualquer ferramenta que fale MCP — consegue ler os arquivos do seu projeto, rodar search e inspecionar metadados. A interface é read-only na borda: leitura de arquivo, search, metadados. Sem superfície de escrita, sem chamadas externas. Entregue na v0.4.0.
O que é o Critique Theater?
+
Uma Design Jury com 5 panelistas que dá nota a cada artifact antes de ele sair — acessibilidade, fit de marca, craft, conteúdo, estrutura. Persistência + transcript + orquestrador estão ponta a ponta desde a Fase 4 da v0.4.0. Abaixo do limite configurado o agente revisa e renota; acima dele, o artifact é emitido.
O que são live artifacts e quais conectores são suportados?
+
Live artifacts puxam dados ao vivo pro painel de preview através de um catálogo de conectores Composio — GitHub, Linear, Notion, Gmail e mais. Os skills inclusos orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion e o social-media-dashboard mostram a fiação ponta a ponta. Entregue na v0.4.0 (PR #381).
Entregar
Entregue seu primeiro artifact em três minutos.
Clone o repo. Rode três comandos. Digite um prompt. Veja o formulário chegar, preencha, veja o card de todo em streaming, veja o artifact renderizar.