O que são os artefatos ao vivo do OpenDesign e como o painel de ajustes re-renderiza sem recarregar?

Mexer num parâmetro do dashboard na frente de outra pessoa e ver o painel responder na hora é outro nível de conversa

Nada de "deixa eu gerar de novo e te mando"

O OpenDesign é um app de desktop local-first mantido pela organização nexu-io no GitHub, no repositório nexu-io/open-design, distribuído sob licença Apache-2.0

Ele se posiciona como alternativa open source ao Claude Design, com uma ideia bem específica por trás: o agente de código vira o motor de design

E olha que massa, ele não traz modelo próprio, roda em cima dos agentes que tu já tem instalado, com chave própria (BYOK)

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Onde os artefatos ao vivo se encaixam dentro do OpenDesign

Antes de falar do painel, vale entender o terreno

O app é local-first e gera protótipos, landing pages, dashboards, slides, imagens e vídeo, com export em HTML, PDF, PPTX e MP4

Quem faz a ponte com os agentes é um daemon local: ele varre o PATH na inicialização, detecta os agentes de código disponíveis e liga eles ao fluxo de design guiado por skills

A lista inclui Claude Code, Codex, Cursor, DeepSeek Harness, OpenCode e mais de 20 CLIs via BYOK

As definições de runtime ficam em apps/daemon/src/runtimes/defs/, com registro e stream compartilhado em apps/daemon/src/runtimes/

E os artefatos ao vivo, o que são exatamente?

A categoria Live Artifacts descreve dashboards ao vivo, decision rooms e painéis de KPI como artefatos de página única

A marca da categoria é essa: o artefato continua editável no lugar e vai atualizando conforme o dado muda

E de onde vem o dado? De um catálogo de conectores Composio, com GitHub, Linear, Notion e Gmail entre os disponíveis

Marco de versão pra tu se situar: os artefatos ao vivo puxando dados de conectores Composio entraram na 0.4.0, no PR #381

E o projeto anda rápido, viu… a 0.16.0 aparece como a mais recente na página de releases do repositório, descrita como 92 PRs de 20 contribuidores em 5 dias 😀

Como o painel de ajustes re-renderiza sem recarregar a página

Agora o porquê antes do como

A descrição oficial do dashboard ao vivo é um painel de KPI editável cujo painel de ajustes expõe os parâmetros que vale a pena mexer

O agente emite um manifesto e o iframe re-renderiza sem reload

A mecânica de ajuste em si mora na skill tweaks, que envolve qualquer artefato HTML com um painel lateral de controles parametrizados

Esses controles reescrevem CSS custom properties em tempo real e o estado persiste em localStorage

As duas camadas dentro de um único arquivo:

O arquivo do artefato com painel de ajustes tem duas camadas dentro de um único HTML self-contained, ligadas por uma ponte em vanilla JS

• Stage: o artefato é re-chaveado pra que toda decisão visual leia de CSS custom properties (--accent, --scale, --density, --mode, --motion)
• Panel: uma sidebar fixa (drawer em viewport pequena) com form controls ligados a essas variáveis

Os controles expostos são accent color, type scale, density, motion e theme

Se tu já mexeu com variável CSS na mão, a ideia é bem semelhante: em vez do JS reconstruir a árvore, ele só troca o valor da variável e o navegador repinta

É por isso que não tem reload no meio

A persistência, passo a passo:

1. No primeiro paint, o artefato lê o JSON salvo no localStorage, sob a chave STORAGE_KEY
2. Aplica os valores nas variáveis com setProperty
3. Escuta o evento change de cada form control e grava de volta no localStorage

document.documentElement.style.setProperty('--accent', value)

Detalhe que parece bobo e não é: o STORAGE_KEY deve virar um slug único, no formato tweaks-<artifact-slug>

Dois artefatos com a mesma chave dividem o mesmo estado salvo, e aí tu ajusta um e o outro herda a bagunça

O toggle Tweaks e os dois protocolos:

A toolbar do viewer do Open Design tem um toggle Tweaks, que controla a visibilidade do painel de fora do iframe

Pra esse toggle funcionar, o artefato precisa falar um de dois protocolos: um baseado em postMessage e outro baseado em classe

Tome cuidado aqui, porque a doc da skill é dura nesse ponto: escolhe o protocolo A ou o B, sem misturar os dois, sem inventar um terceiro e sem renomear os identificadores

Misturou, o toggle simplesmente não conversa com o artefato

live-dashboard, dating-web, flowai-dashboard e orbit: qual skill faz o quê

Essa é a confusão mais comum de quem chega agora

Várias skills entregam um layout de dashboard bonitão, mas layout não é encanamento de dados

Resumindo a régua: live-dashboard é a única que sabe ligar os conectores Composio dentro do render

As skills orbit-* e a social-media-dashboard servem como mapa, elas mostram a fiação ponta a ponta dos conectores

Quando acionar o painel de ajustes?

A própria documentação da skill tweaks dá o gatilho

Aciona quando o brief pede variants, side-by-side options, tweak this, let me adjust, live knobs ou equivalentes

Ou seja: quando o pedido é "me deixa mexer", e não "me entrega pronto"

Quando o dashboard ao vivo compensa (e quando um print resolve)

O exemplo oficial ajuda a aterrissar isso

É um HTML self-contained de página única, com KPIs, sparkline de 7 dias, feed de atividade em tempo real e uma tabela de tarefas de banco linkado

A fonte de dados é o Notion, via conector Composio

Com esse desenho na cabeça, os cenários onde compensa:

• Reunião em que alguém implica com o visual: em vez de anotar e voltar depois, tu mexe no accent, na density ou no theme ali mesmo e o Stage responde
• Painel de KPI que precisa acompanhar o dado mudando: é exatamente a promessa da categoria, artefato que atualiza conforme o dado muda
• Entrega pra host estático: o dashboard gerado é HTML self-contained, abre em qualquer navegador e pode ser jogado em qualquer host estático
• Fork de template: os templates são publicados pra fork sob Apache-2.0, e a categoria Live Artifact está lá na biblioteca

E o contraponto honesto, porque nem tudo precisa de encanamento: se ninguém vai mexer em parâmetro nenhum, um export estático já basta

Dashboard ao vivo só paga o próprio custo quando existe alguém do outro lado querendo virar um botão

O que muda no ritmo de iteração (e o que ainda não está pronto)

O ganho é de ciclo, não de pixel

O fluxo normal é pedir ao agente, esperar gerar, recarregar, olhar, pedir de novo

Com o painel de ajustes o ciclo vira: mexer no controle, ver o Stage responder, e o estado fica persistido em localStorage pra próxima abertura

A linha 0.4.x veio recheada nesse sentido: Critique Theater (com pontuação de Design Jury antes de publicar), Tweaks mode com element-picker e anexos no chat, modo de edição manual, e os live artifacts com Composio

O limite, sem maquiagem:

Aqui é onde eu prefiro ser chato a te vender fumaça

A UX do painel de ajustes emitido pelo agente ainda não está implementada

A skill tweaks, que é o bloco de construção, essa já foi entregue

Mas o painel integrado ao chat segue pendente, e a edição cirúrgica por comentário está parcialmente entregue, com o patch alvo confiável ainda em andamento

A entrega faseada está documentada em docs/roadmap.md, então dá pra acompanhar sem achismo

Como se instala plugin (não é pelo terminal):

Outro ponto que confunde: a instalação de plugins acontece dentro do próprio app

No app desktop ou web, tu abre a página Plugin, navega no marketplace e clica em Install

Ao entrar num Studio de projeto, os plugins aparecem como chips no composer, clicáveis, já com os parâmetros de entrada declarados

Pra contexto de linha do tempo: a infraestrutura de marketplace entrou na 0.8.0, com 261 plugins oficiais, spec de manifesto e scripts de install por agente

E na 0.11.0 veio o The Bazaar, o marketplace comunitário de plugins e design systems

Veja na prática: IA gerando entrega de verdade

Pra quem quer começar do zero e ver IA virando entrega na prática, este vídeo do canal mostra o processo ao vivo

Conclusão

Veredito honesto sobre os artefatos ao vivo do OpenDesign: a mecânica do painel já é reproduzível hoje

A skill tweaks te dá as duas camadas (Stage e Panel) com CSS custom properties e persistência em localStorage, e a live-dashboard te dá o encanamento dos conectores Composio dentro do render

O que ainda é roadmap é o painel emitido pelo agente dentro do chat, e isso está escrito no próprio repositório

Próximo passo prático, na ordem: abre o repo nexu-io/open-design, forka um template da categoria Live Artifact e escolhe a skill certa ANTES de começar a pedir coisa pro agente

Que é exatamente onde a maioria erra, pedindo dashboard pra uma skill que só sabe desenhar 🙂

até o próximo post!