Open Design vs. Figma e Claude Design — um guia completo

Este guia é um passo a passo completo do Open Design em torno de uma pergunta: onde um espaço de trabalho de design nativo de agentes se encaixa ao lado do Figma e do Claude Design? Ele instala o app, configura um agente, trabalha com os design systems integrados, constrói uma landing page de verdade do início ao fim, itera com as ferramentas no canvas e exporta o resultado. Ele segue o caminho que Anton Larichev (PurpleSchool) percorreu em seu guia prático, reescrito e atualizado para o release atual. Assista ao vídeo acima para a execução ao vivo, ou continue lendo para a versão em texto.

O espaço de trabalho do Open Design — protótipos, slides, imagens e vídeo em um único canvas calmo e familiar.

O que é o Open Design?

O Open Design é uma plataforma de design de código aberto e local-first que roda em cima do agente de código que você já usa. Em vez de ficar preso a um modelo, ele detecta as CLIs que já estão na sua máquina — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode e mais algumas dezenas — e deixa esse agente conduzir a geração. A descrição de Anton é exata: na superfície parece muito com o Claude Design, mas por baixo dos panos é “só uma UI extra que conduz os mesmos agentes que você já tem instalados.” Você não paga uma segunda assinatura em cima do seu plano de código.

O que o torna digno de um olhar sério:

• Código aberto, Apache-2.0 — clone, hospede você mesmo, use em trabalhos para clientes.
• Roda localmente — nada é enviado; seus projetos vivem em pastas na sua própria máquina.
• Agente plugável — aponte para qualquer CLI suportada, ou traga sua própria chave de API para outro harness.
• Uma biblioteca profunda de design systems e skills já embutida, para você não começar de um canvas em branco.
• Mais do que design estático — protótipos, slides, geração de imagens e vídeo, tudo a partir de um só espaço de trabalho.

Como ele difere do Figma

Essa é a comparação que a maioria realmente quer, então vamos ser diretos.

O Figma é um editor vetorial manual e colaborativo. Você move cada frame, desenha cada componente, e a força está na precisão e no trabalho em equipe em tempo real. Nada aqui gera o design por você — você é o designer fazendo o trabalho.

O Open Design inverte isso. Você descreve o que quer, escolhe um design system, e o agente gera um artefato HTML real e interativo que você então refina. A saída é código, não um arquivo vetorial — o que significa que tudo o que você constrói já está imediatamente mais próximo do seu projeto de verdade.

Um ponto em que Anton é honesto: o Open Design hoje é fraco em extrair um design system de um arquivo do Figma. Se você der a ele uma exportação do Figma hoje, o sistema extraído tende a voltar bagunçado. Então, se a sua fonte da verdade vive no Figma, o caminho mais limpo é fazer seu agente transformar esse design do Figma em código primeiro, e então trazer o código para o Open Design (mais sobre isso abaixo). Trate o Open Design como uma superfície de geração e iteração, não como um importador do Figma.

Como ele difere do Claude Design

Se você já usou o Claude Design, a interface vai parecer instantaneamente familiar — a mesma estética calma, o mesmo loop com o artefato em primeiro lugar. As diferenças que importam:

• Qualquer modelo, não apenas um. O Claude Design prende você ao Opus 4.7. O Open Design conduz qualquer agente que você escolher — e você pode trocar no meio do projeto.
• Geração de mídia embutida. Adicione chaves de provedores (OpenAI GPT Image, MiniMax, ElevenLabs e mais) e o Open Design vai gerar imagens, áudio e vídeo inline. Essa é a diferença que se destaca e que Anton aponta — uma ferramenta de design de provedor único não te dá isso.
• Local e seguro para uso comercial. Apache-2.0 mais local-first significa que o trabalho para clientes nunca sai da sua máquina e nunca precisa da permissão de ninguém.

Passo 1 — Instalar o Open Design

Você tem três formas de entrar. Escolha a que combina com você:

Caminho	Melhor para	Requisitos
App de desktop	A maioria das pessoas — zero configuração	Nenhum. É só baixar e abrir.
Rodar a partir do código-fonte	Devs que querem ler ou modificar o código	Node ~24, pnpm 10.33.x
Instalar dentro do seu agente	Quem vive no terminal	Uma CLI de agente de código já existente

Opção A — App de desktop (recomendado, zero configuração)

Vá até open-design.ai/download e pegue a build para o seu SO. Depois de instalar, o app detecta automaticamente cada CLI de agente de código que já está no seu PATH e carrega as skills e os design systems integrados para você. Esse é o caminho mais rápido para um espaço de trabalho funcionando.

Opção B — Rodar a partir do código-fonte

Se você prefere rodar a partir do repositório — como Anton faz no vídeo — são poucos comandos:

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. Ele resolve uma porta dinâmica, então não fixe uma — apenas clique no endereço que aparecer. Você precisa de Node ~24 e pnpm 10.33.x; o Corepack seleciona a versão fixada do pnpm para você.

Opção C — Instalar dentro do seu agente de código

Para chamar o Open Design como uma skill dentro do seu agente, sem nunca abrir a GUI:

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Então, dentro do agente: Use open-design to generate a landing page with the Stripe design system.

Passo 2 — Configurar seu agente

No primeiro lançamento, o Open Design varre sua máquina e mostra cada CLI que encontrou, e então te conduz por uma configuração curta:

• Escolha o agente e o modelo. Anton usa o Claude Code no Opus 4.7 (“um dos melhores para design”), mas você pode apontar para Codex, Gemini CLI ou qualquer outro agente detectado. Há um botão Test para confirmar a conexão.
• Ou use uma chave de API. Prefere não usar uma CLI local? Defina uma URL base, uma chave e um modelo no lugar.
• Adicione provedores de mídia. Esse é o diferencial — adicione chaves para OpenAI GPT Image, MiniMax, ElevenLabs e outros para gerar imagens, áudio e vídeo na hora.
• Alterne as skills. Ative as skills de design de que você precisa (system design, protótipo, diretrizes de marca e mais); deixe o resto desligado.

Você pode mudar tudo isso depois, então mantenha a primeira passada simples.

Passo 3 — Trabalhar com design systems

A biblioteca de design systems é o coração da ferramenta. Cada entrada pega uma marca real e codifica sua paleta, tipografia, componentes e atmosfera geral em um sistema reutilizável.

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

Há duas maneiras de trazer a sua própria marca, e Anton testa as duas:

1. Importe um ZIP do Claude Design (o mais limpo hoje). Montou um sistema no Claude Design? Abra lá, escolha Share → Download project as .zip e arraste esse ZIP para dentro do Open Design. Todos os seus tokens e componentes são levados direto.
2. Extraia um sistema de código existente. Crie um arquivo de alta fidelidade sem nenhum design system anexado, aponte o import dele para uma pasta com o seu código real e peça ao agente para derivar um design system a partir dele — cores, tipografia, espaçamento e um kit de componentes em JSX. Não vai ser perfeito, mas é um ponto de partida sólido que você pode ajustar.

Você pode navegar pela biblioteca completa de plugins na web em open-design.ai/plugins antes de instalar qualquer coisa.

Passo 4 — Construir uma página de verdade e iterar

O fluxo de trabalho real é construir protótipos e slides. No vídeo, Anton constrói uma página de preços/landing para a PurpleSchool sobre um design system importado:

1. Crie um projeto, escolha web/desktop/mobile e selecione wireframe ou alta fidelidade.
2. Anexe o design system e cole o seu briefing (Anton usa uma especificação curta: hero, preços, recursos, FAQ, rodapé).
3. Escolha o seu modelo no projeto (aqui, Claude Code no Opus) e envie.
4. Responda às perguntas de esclarecimento que o Open Design faz antes de escrever uma linha — superfície, público, tom — e então observe-o trabalhar por uma lista de tarefas.

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.

Onde o Open Design prova seu valor é na iteração no canvas: selecione qualquer bloco e comente nele, desenhe direto sobre a pré-visualização para apontar o que quer mudar, edite fontes e tamanhos inline e confira o layout nas larguras de desktop/tablet/mobile. É o ciclo de feedback rápido que é desajeitado de reproduzir com um agente puro no terminal.

Quando estiver satisfeito, exporte o resultado como HTML autônomo ou ZIP e entregue ao seu time — ou puxe o código direto para o seu projeto.

Dicas

• Não dê a ele arquivos brutos do Figma. A extração do Figma é o caminho mais fraco hoje; converta o Figma em código primeiro, depois importe o código.
• Importe um ZIP do Claude Design quando precisar da sua própria marca — é a entrada mais suave.
• Use uma CLI local para que a geração rode sobre uma assinatura que você já paga, em vez de taxas de API por chamada.
• Apoie-se nas ferramentas de comentário e desenho no canvas — selecionar um bloco e desenhar sobre ele é muito mais rápido do que descrever a mudança em prosa.
• Espere um rascunho forte, depois refine. Exporte cedo para pegar pequenos desvios de espaçamento e formatação.

Perguntas frequentes

Devo substituir o Figma pelo Open Design? Não — eles fazem trabalhos diferentes. O Figma é um editor manual preciso e colaborativo; o Open Design é uma superfície nativa de agentes para geração e iteração que produz código. Use o Open Design para sair do briefing a um rascunho real e fiel à marca rapidamente, e mantenha o Figma para o trabalho que precisa de precisão manual e colaboração ao vivo.

Ele consegue importar meus designs do Figma? Indiretamente. A extração direta do Figma é tosca hoje. O caminho confiável é converter o design do Figma em código com o seu agente e então importar esse código (ou importar um ZIP do Claude Design) no Open Design.

Sou obrigado a usar o Claude? Não. O Open Design conduz qualquer agente suportado — Codex, Gemini CLI, Cursor, OpenCode e mais — e você pode trocar de modelo no meio do projeto, ou trazer sua própria chave de API.

É gratuito? O app é de código aberto sob a Apache-2.0 e gratuito para rodar localmente. Você só paga pelo uso de modelo e de mídia do agente e dos provedores que conectar.

---

Este guia em texto é baseado no passo a passo prático de Anton Larichev. Assista ao vídeo completo acima e inscreva-se no PurpleSchool | Anton Larichev para mais aprofundamentos sobre desenvolvimento e ferramentas de IA.