Como Usar o Claude Design Para Criar Sites Incríveis

AAI LABS
Computing/SoftwareInternet Technology

Transcript

00:00:00Um bom design realmente importa porque, se você quer clientes, os visuais do seu site são a primeira coisa
00:00:05que eles avaliam. Há muitas ferramentas que ajudam com isso e o Claude Design é uma das
00:00:09mais poderosas disponíveis no momento. Mas um bom design não vem apenas de dar comandos à ferramenta. Então, em
00:00:14este vídeo, vamos passar por um processo de cinco estágios que você mesmo pode executar com o Claude Design
00:00:18. Quer você nunca tenha aberto o Claude Design ou já o use há meses, há algo
00:00:22aqui para você. Se você nunca o abriu antes, tudo bem, porque começamos do que a ferramenta
00:00:27sequer é. E se você já cria designs nele, abordamos como integramos o Claude Design
00:00:32com o Claude Code para torná-lo muito mais poderoso. Então, use as marcas de tempo abaixo para ir direto ao ponto.
00:00:37Agora, se você é novo no canal, seja bem-vindo. Nós somos na verdade uma empresa de software e construímos
00:00:41um sistema completo para você em torno do Claude Design, baseado em nossos processos internos. Sem perder mais
00:00:47tempo, vamos entrar no vídeo. Esta seção é apenas para quem não sabe o que é o Claude Design. Então,
00:00:52se você já o conhece, pode pular para a próxima. Ele apareceu pela primeira vez como uma prévia de pesquisa
00:00:57quando a Claude lançou seu modelo Opus 4.7. É basicamente uma ferramenta de design com uma interface muito fácil de usar
00:01:02que permite que qualquer pessoa, até mesmo quem não é técnico, crie bons designs com comandos simples.
00:01:07E está disponível em todos os planos pagos. Também não para em sites. Você
00:01:12também pode projetar seus slides, documentos e até mesmo criar animações com ele. Além disso, o Claude Design está disponível
00:01:17tanto no Claude Desktop quanto no site da Claude. Portanto, você não precisa necessariamente instalar o aplicativo para desktop.
00:01:22Se quiser usá-lo no aplicativo, basta baixá-lo, executar a instalação e fazer login na sua conta.
00:01:27Em seguida, você abre a barra lateral, clica em design, e a interface dele se abre para você começar a usá-lo.
00:01:32O Claude Design oferece todos os modelos da Claude para você escolher, até mesmo o Fable, que é o modelo mais capaz
00:01:37deles, embora você só tenha acesso limitado a ele. O principal deles para uso geral ainda é o Opus,
00:01:42e continua sendo o melhor para projetar. Mas o problema desses modelos Opus é que eles simplesmente consomem
00:01:46muitos tokens. O Haiku, por outro lado, não usa nem de longe tantos, mas pode precisar de mais
00:01:51refinamento para gerar um bom design. E, além disso, você também pode definir o nível de esforço para cada
00:01:55modelo. Um nível de esforço basicamente controla o quanto o modelo pensa antes de fazer qualquer coisa. Nós usamos
00:02:01o Opus 5, o modelo mais recente até o momento, em esforço médio para nossas tarefas de design, porque nos permite criar
00:02:06com facilidade, sem desperdiçar muitos tokens. Ele também permite que você traga todos os seus MCPs e habilidades, o que torna
00:02:12muito mais fácil usar seu próprio sistema diretamente nele. Para quem não sabe, MCPs são basicamente o que permite
00:02:18que um agente se conecte a coisas fora dele, como outras ferramentas e serviços, e as habilidades são conjuntos de
00:02:23instruções que ensinam o agente a fazer algo melhor com orientações passo a passo e referências que ele
00:02:28pode seguir. Agora, antes de começar, há uma coisa a ter em mente. Há um limite para quantos designs
00:02:33você pode criar. O Claude Design funciona com um limite de 5 horas, mas não é apenas para seus designs. Tudo o mais que
00:02:38você faz no Claude conta para o mesmo limite. Dentro dessa janela de 5 horas, há um teto de quantos tokens você
00:02:44pode gastar e, uma vez esgotados, você precisa esperar essas 5 horas terminarem antes de poder usá-lo
00:02:49novamente. E embora tenha melhorado muito desde o seu lançamento, o Claude Design ainda
00:02:53consome muitos tokens, então se você o estiver usando intensamente, espere que seus limites se esgotem mais rápido. Portanto, para
00:02:59compensar o uso extensivo de tokens, você precisa tomar algumas medidas antes de partir direto para os comandos.
00:03:04Essas etapas são importantes porque garantem que você obtenha o design desejado sem desperdiçar
00:03:09muitos tokens. A primeira coisa que você precisa fazer é criar o arquivo design.md. Este é um formato que
00:03:15o Google iniciou e que contém todos os detalhes do design da sua marca. Seu agente de codificação de IA lê esse arquivo
00:03:20antes de escrever qualquer coisa, de modo que cada tela entregue esteja alinhada à marca. Ele nunca precisa adivinhar,
00:03:25então nunca sai da identidade da marca. Agora, o Claude Design tem um recurso que permite criar sistemas de design.
00:03:30Um sistema de design é basicamente um conjunto de escolhas de estilo que aparecem em todo o seu site. Ele contém suas fontes,
00:03:35suas cores e todos os outros detalhes que compõem o seu design, permitindo usá-los para construir
00:03:40mais designs. Assim, todos os designs criados com um sistema de design seguirão o mesmo estilo e parecerão
00:03:46fazer parte do mesmo site. Mas o principal motivo para começar com um arquivo design.md predefinido é que
00:03:51todos esses modelos geram designs com aparência idêntica. Se você deixar o Claude Design criar o sistema de design por
00:03:57conta própria, ele simplesmente recorre às cores e estilos genéricos que os modelos Opus usam em todo lugar e,
00:04:02por causa disso, seu site acaba parecendo com qualquer outro site criado por IA por aí. Mas se você
00:04:07fornecer um design.md para basear o sistema de design, esse arquivo diz exatamente o que você quer, tornando tudo
00:04:12muito mais controlado e evitando que ele recorra a esses padrões. E como já mencionamos, o outro
00:04:17motivo é a consistência. Como todo o sistema de design se baseia nesse único arquivo, cada página segue exatamente
00:04:22o mesmo estilo, o que mantém seu site de várias páginas com uma aparência consistente. Para isso, criamos uma habilidade
00:04:27que planeja o design.md para você. Para usar essa habilidade, você a executa dentro do Claude Code. E o Claude
00:04:33Code é basicamente outra ferramenta da Anthropic. É essencialmente uma ferramenta de codificação de IA executada no seu terminal
00:04:39que pode criar aplicativos inteiros para você. Para instalá-lo, basta ir ao site oficial, copiar o comando de instalação
00:04:45e executá-lo no seu terminal. Feito isso, digite claude no terminal,
00:04:49e você poderá comecar a usá-lo digitando seu comando. Como íamos construir o aplicativo no Claude
00:04:54Code, nós simplesmente colocamos essa habilidade na pasta skills dentro da pasta .claude, que é basicamente
00:04:59onde ficam todas as configurações do Claude Code. Provavelmente você não terá essa pasta, mas pode dizer
00:05:05ao Claude Code na caixa de comando que precisa instalar habilidades no projeto, e ele vai configurá-lo
00:05:10para você e até colocar a habilidade lá sozinho. A pasta .claude não ficará visível quando você a abrir
00:05:15no Finder. Isso acontece porque o nome dela começa com um ponto, e arquivos que começam com ponto são tratados como
00:05:20arquivos de sistema, então o Finder os oculta por padrão. Para acessá-la, você precisa de um editor de código,
00:05:25que é basicamente um aplicativo que permite ver todos os arquivos do seu projeto em um só lugar organizado. O que usamos
00:05:31é o VS Code, que é da Microsoft, e é o mais utilizado pelos criadores devido à facilidade de trabalho.
00:05:36Para instalá-lo, vá ao site oficial, baixe o instalador para o sistema
00:05:40em que você está e execute a instalação. Em seguida, abra a pasta do seu projeto nele, e você poderá
00:05:45ver tudo, incluindo os arquivos ocultos. Depois, sempre que quiser criar um aplicativo, basta
00:05:49chamar essa habilidade com o comando de barra, que é basicamente um atalho que você digita com uma barra para
00:05:54acioná-la e dar um comando dizendo o que deseja construir. Ela o entrevista e planeja
00:05:59a identidade visual do produto em detalhes com você e, assim que obtém tudo, escreve
00:06:03todo o arquivo design.md, além de validá-lo contra os padrões do Google executando os scripts. Essa habilidade
00:06:09também contém referências anti-padrão de IA, que são basicamente todos os padrões comuns que denunciam um site como criado
00:06:15por IA. Portanto, planejar um design.md primeiro é realmente a melhor opção. Além disso, se estiver se perguntando onde
00:06:21conseguir essa habilidade, não se preocupe, mostraremos mais adiante no vídeo. Agora, o aplicativo que estamos construindo neste vídeo
00:06:26é um aplicativo de gerenciamento de projetos onde você gerencia todos os seus projetos de código em um só lugar. Para começar,
00:06:31primeiro você dá um comando ao Claude Code com o comando de barra para a habilidade, falando sobre o aplicativo que
00:06:36deseja construir em termos gerais e para que ele servirá, e ele começa analisando a identidade visual
00:06:41da sua ideia. Uma vez com isso, ele começa a fazer perguntas, como se você tem
00:06:46uma cor em mente para o seu site. Se você já decidiu as cores da sua marca, pode fornecê-las,
00:06:51ou pode deixar que ele escolha por conta própria. Como você está usando a habilidade, ele não recorrerá a cores genéricas,
00:06:55então você não precisa se preocupar com essa aparência comum, mas ainda é melhor tê-las decididas
00:07:00antecipadamente. O que costumamos fazer é usar o Coolors, que é o site que gera e visualiza
00:07:05paletas de cores, para que você possa ver como as cores ficam juntas. Assim que encontrar uma combinação de cores
00:07:09de que goste, você pode clicar em exportar, depois escolher a opção de código, e ele fornecerá
00:07:14um texto que você pode simplesmente copiar e colar no Claude Code. O Claude Code colocará isso
00:07:18dentro dos seus arquivos design.md para você. Depois disso, ele criará o arquivo design.md e executará
00:07:24algumas etapas de verificação. E o arquivo de design sai exatamente da maneira que o Google o estruturou.
00:07:29Agora, esse formato do Google é fácil para o modelo de IA entender, mas é difícil para você
00:07:33imaginar os designs que serão gerados a partir dele, de modo que você não consegue dizer se é o design que
00:07:38você quer finalizar ou se precisa ser alterado. Mas não o teste dentro do Claude Design. Você gera
00:07:43seus designs lá, e digamos que você não goste deles. Agora você tem que voltar para o design.md,
00:07:48alterá-lo e gerar tudo de novo. Cada uma dessas rodadas custa tokens. Há muitas
00:07:53ferramentas que simplesmente visualizam um design.md para você, e uma que usamos é o design.md.space. Qualquer
00:07:59uma delas mostra como o seu arquivo de design se parece e como todas as cores escolhidas para diferentes áreas
00:08:04funcionam juntas. Ela também visualiza todos os elementos, o que torna muito mais fácil decidi-los. Agora, esta
00:08:10é apenas uma maneira de criar um design.md, mas existem outras. Se você não quiser criar um por
00:08:15conta própria, você pode simplesmente copiar o design de um site popular como exemplo. E honestamente, copiar um como
00:08:19referência é o que muitas pessoas já fazem. Você o adota como ponto de partida e faz alterações para
00:08:24torná-lo seu, assim como muitas pessoas pegaram a aparência simples do Notion e a adaptaram para
00:08:29seus próprios designs após alguns ajustes. Para isso, há um site chamado getdesign.md, que lista
00:08:34muitas marcas e todos os seus estilos como arquivos design.md que você mesmo pode baixar. Como nós
00:08:39já temos o nosso próprio design.md, podemos avançar com o Claude Design e criar um novo
00:08:44sistema de design a partir dele. Quando você cria um novo, ele pergunta sobre os detalhes do produto. Mas como você
00:08:49já tem um design.md, basta carregá-lo como um recurso. E então ele começa a gerar o novo sistema
00:08:55lendo o arquivo, criando tarefas e trabalhando nelas uma a uma. Daqui a pouco, o Claude Design
00:09:00cria o sistema de design e visualiza tudo para você, construindo os diferentes elementos que farão
00:09:06parte do aplicativo onde ele será usado. Agora, para você acompanhar este fluxo de trabalho, você precisará desta
00:09:10habilidade. Nós a colocamos no GitHub e adicionamos o link na descrição para você obtê-la de graça.
00:09:14Então, para usá-la, basta passar este link para o Claude Code e pedir para ele configurá-la para você, e ele vai instalá-la
00:09:19e colocá-la na pasta .claude sem que você precise fazer nada. Agora, uma vez que o sistema de design
00:09:24está definido e é hora de realmente usá-lo, há outro passo muito importante antes de começar
00:09:29a construir o site. E esse passo é criar wireframes do que você quer construir. Um wireframe é basicamente
00:09:34um esboço rápido que permite ver onde todos os elementos ficam e se estão posicionados corretamente. Agora, você
00:09:39poderia simplesmente criar o site direto, mas isso causa problemas. Você teria que esperar muito
00:09:43tempo porque o Claude Design é lento para criar designs e, se depois de tudo isso o design não for o que você
00:09:48precisa, você teria que refazer tudo. Então, para fazer isso no Claude Design, selecione o sistema de design que
00:09:53você acabou de criar, escolha a opção de wireframe e dê um comando com os detalhes de quantas telas você deseja.
00:09:58Depois disso, ele também permite criar várias opções para cada tela, para que o Claude possa oferecer alguns
00:10:03estilos diferentes de cada tela para você escolher. Não vai demorar muito para gerá-los e então você poderá
00:10:08analisar a estrutura e conferir todas as variações feitas para a mesma página. Ele também
00:10:12possui um recurso de comentários, então para alterar qualquer coisa, basta deixar um comentário nela. Um comentário basicamente
00:10:18envia os detalhes exatos daquele elemento junto com o seu comando, para que o Claude saiba exatamente qual área precisa
00:10:23ser alterada e como. Isso o torna muito melhor do que apenas digitar um comando e deixar o Claude descobrir qual
00:10:28área você quer dizer por conta própria. E para adicionar um, basta selecionar o recurso de comentário, clicar exatamente
00:10:33no item que você quer mudar e digitar a alteração necessária. E você pode adicionar quantos comentários precisar.
00:10:38Você pode enviá-los um por um, mas é melhor agrupá-los e enviá-los de uma só vez para que ele os resolva
00:10:42em conjunto e corrija tudo de uma vez só. Isso mantém o seu tempo de espera no mínimo. Então, continue
00:10:48ajustando até ficar satisfeito com a estrutura e, quando terminar aqui, você pode seguir em frente. E se
00:10:52você está gostando do vídeo até agora, inscreva-se no canal e clique no botão de curtir. Esse pequeno gesto de
00:10:57apoio nos ajuda bastante. Agora, depois de desenhar o wireframe, é hora de criar o design
00:11:03definitivo. Você também pode usar o mesmo design para criar algumas variações. Como você geralmente
00:11:06pede ao Claude para fazer algumas variações do mesmo design, primeiro você escolhe qual variação deseja
00:11:10entre as que acabou de criar. Cada uma dessas páginas é identificada por seu número de código, então basta selecioná-la
00:11:15por ele. Depois disso, você dá um comando dizendo que quer que essas telas sejam transformadas no design completo
00:11:20e detalhado, e pede para manter o layout e a estrutura do wireframe com espaçamento limpo
00:11:26e hierarquia clara. O Claude Design lê todos os elementos criados durante a construção do sistema de design.
00:11:31E usando-os, ele constrói o site inteiro para que fique exatamente de acordo com o sistema de design
00:11:36e o wireframe, exatamente como precisamos. Assim como no wireframe, você também pode comentar e corrigir coisas
00:11:41aqui. E você provavelmente precisará de muitas alterações porque ele tende a não escolher as cores dos botões corretamente.
00:11:46Alguns botões precisam chamar a atenção e devem ter uma cor forte para se destacar, então você pode pedir para ele
00:11:50consertar isso. E como ele é construído sobre o wireframe, o site fica um pouco vazio por
00:11:55conta própria, com apenas as partes básicas adicionadas sobre o esboço rústico, então você pode pedir para ele adicionar texturas
00:12:00e elementos para um visual mais completo. Você também pode aplicar edições diretamente no design, então se você tiver uma mudança
00:12:05pequena, como excluir algum elemento, pode fazer isso direto no design sem precisar pedir para o Claude
00:12:10fazer isso. Dessa forma, a alteração é aplicada sem que você precise esperar e gastar tokens com algo tão
00:12:15pequeno. E quando terminar de fazer as alterações, você pode pedir para o Claude Design dar um toque final no visual geral,
00:12:20e ele faz essas mudanças sutis e significativas no design. Assim, a primeira versão do aplicativo está
00:12:25pronta agora, mas falta uma coisa: as animações. Elas são importantes porque
00:12:29tornam a navegação no site mais agradável e guiam o olhar para o que realmente importa. Detalhes como o rolamento
00:12:35para dentro da tela ou outros pequenos toques fazem o site parecer mais vivo. Então, para isso, nós demos ao Claude Design
00:12:40um comando para adicionar animações em todas as telas, como elementos aparecendo ao rolar a página ou outros pequenos
00:12:45detalhes que dão mais vida ao site. E dissemos para mantê-las sutis e não exagerar
00:12:50nos efeitos elásticos, pois isso pode parecer estranho. Quando o Claude Design terminou, dava para ver as animações de surgimento
00:12:55ao rolar e pop-ups de texto que deixam o site inteiro muito mais interativo. E uma vez que você estiver
00:13:00satisfeito com o design, você pode passar para a próxima etapa, que é a entrega. O design no Claude
00:13:05Design está finalizado agora, e é hora de dar vida a ele, transformando-o no produto real que vamos
00:13:10entregar no final. O Claude Design não tinha isso antes, mas agora você pode exportar seus designs
00:13:15diretamente para o Claude Code. Ele usa o MCP do Claude Design, que é basicamente o que permite que o Claude Design e o
00:13:21Claude Code se comuniquem. E não funciona apenas em uma direção, funciona nos dois sentidos. Então você pode mover
00:13:26seus designs do Claude Design para o Claude Code e trazê-los de volta da mesma forma também. Você abre o Claude
00:13:31Code novamente e cola este comando que você obteve do Claude Design. Ele começa lendo os metadados,
00:13:36que são basicamente as informações de resumo sobre o design, e então lista os arquivos do projeto. Ele lê o sistema de design
00:13:42primeiro, porque é onde o design é definido, e então lê todos os elementos um
00:13:47por um. Assim que tem o design completo, ele o constrói no seu projeto, com todas as animações que estão no
00:13:52Claude Design. Mas tivemos que verificar essa conversão duas vezes para garantir que foi feita corretamente. Visualmente,
00:13:57tudo parecia bom, mas ainda podia haver problemas internos quando o código bruto do Claude Design
00:14:02é transformado em um aplicativo real. Então pedimos uma revisão profunda, e ele começou a verificar o design.md
00:14:08em relação ao que foi realmente construído para ver se os dois coincidiam. E essa revisão pegou vários problemas
00:14:12como problemas de responsividade, o que significa apenas que o aplicativo não estava ficando legal em diferentes tamanhos de tela,
00:14:17como celulares ou tablets. O que o Claude Design cria costuma ter esse problema, porque
00:14:22ainda é uma versão inicial, então tudo o que ele projeta fica melhor para a coisa exata para a qual foi feito. Um design
00:14:27feito para um site vai ficar ótimo nele, mas nem sempre em outros tamanhos de tela, então executamos as correções,
00:14:32e depois disso a parte visual do aplicativo estava funcionando e responsiva. Agora, para realmente concluir este
00:14:36aplicativo e fazê-lo funcionar, precisávamos conectá-lo a algo chamado banco de dados. O problema agora
00:14:41é que, embora o aplicativo esteja totalmente funcional, e se clicarmos nos botões, ele funcionará e adicionará
00:14:46detalhes em um novo projeto. Mas se abrirmos o aplicativo novamente, todo o progresso que fizemos nele
00:14:51vai sumir. É por isso que precisamos de um banco de dados, para que todos esses dados fiquem armazenados no aplicativo e as pessoas possam
00:14:57realmente usá-lo. Para isso, usamos o Supabase. É um dos provedores de backend mais populares do mercado,
00:15:02e uma das melhores maneiras de gerenciar usuários e todos os seus dados. O Supabase não é novidade para nós. Nós o usamos
00:15:08em quase todos os aplicativos que construímos, não importa para quem estejamos construindo, e até mesmo muitas de nossas ferramentas internas
00:15:12rodam toda a sua configuração nele. Isso acontece porque ele nos tira muito trabalho das mãos
00:15:17que teríamos que fazer de outra forma. É também um dos bancos de dados mais usados, simplesmente por ser tão fácil
00:15:22de conectar com agentes de IA como o Claude Code. O Supabase também tem uma habilidade de agente, que contém
00:15:28instruções, scripts e recursos que o agente pode usar para trabalhar com o Supabase de forma mais confiável. Assim,
00:15:33ele sabe tudo o que precisa para aproveitar ao máximo as ferramentas do Supabase. Para instalá-la, basta copiar
00:15:39o comando de instalação e passá-lo para o agente, e dentro desse pacote existem duas habilidades. Uma é a
00:15:43habilidade do Supabase, que é basicamente um guia de como usá-lo, e a outra é a de melhores práticas,
00:15:48que contém as melhores maneiras de otimizar o desempenho do seu aplicativo. Assim que a instalação for concluída,
00:15:53você verá as duas novas habilidades adicionadas ao seu projeto. A habilidade do Supabase é acionada sempre que houver alguma
00:15:58tarefa de banco de dados ou login, e a de melhores práticas entra em ação se você quiser que o Claude Code torne seu
00:16:04aplicativo mais rápido mencionando as palavras “otimizar desempenho” no seu comando. Tudo isso é
00:16:08apoiado por uma imensa biblioteca de referências para todos os tipos de problemas. Uma vez instaladas essas habilidades,
00:16:13você pode dar um comando ao Claude Code para construir o backend e conectar o design existente a ele,
00:16:18para que o aplicativo inteiro realmente funcione. Agora, como não queríamos que o agente trabalhasse na estrutura de
00:16:22como os dados do aplicativo são organizados, nós já havíamos criado isso por conta própria e adicionado à
00:16:27pasta principal do projeto. Como a habilidade é apenas um pacote de instruções, ela não consegue acessar seu projeto
00:16:32nos servidores do Supabase e fazer alterações lá. É apenas texto dizendo ao agente o que fazer,
00:16:36então ela não vem com nenhuma ferramenta que permita trabalhar em coisas fora do agente. É por isso que a habilidade do Supabase
00:16:41pede para você conectar a CLI deles, que é a ferramenta que você executa no terminal,
00:16:46ou o MCP. Qualquer um deles dá ao agente as ferramentas para trabalhar diretamente no seu projeto Supabase,
00:16:51para que você não precise fazer nada manualmente. Escolhemos o MCP porque é mais fácil de configurar,
00:16:56e não precisaríamos lidar com as chaves que permitem à CLI fazer login na sua conta. Para conectá-lo,
00:17:01você vai ao site oficial deles, copia o comando de instalação para o agente que está usando,
00:17:05e o executa no terminal aberto na pasta do seu projeto. Depois disso, você roda o comando /mcp
00:17:10dentro do Claude Code e verá que ele está conectado, mas não poderá usá-lo imediatamente porque
00:17:15não está logado. Então, assim que você selecionar Autenticar, será direcionado ao navegador para fazer o login,
00:17:20e então o MCP estará conectado. Com o MCP conectado, o Claude Code carregou a habilidade
00:17:25e começou a trabalhar no aplicativo. Ele fez muitas alterações e executou testes nessas requisições de banco de dados
00:17:30para garantir que construiu a melhor versão. Ele também garantiu a proteção de todas as áreas que
00:17:34não devem ser acessíveis a qualquer usuário, tudo graças àquelas diretrizes na habilidade. E assim,
00:17:39o Supabase gerencia todo o backend para você, por meio da habilidade. Agora todo o aplicativo está construído
00:17:44e funcionando de verdade. Falta apenas um passo, que é o deploy, ou seja, colocá-lo online
00:17:49para que qualquer pessoa possa usá-lo. Mas não vamos entrar nisso aqui, então fiquem atentos aos
00:17:53próximos vídeos onde abordaremos isso em detalhes. A habilidade que fornecemos faz parte de um sistema de design
00:17:59maior que usamos internamente em nossos projetos. Então, se você quiser ter acesso a esse sistema,
00:18:04pode obtê-lo no AI Labs Pro, que é a nossa comunidade. Lá você também encontrará
00:18:08outras habilidades e recursos que mostramos em nossos vídeos, além de um espaço para interagir com a nossa
00:18:14equipe. Então, se você encontrou valor no que fazemos e quer apoiar o canal, esta é a melhor maneira de
00:18:18fazer isso. O link está na descrição. Isso nos traz ao final deste vídeo. Se você quiser apoiar
00:18:23o canal e nos ajudar a continuar fazendo vídeos como este, você pode fazer isso usando o botão de valeu demais
00:18:28abaixo. Como sempre, muito obrigado por assistir e vejo você no próximo.

Key Takeaway

O processo de cinco estágios integra Claude Design e Claude Code utilizando arquivos design.md, wireframes e Supabase para construir aplicativos funcionais e responsivos.

Highlights

  • O Claude Design opera com um limite de janela de 5 horas que restringe tanto os designs quanto o consumo geral de tokens no ecossistema da Claude.

  • O arquivo design.md armazena fontes, cores e diretrizes visuais para alinhar o agente de IA à identidade da marca antes da geração de telas.

  • O Supabase atua como o provedor de backend para gerenciar bancos de dados e dados de usuários de forma integrada com ferramentas de IA.

  • O design.md.space permite visualizar arquivos de design em formato Markdown para testar a combinação de cores antes de gastar tokens.

  • O Claude Design exporta projetos diretamente para o Claude Code por meio de um protocolo MCP bidirecional.

Timeline

Introdução ao Claude Design

  • O Claude Design surgiu na prévia de pesquisa do modelo Opus 4.7 da Claude.
  • A ferramenta opera em planos pagos do Claude Desktop e do site oficial.
  • O sistema possui um limite operacional restrito a janelas de 5 horas de consumo de tokens.

O Claude Design permite criar sites, slides, documentos e animações por meio de comandos simples. O Opus 5 em esforço médio equilibra capacidade de criação e economia de tokens. Limites rígidos de tokens exigem planejamento prévio para evitar interrupções no fluxo de trabalho.

Planejamento com o arquivo design.md

  • O arquivo design.md padroniza fontes, cores e diretrizes visuais da marca.
  • O Claude Code roda no terminal para configurar e gerenciar habilidades de design.
  • O Coolors exporta códigos de paletas de cores para inserção no arquivo de design.

A criação prévia do design.md impede que a IA recorra a padrões genéricos e visuais idênticos. O VS Code exibe arquivos ocultos iniciados por ponto na pasta .claude. Ferramentas como design.md.space e getdesign.md auxiliam na visualização e cópia de estilos de referência.

Criação de Wireframes e Designs Definitivos

  • Os wireframes determinam o posicionamento dos elementos antes do desenvolvimento completo.
  • O recurso de comentários direciona alterações específicas em partes exatas da tela.
  • As animações guiam a atenção do usuário e tornam a navegação interativa.

A geração de wireframes otimiza o tempo ao testar múltiplas opções de layout com baixo custo de tokens. Comentários pontuais informam ao Claude a área exata que necessita de ajustes. Animações sutis de rolagem e pop-ups adicionam dinamismo sem sobrecarregar a interface.

Integração com Claude Code e Supabase

  • O MCP do Claude Design transfere arquivos visuais para o Claude Code de forma bidirecional.
  • O Supabase gerencia o backend e o armazenamento persistente de dados do aplicativo.
  • A habilidade do Supabase conecta o MCP e a CLI para automatizar o banco de dados.

A exportação para o Claude Code converte o design visual em código bruto que exige revisões de responsividade para diferentes telas. O Supabase armazena o progresso do usuário para evitar perda de dados entre sessões. Comunidades pagas fornecem acesso a pacotes avançados de habilidades e recursos internos.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video