MAIS UM Repo Open Source que Clonou o Design do Claude
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Pessoal, um segundo clone do Claude Design acaba de chegar ao GitHub. Isso mesmo, temos mais um
00:00:06clone do Claude Design, exceto que desta vez ele vem com uma interface gráfica real. No início desta semana, postei
00:00:13um vídeo sobre o projeto Huwashu, que foi o primeiro clone do Claude Design no mercado.
00:00:20Ele fez um trabalho muito bom; mostramos ele batendo de frente com o formato padrão do Claude Design,
00:00:24sem enfrentar nenhum dos problemas de uso. No entanto, um dos problemas do Huwashu era
00:00:30o fato de ele rodar apenas no terminal; não tinha uma interface gráfica como esta que vocês veem aqui
00:00:36com esta nova ferramenta de design aberta que praticamente imita o Claude Design. Quero dizer, vejam
00:00:43estas duas ferramentas aqui: temos o Open Design, que é o que vamos falar hoje,
00:00:48e aqui temos o Claude Design. Extremamente similares. Agora, o que é bem legal sobre o Open Design
00:00:54é que ele foi construído sobre o Huwashu e, como viram no último vídeo, o Huwashu é
00:00:59muito, muito bom. Conseguimos ótimos conteúdos e designs de front-end com esse repositório e agora
00:01:06estamos apenas pegando isso e colocando uma bela camada gráfica por cima para facilitar
00:01:11a interação para a maioria dos usuários, dando aquele polimento que vimos originalmente no
00:01:16Claude Design. Melhor ainda, o Open Design é algo que podemos usar com qualquer ferramenta de código, não
00:01:22precisa ser apenas o Claude Code. Podemos usar Gemini, Codex e, novamente, sem os
00:01:28problemas de uso que vemos dentro do Claude Design original. Então hoje vamos explorar o Open Design;
00:01:34vou mostrar como funciona, como instalar, o que é relevante aqui dentro (pois
00:01:39acho que há um pouco de excesso) e faremos algumas comparações entre ele e o Claude
00:01:43Design. Alerta de spoiler: é muito bom. Acho sólido e estou super empolgado que comecem a
00:01:49surgir esses derivados do Claude Design, porque eu gosto da ferramenta, o problema é que o limite de uso
00:01:53é horrível. Quanto mais ferramentas assim saírem, acho que mais rápido a Anthropic vai
00:02:00se mexer e consertar essa bagunça no uso. O Open Design é a alternativa de código aberto ao
00:02:05Claude Design. Podemos conectá-lo a coisas como Claude Code ou Codex, ou usar nossa própria chave de API
00:02:12se quisermos usar outro sistema ou API. Ele detecta automaticamente quais agentes de código estão
00:02:16no seu computador e já vem com 31 habilidades e 72 sistemas de design de alto nível integrados. Quando
00:02:24disse que foi construído sobre o Huwashu, não estava brincando; eles mesmos mencionam isso. É
00:02:28uma mistura do Huwashu, a habilidade de PowerPoint do Guzheng, o Open Code Design e o
00:02:34Multica. Juntando tudo, eu diria que é o Huwashu com uma camada bonita por cima.
00:02:40O restante do repositório detalha bem o que acontece nos bastidores, com exemplos e demos. Tudo o que
00:02:45precisa saber é: este é o Claude Design de código aberto, ou o mais próximo que chegará disso. Agora,
00:02:49antes de irmos para a instalação, uma palavra rápida do patrocinador de hoje:
00:02:53eu. Acabei de lançar minha Masterclass de Claude Code, e é a melhor forma de ir do zero a
00:02:58desenvolvedor de IA, especialmente se você não tem base técnica. Eu atualizo toda semana
00:03:04e focamos em casos de uso reais e em como usar essa ferramenta para realmente fazer a diferença
00:03:09no seu negócio ou projeto. Você a encontra dentro do Chase AI Plus; há um link no comentário
00:03:14fixado e espero te ver lá. Agora, duas formas de instalar: você pode ir ao repositório,
00:03:18abrir o terminal e colar tudo lá. A segunda opção é ir até este link, copiar (deixarei o link
00:03:23na descrição), colar no Claude Code, Codex ou qualquer um, e dizer: "instale isso para mim
00:03:28num novo diretório" e ele vai configurar tudo. Após instalar e rodar, ele deve te dar um link
00:03:32do servidor de desenvolvimento local. Se não der, peça ao Claude Code: "inicie um servidor dev para o Open
00:03:36Design" e você verá uma página como esta. Provavelmente aparecerá algo perguntando se
00:03:42deseja usar o CLI local, a API da Anthropic ou o que pretende fazer em termos de sistema de IA.
00:03:46Você vai querer escolher o CLI local. Isso significa que ele usará o Claude Code, Codex ou Open
00:03:51Code, especificamente Claude Code e Codex. Assim você não paga taxas de API; tudo é
00:03:56puxado da sua conta do Claude. No modelo, pode deixar o padrão (config do CLI) e então temos
00:04:01a habilidade de adicionar provedores de mídia, porque, como verão aqui, posso criar protótipos, slides
00:04:06e templates, mas também imagens e vídeos. Posso gerar tudo por esta interface, mas
00:04:13para gerar vídeo e imagens, preciso adicionar a chave de API de um modelo que faça isso. Posso
00:04:18adicionar Minimax, OpenAI, ElevenLabs e vários outros. Isso é útil e é algo que não
00:04:24existe no Claude Design. No topo, temos designs, exemplos, sistemas de design, templates de imagem e
00:04:30templates de vídeo. O que são esses templates especificamente em sistemas de design? Bem,
00:04:36é similar ao awesomedesigns.md, se já viram. Basicamente, eles pegaram um site
00:04:40como o Airbnb, por exemplo, e decompuseram o que acontece naquele site em termos de
00:04:46paleta, tipografia, componentes, tema visual e atmosfera. A ideia é: se eu quiser criar
00:04:52um site similar ao Airbnb no estilo, posso usar este prompt e incluí-lo para obter
00:04:58algo próximo. Acho que os resultados variam aqui... essa seção de sistemas de design
00:05:06parece legal, mas não sei o quão eficaz é na prática. O mesmo vale para os templates de imagem;
00:05:13são apenas exemplos de imagens e prompts JSON para chegar perto de algo. Acho que
00:05:18é excesso desnecessário. A mesma coisa nos templates de vídeo; parece legal, mas você não vai
00:05:23tirar muito valor disso. Temos exemplos aqui que também são bacanas, mas entenda que
00:05:29isso é apenas o que eles obtiveram usando um prompt de uma única linha, entende? Não há
00:05:35um prompt super complexo por trás disso. O prompt está literalmente bem aqui.
00:05:42Se eu clicar em "usar este prompt", ele o incluirá: é uma linha, "design do Mutuals, um site de namoro
00:05:47para usuários do X; dashboard diário com estatísticas, matches mútuos e um feed da comunidade".
00:05:53Então, sabe, não se deixem levar demais por alguns exemplos aqui; é um prompt de
00:06:00uma única linha, não há nada de extraordinário acontecendo. Vamos focar no que realmente
00:06:07importa: criar os protótipos, slides e esses tipos de entregas padrão que veríamos
00:06:12dentro do próprio Claude Design. E funciona quase da mesma forma: você dá um nome à demo,
00:06:16escolhe um sistema de design (pode ser um ou vários) e, novamente, temos essa lista completa.
00:06:22Decidimos se queremos um wireframe ou alta fidelidade e temos a opção de importar um
00:06:28arquivo zip do Claude Design. Digamos que você criou um sistema no Claude Design; posso
00:06:32transformar isso num arquivo zip e incluí-lo aqui. Depois, clicamos em criar. Quero mostrar
00:06:37este exemplo primeiro: pedi ao Open Design para criar a mesma coisa que mostramos no vídeo do Huwashu,
00:06:44que era: "quero uma landing page para um produto SaaS fictício chamado Lighthouse, focado
00:06:51em pequenas equipes e fundadores solo". Pedi três exemplos para comparar e aqui tenho
00:06:57o clássico empilhado, algo mais editorial e outro um pouco mais chamativo. Ao comparar
00:07:03diretamente com o que obtivemos no Claude Design, notamos muitas semelhanças: as mesmas
00:07:11fontes, as mesmas cores, especialmente no fundo. Como usamos uma pegada editorial, você também verá
00:07:17aqui à esquerda no Open Design que ele seguiu o mesmo tipo de breve Q&A que se espera do
00:07:21Claude Design. Ele faz perguntas, oferece botões para selecionar, etc. É praticamente
00:07:26o mesmo produto. Agora, vale notar uma das diferenças que vi no Open Design
00:07:32em relação ao Claude Design: o Open Design foi um pouco mais lento. Levou cerca de 10 minutos contra
00:07:37metade do tempo no Claude Design. Outro ponto: embora apareçam opções como comentar, editar e desenhar,
00:07:43elas ainda não estão disponíveis no Open Design, mas estão no roteiro. Se quiser que as
00:07:49opções de ajustes apareçam, terá que pedir diretamente ao Open Design: "pode criar
00:07:56um painel de ajustes onde eu possa alterar as coisas por conta própria rapidamente?"
00:08:01Ligando e desligando, de forma similar ao Huwashu. O Open Design é um pouco mais lento e
00:08:06faltam alguns recursos de qualidade de vida, mas, fora isso, é muito próximo do Claude
00:08:13Design. Agora, falemos sobre usar um sistema de design próprio, porque é um daqueles
00:08:18pontos que exigem um contorno. Se eu quisesse criar um slide usando meu sistema de design
00:08:24do Agentic Dashboard OS (e, para referência, este é o tipo de estética visual que procuro),
00:08:30dentro do Claude Design eu já tenho esse sistema. Se eu quiser recriar isso no Open Design,
00:08:35como eu faço? E de novo, não precisa ser o meu dashboard; digamos que você tenha um site ou ativos
00:08:40e tipografia próprios que deseja recriar aqui. Bem, não há nada direto, tipo, não posso ir em
00:08:46sistemas de design e criar lá; não existe botão para isso ainda. Em vez disso,
00:08:51o que você vai querer fazer é importar um zip do Claude Design. Se eu já criei
00:08:56esse sistema no Claude Design, posso ir até ele (onde estou agora), ir em
00:09:01compartilhar e depois em "baixar projeto como .zip". Então, vou no Open Design,
00:09:08seleciono esse zip e faço o upload. Vocês podem ver aqui todos os arquivos de design
00:09:14que acabaram de ser enviados. Se você estiver tentando fazer algo similar e ainda não
00:09:20transformou em sistema de design no Claude Design, sugiro que o faça; será o caminho
00:09:25mais simples. Ou você pode recriar a estrutura do sistema manualmente dentro do Codex
00:09:32ou do Claude Code. De novo, um pouco trabalhoso; é um dos pontos negativos do Open Design.
00:09:39Acho que o Huwashu facilita um pouco nisso porque, quando estamos no terminal em vez de
00:09:45uma interface gráfica, posso simplesmente dizer no Claude Code: "dê uma olhada naquele diretório,
00:09:51veja tudo o que tem lá e agora recrie estes slides naquele estilo". Sabe, é uma das
00:09:55desvantagens de ser forçado a usar uma interface. No prompt, eu disse: "crie slides sobre meu
00:10:00SaaS fictício Lighthouse, focado em análises para equipes pequenas; faça as perguntas necessárias".
00:10:04Vou dar um zoom para verem melhor, mas aqui estão as perguntas: para quem são os slides?
00:10:08Diremos que é para um lançamento de produto. Quem estará na sala? Pessoal de produto.
00:10:14Quantos slides? Vamos manter curto. Fidelidade? Alta fidelidade. Notas do orador? Não.
00:10:20Tom visual? Brutalista. Use o sistema Agentic OS e deixe que ele decida
00:10:25os pontos da história. Enviamos a resposta e, como em qualquer processo do Claude Code,
00:10:29ele te dá uma lista de tarefas e começa a trabalhar. Aqui está o que ele nos deu
00:10:34para o primeiro slide. Ficou muito bom, acho que está totalmente alinhado
00:10:44com o sistema de design que fornecemos. No entanto, como podem notar, não consigo alternar
00:10:51entre eles; ou isso ou ele fez todos iguais. Eu disse ao Open Design que só vejo o primeiro
00:11:00slide e ele não está alternando; vamos ver se ele consegue consertar. Aqui está o que
00:11:04o Open Design entregou para a apresentação. Eu também exportei para PowerPoint para que vejam
00:11:08como é o processo, pois as coisas costumam parecer ótimas no Claude Design e no Open Design,
00:11:13mas quando chegam no PowerPoint, podem ter detalhes desalinhados. O primeiro slide está bom;
00:11:20o segundo está ok, embora desse para ajustar um pouco os números. Slide três: aqui está um pouco
00:11:25fora; precisamos mudar como isto está separado e o espaçamento. O slide quatro está bom.
00:11:29Este também. No slide seis, provavelmente deveríamos subir isso um pouco. No sete, temos
00:11:34alguns problemas de formatação de novo para manter o texto dentro das caixas, mas eu consideraria
00:11:39esta uma solução 90% pronta. Levaria uns cinco minutos para ajustar, e combina com o sistema
00:11:43de design que buscamos. Mas deu para ver que, ao criar esses slides, ele é um pouco
00:11:52menos refinado em comparação com um projeto mais polido como o Claude Design. E isso
00:11:58é esperado; o Open Design foi lançado literalmente esta semana. Espero que continuem
00:12:04iterando e suavizando esses pontos. Mas no geral, para algo que acabou de sair e
00:12:13sendo praticamente a primeira versão, acho o Open Design uma ferramenta muito sólida se você
00:12:18quer usar o Claude Design e precisa de uma interface gráfica para tudo isso,
00:12:24especialmente se estiver sendo limitado pelo uso. Se não precisa de interface gráfica, mas gosta
00:12:29da estrutura do Claude Design, acho o Huwashu provavelmente um pouco melhor; é mais rápido
00:12:33e, por rodar no terminal, acho mais flexível. Mas se você é do tipo que diz "eu preciso
00:12:37dessa interface", então esta é uma alternativa sólida ao Claude Design. Eu amo
00:12:42o Claude Design, não me entendam mal, mas os limites de uso são absurdos. Como
00:12:48disse antes, espero que surjam 10 milhões dessas ferramentas amanhã para que
00:12:54a Anthropic se sinta pressionada a resolver esse problema de uso; é ridículo. Então
00:13:00vou parar por aqui. É uma ferramenta bem legal, confiram vocês mesmos; é fácil
00:13:05de configurar e muito flexível com os diferentes agentes de código. Me digam
00:13:10o que acharam nos comentários, não esqueçam de conferir o Chase AI Plus para acessar
00:13:15a Masterclass. A gente se vê por aí.
00:13:21como eu disse antes, espero que surjam 10 milhões dessas ferramentas amanhã para que
00:13:26a Anthropic se sinta pressionada a resolver esse problema de uso; é ridículo. Então
00:13:31vou parar por aqui. É uma ferramenta bem legal, confiram vocês mesmos;
00:13:34é fácil de configurar e muito flexível com os diferentes agentes de código. Me digam
00:13:40o que acharam nos comentários. Não esqueçam de conferir o Chase AI Plus para acessar
00:13:43a Masterclass. A gente se vê por aí.