Tour completo de recursos do Open Design — slides, protótipos, imagens, vídeo e um bichinho de desktop

Este guia é um tour panorâmico pelo Open Design: não uma única construção aprofundada, mas uma varredura por tudo que o workspace consegue criar — apresentações de slides, pôsteres, imagens a partir de um esboço, protótipos de app a partir de um esboço, motion graphics movidos a código, vídeo e até um bichinho de desktop. Ele segue o tour de recursos que 硅基麻辣拌 conduz em seu walkthrough, reescrito em inglês e atualizado para a versão atual. Assista ao vídeo acima para ver a demonstração ao vivo ou continue lendo para a versão escrita.

O workspace do Open Design — protótipos, apresentações de slides, imagens e vídeo em uma tela tranquila e familiar.

O que é o Open Design?

O Open Design é uma plataforma de design open source e local-first que roda sobre o agente de programação que você já usa. O projeto inteiro é um app web implantado localmente, com uma camada de modelo que dá suporte total ao seu próprio agente de programação — seja por chave de API, uma assinatura OAuth ou diretamente pela sua CLI já existente.

硅基麻辣拌 destaca uma coisa como verdadeiro ponto forte: você nunca precisa expor uma chave de API ou token de autenticação. Apontar o Open Design para o seu Codex ou Claude Code local via CLI faz a geração rodar por credenciais que nunca saem da sua máquina — uma propriedade de segurança que ele gostaria de ver mais projetos open source de agentes copiando. No vídeo, ele conduz tudo com uma assinatura do OpenAI Codex no GPT-5.5.

Passo 1 — Instale e conecte seu agente

O caminho mais rápido é o app de desktop em open-design.ai/download — zero configuração, e ele detecta automaticamente as CLIs de agente instaladas. Para rodar a partir do código-fonte:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Abra a URL local que ele imprime (uma porta dinâmica — não fixe nenhuma no código). Como 硅基麻辣拌 observa, você pode até pular completamente a leitura da documentação: entregue o link do repositório ao seu agente e diga a ele para instalar o Open Design usando a configuração em modo dev. No primeiro início, aponte-o para sua CLI local — Codex, Claude Code, Cursor ou OpenCode — e está pronto.

O que você realmente pode criar

A tela inicial está cheia de exemplos — páginas web, pôsteres, ícones de app, motion graphics, imagens de capa para artigos, animações em estilo pixel, apresentações de slides, relatórios financeiros, pôsteres de revista. Cada exemplo é algo que os prompts e skills embutidos do Open Design conseguem produzir diretamente, e cada um mostra o prompt e o design system por trás dele.

A biblioteca de design systems: cada entrada decompõe uma marca real em paleta, tipografia, componentes e atmosfera visual que você pode reutilizar.

Vamos percorrer os recursos um a um.

Apresentações de slides (PPT)

Clique em Slideshow, dê um nome e escolha um design system (硅基麻辣拌 usa um sistema no estilo Anthropic/Claude). O Open Design então faz aquilo que o diferencia de simplesmente pedir slides a um agente: ele gera um formulário de descoberta dinâmico com base no seu prompt — proporção da tela, público-alvo, número de slides, posicionamento de pesquisa, direção visual — e confirma o que você quer antes de construir. O formulário não é fixo; ele é gerado a partir do seu prompt e ajustado às lacunas dele. O resultado é uma apresentação horizontal limpa no estilo de marca escolhido.

Imagens a partir de um esboço feito à mão

O Open Design aceita entrada feita à mão. Esboce algo tosco — no vídeo, um “dragão” deliberadamente abstrato — e então peça para gerar uma imagem de verdade a partir desse esboço. Ele pergunta sobre orientação e fundo, gera a imagem e a devolve aos seus arquivos de design. A mensagem fica clara: você não precisa saber desenhar, apenas ter uma ideia.

Protótipos de app a partir de um esboço

Mesmo truque, saída diferente. Desenhe um wireframe grosseiro — um círculo aqui, um quadrado ali — salve o arquivo do esboço, depois referencie-o e peça uma tela de app mobile. O Open Design usa o mesmo ciclo de formulário-confirmação-geração e transforma o esboço abstrato em uma tela de aparência madura.

Motion graphics, em código

Usando o motion skill embutido, 硅基麻辣拌 gera uma animação de dois iPhones antropomorfizados que se encontram e conversam. Tudo é feito inteiramente com animação em SVG e CSS — cada elemento visual é código — então ela se encaixa de forma limpa em uma apresentação ou página quando você precisa de algo em movimento.

A biblioteca de templates: pontos de partida de protótipo, slide, imagem e vídeo que você pode filtrar por tipo e forkar para começar.

Geração de imagem e vídeo

A biblioteca de imagens cobre casos comuns como GPT Image, com os prompts já empacotados — escolha um e gere. Vídeo também é suportado, incluindo clipes gerados por modelo e efeitos de produto/apresentação dinâmica. O trabalho de vídeo com muito movimento é feito em colaboração com o projeto hyperframes, que usa código para conduzir protótipos de produto e animações de visualização de dados.

Um bichinho de desktop

O recurso mais cativante: crie um bichinho. Escolha um — incluindo personagens contribuídos pela comunidade — clique em salvar, e ele aparece na sua área de trabalho para interagir com você. É uma coisa pequena, mas sinaliza um projeto que se importa com a textura emocional da ferramenta, não só com o resultado.

A avaliação honesta

硅基麻辣拌 é justo quanto aos trade-offs. Por baixo dos panos, o Open Design entrega um conjunto de skills componíveis (usáveis dentro do Open Design ou extraídos para o seu próprio Codex/Claude Code) e uma biblioteca profunda de design systems cobrindo marcas conhecidas — e todo o framework no estilo Claude Design é open source no repositório, então você mesmo pode adicionar novos tipos de design.

A lacuna atual: alguns recursos de acabamento ainda faltam — notavelmente um modo de comentário em nível de pixel para anotar e corrigir uma página renderizada. Mas a força compensatória é real: amplo suporte a agentes (Codex, Claude Code, Cursor, OpenCode) sem exposição de chave de API, e um projeto que itera rápido. Se você quer uma plataforma escalável e extensível para a qual possa contribuir de volta, é um ótimo ponto de entrada.

Dicas

• Conduza pela sua CLI local — nenhuma chave de API sai da sua máquina, e a geração roda sobre uma assinatura que você já paga.
• Deixe o formulário de descoberta fazer o trabalho dele — responder às perguntas dele de antemão é o que faz as apresentações e os protótipos acertarem na primeira tentativa.
• Esboce, não descreva, quando a forma importa — entrada feita à mão funciona tanto para imagens quanto para protótipos de app.
• Recorra ao motion skill quando uma apresentação ou página precisar de algo animado; é código, então é portátil.
• Extraia skills para o seu próprio agente quando quiser um recurso fora da GUI.

Perguntas frequentes

Preciso expor uma chave de API? Não — esse é um ponto forte em destaque. Conduza o Open Design com seu Codex, Claude Code, Cursor ou OpenCode local via CLI e as credenciais nunca saem da sua máquina.

Ele realmente faz vídeo e animação, não só design estático? Sim. Ele faz motion graphics baseados em código (SVG + CSS), geração de imagem e vídeo, e trabalho com muito movimento em colaboração com o projeto hyperframes.

O que ainda falta? Na época do walkthrough, o modo de comentário em nível de pixel para anotar uma página renderizada ainda não estava disponível. O projeto avança rápido, então confira a versão atual.

É gratuito? O app é open source sob a Apache-2.0 e gratuito para rodar localmente. Você paga apenas pelo uso de modelo e de mídia de qualquer agente e provedores que conectar.

---

Este guia escrito é baseado no tour de recursos de 硅基麻辣拌. Assista ao vídeo completo acima e inscreva-se no canal de 硅基麻辣拌 para mais walkthroughs de ferramentas de IA.