Open Design: Por que 40 mil desenvolvedores abandonaram o Claude Design
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Este é o OpenDesign, uma alternativa open source ao Claude Design que permite usar qualquer agente
00:00:05ou modelo que você já tenha instalado para gerar protótipos web completos, aplicativos móveis e até apresentações
00:00:11em HTML. Com 72 sistemas de design de nível profissional integrados, e cada projeto permanece na sua máquina,
00:00:17então nada é enviado para a nuvem. Mas já sabemos que o Claude Opus 4.7 é muito bom em design
00:00:23front-end, então não faz sentido permitir que o usuário escolha qualquer modelo que quiser, já que a maioria deles
00:00:27poderia ser muito ruim em design, inscreva-se e vamos descobrir.
00:00:33O Claude Design da Anthropic foi lançado no mês passado e foi um sucesso instantâneo. Ele deu às pessoas
00:00:38a capacidade de criar designs muito bonitos usando um modelo impressionante, deu às pessoas uma
00:00:43alternativa ao v0 da Vercel e ferramentas similares. Mas é uma ferramenta proprietária exclusiva da nuvem, limitada a um
00:00:49único modelo, e custará US$ 20 por mês para usar, o que basicamente significa que não é para todos.
00:00:54Então, 11 dias depois, o Tom e a equipe da Nexa lançaram uma alternativa open source que foi muito popular.
00:01:00Isso me lembra um pouco o OpenCode vindo do Claude Code, e agora o OpenDesign está vindo do Claude
00:01:05Design. Qual é a próxima coisa que a Anthropic vai criar e que alguém vai colocar 'open' na frente?
00:01:09Mas como essa ferramenta open source consegue criar designs tão bons quanto o Claude Design? Bem,
00:01:14isso acontece porque duas coisas trabalham juntas. A primeira são os sistemas de design. O OpenDesign contém muitos
00:01:18deles com especificações de marca completas, tipografia, espaçamento e tokens de cores inspirados em marcas como Linear,
00:01:24Stripe e Spotify. A segunda são as habilidades. Muitas e muitas habilidades para cada tipo de saída. Então, uma habilidade de
00:01:30painel sabe como organizar gráficos, e uma habilidade de apresentação sabe como estruturar slides. Existe até um checklist
00:01:35anti-IA integrado em cada prompt, e antes de gerar qualquer coisa, ele pergunta sobre seu público,
00:01:41tom de voz e conteúdo da marca. Se você assistiu ao meu vídeo sobre o Impeccable, isso parecerá muito familiar,
00:01:45mas é diferente, e veremos as diferenças mais tarde no vídeo. Mas por enquanto,
00:01:49vamos fazer uma demonstração simples. Então, para começar, você pode baixar o OpenDesign para macOS ou
00:01:54Windows, clonar o repositório e instalá-lo usando Docker, ou executá-lo a partir do código-fonte, que é o que eu decidi
00:01:59fazer. Então, com o projeto rodando, posso acessar esta porta no meu navegador, o que me leva a esta interface,
00:02:04que parece bem intimidadora para quem não está acostumado com o Claude Design, mas vamos explorar.
00:02:08Então, se eu clicar aqui embaixo, você pode ver que ele detectou os agentes que eu já tenho instalados,
00:02:13como Claude Code, Codex e OpenCode. E se eu clicar no Claude Code e rolar para baixo,
00:02:17podemos escolher o modelo. Por padrão, ele escolherá o que estiver configurado na CLI, mas posso escolher
00:02:21um aqui. Posso fazer o mesmo com o Codex, mas o Codex me permite alterar o esforço de raciocínio,
00:02:26o que é um toque legal. Mas vou escolher o OpenCode. Vou rolar para baixo e mudar o
00:02:31modelo para GLM 5.1. Agora, aqui também, posso definir a memória, ou seja, as instruções que serão adicionadas
00:02:36a cada prompt, os provedores de mídia, e por padrão, ele pegou minha chave da OpenAI e vai usar
00:02:41o GPT Image 2 para gerar imagens. Mas também poderia conectar minha chave de API da 11Labs para coisas como
00:02:46texto para fala ou diferentes efeitos sonoros para animações que você possa ter no seu site. Então,
00:02:50aqui, posso visualizar todas as habilidades disponíveis. Posso ver todos os sistemas de design,
00:02:54que veremos mais tarde. E posso até escolher um pet, algo que o Codex faz.
00:02:58Basicamente, temos muitas opções aqui, mas vou fechar isso e começar a projetar. Então, vou
00:03:03dar um nome ao meu projeto e escolher um sistema de design. Agora, se você não tem ideia do que são esses
00:03:08sistemas de design, você pode clicar na aba de sistema de design para ver todos eles, e há muitos.
00:03:13Mas eu os examinei antes de gravar o vídeo, e acho que gosto do da Miro, que se parece
00:03:17com isto e fornece detalhes dos tokens de design, bem como informações no arquivo Markdown de design.
00:03:22Note que estou na aba de protótipo, mas também existem artefatos ao vivo para itens que você deseja atualizar
00:03:27com base em dados variáveis, uma apresentação para gerar slides em HTML, ou para construir a partir de um modelo.
00:03:33Então, posso clicar na aba de modelos aqui e escolher um modelo que eu queira. Agora, vamos ficar
00:03:38com o protótipo e clicar em criar. A partir daqui, somos levados a outra página onde podemos dar
00:03:42um prompt. Vou tentar algo um pouco único aqui. Então, no momento, tenho meu aplicativo de busca
00:03:47de canais do YouTube rodando, e eu queria criar uma versão muito mais bonita dele. Então, o que vou
00:03:52fazer é fornecer esta URL e ver se o GLM consegue pesquisar pelas abas e pelos
00:03:57inputs e usar isso para seu design. Então, aqui dei um prompt para fazer um site simples e bem
00:04:02projetado para um produto que posso usar para pesquisar canais do YouTube. Também forneci o link do
00:04:07site para que ele visite usando um navegador de agente ou qualquer ferramenta que achar adequada. E assim ele pode
00:04:12ver as entradas e passar por todas as páginas. Então vamos ver o que ele faz. Então agora ele me fez
00:04:15algumas perguntas sobre o tom visual, contexto da marca e algumas outras coisas, que vou responder.
00:04:20E então continuaremos com o processo de design e veja só. Ele conseguiu rodar um comando curl
00:04:24para abrir o site usando o Chrome. E agora ele está usando o navegador de agente para se conectar ao site. Então eu não
00:04:29abri nada disso e não entrei na URL, e ele está navegando pelo site no navegador. Podemos ver mais alguns
00:04:34comandos de navegador de agente para entender como funciona. Ok. Então, neste ponto, ele ainda está processando.
00:04:38Ainda não terminou. Ele ainda tem algumas coisas para fazer, mas gosto da direção para onde as coisas estão
00:04:43indo. Gosto da página de pesquisa que ele criou com os filtros avançados aqui embaixo, e posso alternar
00:04:48entre títulos de vídeo e nome do canal para a pesquisa. Temos os resultados da pesquisa, o que parece
00:04:52muito impressionante e ele está usando dados do site real. Então, não tenho certeza do que ele fez,
00:04:57se ele extraiu e salvou em algum lugar, mas são dados reais, apesar da falta de miniaturas. Também temos
00:05:01a página de favoritos. Então, se eu adicionar uma pessoa aos favoritos aqui, é para onde eles irão e posso gerar
00:05:06um e-mail para contatá-los ou removê-los. E há também uma página oculta aqui. Então, por exemplo,
00:05:11se eu pressionasse X, uma pessoa iria para esta página. E parece que depois de cerca de 20 minutos. Sim.
00:05:17O GLM 5.1 não é o modelo mais rápido. Tudo terminou. E aqui está o que ele me disse.
00:05:23Ele me deu todos os cinco arquivos que criou. E acho que ele exportou tudo para um local
00:05:28temporário. Então, o que posso fazer agora é dar outro prompt. Se eu quisesse adicionar um modo escuro,
00:05:33eu poderia fazer isso, mas também poderia clicar em finalizar pacote de design, que sintetizará
00:05:37tudo em um único arquivo Markdown de design. Então, a transcrição, o sistema de design e quaisquer artefatos
00:05:42que foram gerados, basicamente estas cinco páginas. Também posso clicar em compartilhar para exportar em diferentes formatos.
00:05:48E posso até exportar um HTML independente e dar ao Claude Code para implementar no meu projeto real
00:05:53e até implantá-lo na Vercel ou Cloudflare Pages, o que é um toque muito bom.
00:05:57Então, esse foi um breve resumo do Open Design. Vale a pena usar? Bem, se você já tem um agente
00:06:02de codificação instalado e paga por uma assinatura do Claude, então é uma decisão fácil
00:06:07de experimentar. A combinação de sistemas de design e habilidades significa que ele pode realmente produzir algo
00:06:12bem decente, independentemente do agente ou modelo. Mas como ele se compara a algo como o Impeccable?
00:06:16Bem, pessoalmente, prefiro a forma como o Impeccable faz seu planejamento. Ele pergunta tudo antecipadamente
00:06:22e projeta diferentes mockups usando um modelo de imagem, o qual você pode escolher e iterar a partir daí.
00:06:27Então, você pode praticamente não ter ideia do que quer que o design pareça no início,
00:06:32mas acabar com algo bem decente. Enquanto com o Open Design, você meio que tem que
00:06:37saber um pouco sobre design antes de começar. Quero dizer, ele pergunta qual sistema de design você quer antes
00:06:42de começar e eu sei que o modelo pode gerar um, mas o fato de ele perguntar significa que é voltado
00:06:48para alguém que sabe um pouco mais sobre design. Mas tenho que admitir, o Open Design tem uma ótima interface,
00:06:53dando a você a opção de ver visualizações responsivas, exportar para onde quiser, adicionar habilidades, ferramentas MCP,
00:06:58e até pets, o que é legal para quem está acostumado a usar a interface do Codex ou o aplicativo desktop do Claude.
00:07:04E ele fez um ótimo trabalho ao projetar um aplicativo usando o GLM 5.1, que não é o melhor modelo
00:07:10para design que existe. Então, se eu quisesse projetar algo relativamente rápido e tivesse uma ideia
00:07:15da direção que queria seguir, então definitivamente tentaria o Open Design. Mas se você não
00:07:19se importar em gastar um pouco de dinheiro, o Claude Design é muito bom. Quero dizer,
00:07:22veja o que ele foi capaz de fazer com exatamente o mesmo prompt.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video