Open Design para times — skills versionáveis, seu próprio sistema de marca e guardrails anti-slop
Como usar o Open Design como um fluxo de design real e versionável para um time — criar seus próprios skills e um DESIGN.md de marca, apoiar-se no portão de crítica anti-slop e manter expectativas honestas sobre o uso em produção. Baseado na análise do AICodeKing.
Este guia é sobre usar o Open Design como um fluxo de design real e versionável — não apenas como um gerador de protótipos pontual. A combinação que o torna interessante para um time: seu agente atual, skills baseados em arquivos e sistemas de marca DESIGN.md, com guardrails anti-slop para impedir que o resultado pareça gerado. Ele segue a análise que o AICodeKing faz no vídeo dele, reescrita e atualizada para a versão atual. Assista ao vídeo acima para a explicação completa, ou continue lendo a versão escrita.
A biblioteca de plugins: instale skills direto do registro — incluindo skills de design anti-slop.
O que é o Open Design?
O Open Design é um app de design local-first e de código aberto que se conecta ao agente de programação que você já usa. Em vez de embarcar o próprio modelo, ele detecta no seu PATH ferramentas como Claude Code, Codex, Cursor, Gemini, OpenCode e Qwen Code e usa esse agente como motor de design — com um fallback para a API da Anthropic (BYOK) se nenhum estiver instalado. É Apache-2.0, e o único custo é o do modelo que você escolher. Como diz o AICodeKing, é “uma casca de design em torno dos agentes que você já tem”.
Por que é um fluxo de time, não só uma caixa de chat
A razão pela qual o AICodeKing valoriza: não é uma caixa de prompt em branco com uma prévia. O valor está na combinação de três coisas, todas versionáveis:
- Seu agente de programação atual — o motor, já pago.
- Skills baseados em arquivos — cada skill dá ao agente regras para uma superfície específica (landing SaaS, dashboard, página de preços, docs, blog, app mobile, decks) em vez de “me faça uma página bonita”.
- Sistemas de marca
DESIGN.md— sistemas de design em markdown puro cobrindo cor, tipografia, espaçamento, layout, componentes, movimento, tom, regras de marca e antipadrões.
Como os skills e os sistemas de design são arquivos, um time pode criar o próprio skill interno de dashboard e o próprio DESIGN.md de marca, fazer commit deles no git e fazer com que o Claude Code, o Codex ou qualquer agente gere artefatos que sigam essas regras. Isso é um fluxo de design versionado, forkável e revisável — algo que uma caixa de chat de design fechada não consegue oferecer.
O hub de plugins: navegue pelo registro, importe plugins e prepare-os para sua equipe.
A maquinaria anti-slop
A parte favorita do AICodeKing, e a razão pela qual o resultado do time se mantém apresentável: o Open Design combate os sinais delatores de UI gerada por IA. A pilha de prompts roda uma crítica multidimensional antes de emitir um artefato (filosofia de design, hierarquia, execução, especificidade, contenção), cada skill pode vir com uma checklist P0/P1/P2 que o agente precisa satisfazer, e o repositório proíbe explicitamente os modos de falha de sempre — gradientes roxos agressivos, ícones emoji genéricos, cards arredondados aleatórios com acento na borda esquerda, métricas falsas, enchimento decorativo. Combinado com o formulário de descoberta (ele pergunta sobre superfície, público, tom, marca e escala antes de escrever) e o seletor de direção (direções visuais curadas com paletas determinísticas), o agente tem uma fonte da verdade estável em vez de derivar a cada refinamento.
Instalação
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run webAbra a URL local que ele imprime (uma porta dinâmica — não fixe no código). Prefere sem configuração? Pegue o app de desktop em open-design.ai/download. No primeiro carregamento ele detecta os CLIs de agente instalados; escolha um, ou use a opção Anthropic BYOK. Navegue pela biblioteca completa de plugins em open-design.ai/plugins.
Uma demo com cara de time
O fluxo sugerido pelo AICodeKing se encaixa direitinho no trabalho real: escolha Codex ou Claude Code como agente, escolha um skill (landing SaaS ou dashboard) e um sistema de design (por exemplo, Linear ou Stripe — fáceis de julgar). Dê um prompt concreto, como uma landing page para um produto interno, preencha o formulário de descoberta, escolha uma direção e deixe rodar. O plano chega em streaming, o agente lê o skill e o DESIGN.md e escreve arquivos reais.
A galeria HyperFrames: peças de motion e vídeo orientadas por código que você pode forkar e remixar.
As saídas são renderizadas em uma prévia em sandbox e exportam para HTML, PDF, ZIP e Markdown (estilo PPTX para skills de deck). Como o sistema de design e o skill permanecem na pilha de prompts, os refinamentos não derivam — o agente mantém uma referência estável em vez de reinventar o visual a cada turno.
Seja honesto sobre produção
O AICodeKing é realista, e você também deveria ser: este é um projeto inicial, então trate-o como um forte ponto de partida, não como um time de design de produção pronto para plugar. A qualidade da saída depende muito do modelo para o qual você o aponta — um modelo fraco mais um bom sistema de design ainda dá julgamento de design fraco. O Claude Code obtém o streaming mais rico; os outros CLIs são bufferizados por linha. E como o daemon inicia agentes com um diretório de trabalho, pense bem em quais skills você instala e quais diretórios você expõe. Para protótipos rápidos, landing pages, dashboards internos e decks ele é genuinamente útil; para uma UI de produção que vai ser publicada, gere e então revise o código, teste a responsividade e refine.
Dicas
- Escreva seu próprio skill +
DESIGN.mdde marca e faça commit deles — esse é o superpoder do time. - Escolha um sistema de design reconhecível (Linear/Stripe) ao julgar a saída, para que a qualidade seja fácil de avaliar.
- Apoie-se no formulário de descoberta e no seletor de direção para travar a direção antes de gerar.
- Use um CLI local para que a geração rode sobre uma assinatura que você já paga.
- Trate a saída como um ponto de partida para produção — revise, teste, refine.
Perguntas frequentes
Um time pode construir seus próprios skills e sistemas de design?
Sim — skills são pastas e sistemas de design são arquivos DESIGN.md. Faça commit deles no git e qualquer agente conectado gera com base neles, então todo o fluxo de trabalho fica versionado e forkável.
O que impede a saída de parecer gerada por IA? Uma autocrítica multidimensional antes de emitir, checklists P0/P1/P2 por skill e uma proibição explícita de padrões de slop comuns (gradientes roxos, ícones genéricos, métricas falsas), além do formulário de descoberta e do seletor de direção.
Está pronto para produção? É um ponto de partida inicial, porém capaz. Use-o para protótipos, dashboards, landing pages e decks; para UI de produção, revise e refine o código gerado.
É gratuito? O app é de código aberto sob Apache-2.0 e gratuito para rodar localmente. Você só paga pelo uso do modelo do agente e da chave que conectar.
Este guia escrito é baseado na análise do AICodeKing. Assista ao vídeo completo acima e inscreva-se no AICodeKing para mais análises aprofundadas de ferramentas de IA.