Pare de criar design genérico com IA! Aprenda Design System com Claude

CONTEUDO

Isso define o que que vai ficar de fora e o que que vai ficar de dentro.

Todo mundo acha que a inteligência artificial [música] vai substituir a profissão dos designers, mas o que tá acontecendo é totalmente o contrário. Quem sabe dirigir a ferramenta ficou ainda mais forte. Na última sexta-feira, a Antropic lançou o Cloud Design e a primeira vista ele parece só mais uma ferramenta que transforma texto em layout.

O que voce vai ver

• Tendo o seu documento definido, pode ser que você tenha esse documento já pronto, produzido por um designer e dessas informações dentro da sua marca, então você consegue produzir rapidamente também.
• Além disso, tem alguns princípios de marca também que eu acho interessante colocar, tipo, produto é protagonista, a cor é uma linguagem, a gente tem o humor, sempre comercial, nunca artístico.
• E aí se eu tiver numa apresentação online, isso é legal porque eu consigo sempre estar ali bem fiel ao que eu preciso falar e ninguém precisa saber, não preciso ter totalmente aquilo decorado.
• Então, falando de novo sobre o fundo sólido, uma composição simples, mas que contém uma ideia por personagem, um produto central e elementos secundários que estão ali rodeando o meu mundo.
• Aqui também vale dizer que você pode deixar o seu prompt muito mais rico, dando mais informações do que você quer pro seu app agora ou você consegue também depois ir ajustando e editando.

Só que se você parar aí, você entendeu totalmente errado, porque o valor ele não tá exatamente na geração, tá em manter fidelidade total nos parâmetros que você definiu. Eu testei isso na prática e a diferença é muito clara. A ferramenta consegue gerar algo visualmente muito bom, mas quando ela acerta de verdade é quando o resultado parece que saiu de você, quando tem linguagem, [música] consistência, quando você bate o olho e reconhece.

Isso não vem de um prompt solto, não é simplesmente pedir faça algo [música] x para mim. Isso até funciona, só que vai te resolver uma coisa genérica.

Entendendo o conceito

Se você quer que isso funcione de verdade, tem uma estrutura. [música] Primeiro, a gente precisa definir a base. Você precisa ter um logo, uma tipografia, cores, imagens e uma linguagem visual minimamente organizada da tua empresa.

Isso define o que que vai ficar de fora e o que que vai ficar de dentro. E é exatamente assim essa seleção que constrói a sua identidade. Sem isso, qualquer resultado vai parecer totalmente genérico.

Pode ser que você já tenha um brandbook da sua marca ou essas informações organizadas em algum lugar. E é justamente isso que a gente vai usar para alimentar o cloud design, [música] para que ela não gere algo aleatório e fique sempre dentro da tua identidade. Depois disso, você transforma isso em um sistema.

Aplicacoes reais

Você precisa deixar claro como que a sua marca se comporta, quais elementos ela usa, quais são as combinações que fazem sentido e o que não deve acontecer. Quando isso tá estruturado, você deixa de depender de tentativa e começa a ter previsibilidade no seu resultado. E [música] só depois disso vem a geração.

Aí sim você pode pedir uma apresentação, uma landing page, um vídeo simples e tudo começa a sair com total coerência, porque agora a ferramenta ela não tá mais inventando, ela tá seguindo o seu sistema. Então agora vamos dar uma olhada no brandbook que eu fiz para mim como marca pessoal mesmo.

Eu abri um documento no próprio do Google Docs e coloquei várias informações. Vamos dar uma olhadinha aqui. Eu tenho um pouco da essência da minha marca, qual que é o meu posicionamento.

O futuro do tema

Então aqui no caso eu coloquei que eu sou Visual Director, falei um pouquinho de mim, que eu gosto de transformar produtos em imagens com impacto, numa estética totalmente publicitária e também tendo uma linguagem autoral. E aí falei os territórios que a minha marca circula, publicidade, food, lifestyle.

Coloquei aqui para baixo também quais são os princípios criativos da minha marca. Eh, eu sempre tenho o produto como protagonista, eu tenho a coragem, não apenas como decoração nas minhas imagens. uso um pouco do humor, do exagero, do desejo.

Tem um realismo super elevado mesmo nas minhas criações com inteligência artificial e sempre tenho uma proposta comercial por trás, mesmo num projeto artístico. Aí, além disso, eu tenho um pouco da minha identidade visual.

O que especialistas dizem

Que que é a minha identidade visual? Eu tenho aqui as cores prioritárias, que no meu caso é o vermelho saturado e o amarelo.

Tenho as minhas cores secundárias que eu coloquei com azul, rosa e o verde. E tem algumas regrinhas de acordo com essas cores.

Então, eu tenho sempre um fundo muito chapado ou altamente controlado. A gente tem sempre uma precisão muito estratégica e um auto contraste em todas as imagens.

Outra coisa super importante no nosso brandbook que o cloud design vai conseguir pegar para criar também é a tipografia. No meu caso, eu uso aqui a tipografia elvética. Coloquei aqui que a calcha alta é predominante e tem um peso visual bem dominante em cima das minhas criações.

A função do texto, ele é também gráfico e não só informativo. Então ele tá, ele faz parte de toda a composição.

E coloquei também alguns direcionamentos de direção de arte, que eu gosto bastante nas minhas imagens. Então, falando de novo sobre o fundo sólido, uma composição simples, mas que contém uma ideia por personagem, um produto central e elementos secundários que estão ali rodeando o meu mundo.

Eu tenho uma luz com flash sempre direto e muito forte, uma textura combinando vários tipos de texturas, então tudo hiperdefinido, comida brilhando, uma pele contrastada, objetos eh que fazem parte dessa composição também. E em cima de tudo isso, eu criei uma imagem que eu acho que resume bastante da minha identidade visual.

Então, em uma simples imagem, eu tenho as minhas cores principais, as minhas cores secundárias, como ele vai usar essas cores na produção, o meu tipo de fonte, como usar esse tipo de fonte, algumas imagens que eu produzi que trazem bastante sobre a minha direção de arte e alguns tipos de aplicação que poderiam ser legais ã dentro das minhas cores, com a minha tipografia, com a estrutura total do meu brandbook. Além disso, tem alguns princípios de marca também que eu acho interessante colocar, tipo, produto é protagonista, a cor é uma linguagem, a gente tem o humor, sempre comercial, nunca artístico. E outra coisa muito importante, principalmente se você escreve bastante texto, se você vai usar o cloud design para fazer apresentações, pits, por exemplo, é definir o seu tom de voz.

No meu caso, eu tenho um to de voz direto, afirmativo e contemporâneo, sem floreio, sem um superão. A imagem, ela tem que explicar antes do que eu vou falar. Tendo o seu documento definido, pode ser que você tenha esse documento já pronto, produzido por um designer e dessas informações dentro da sua marca, então você consegue produzir rapidamente também.

Então, tendo essas informações, a gente vai pra prática. Então, a gente vai agora paraa página inicial do cloud design.

O site você digita é cloud.ai/design e ele já vai direto aqui para essa interface inicial. Que que a gente tem aqui de novidade?

Nessa primeira página do lado esquerdo, a gente tem primeiro esse prototype que ele serve para você criar estruturas de interface. Tem dois eh comandos que a gente consegue clicar, que é o wireframe e hif delite. O wireframe você consegue usar para criar uma versão mais simples do que você tá prototipando.

E o Hif delit você já consegue criar uma versão mais final, um produto final. Então, se você tá só pensando ainda no que você quer criar, vai primeiro no Wireframe, coloca ali todas eh as suas informações, faz essa versão mais simples para depois ir pro H delit.

Aqui no prototype você consegue criar telas, eh, interface de app e também fluxos de navegação. Logo do lado a gente tem o slide deck. Aqui você consegue criar apresentações, pit, tudo dentro do seu universo e muito rapidamente.

Do outro para drones e seguir para todas as suas criações ou então criar alguma outra coisa que você que não são essas três pré-definidas aqui. Mas por onde que a gente vai começar então a nossa criação? mostrando pro cloud quem você é, quem que é a sua marca para só a partir daí a gente conseguir criar.

Logo aqui do lado, a gente vai clicar em design systems e em create. Ele vai abrir aqui uma tela secundária pra gente passar as nossas informações. Você pode enviar um link do GitHub, você você pode também adicionar arquivos separados direto do seu computador, que é assim que eu vou fazer.

Vou clicar aqui e vou selecionar o arquivo que eu mostrei para vocês. Eu exportei ele em PDF, a imagem que tava dentro daquele arquivo que eu também mostrei para vocês e a fonte, a minha fonte padrão.

Coloca para abrir. Ele já mandou aqui.

E basta a gente clicar aqui em cima do lado direito em continuar a geração. Ele vai abrir essa outra página perguntando se você tem certeza se é isso mesmo que você quer fazer.

E eu te faço essa pergunta também. É certeza que você pegou todos os seus arquivos, tá tudo bonitinho, porque a partir daqui ele vai começar a contar os seus tokens. E sinceramente eu não achei que é barato fazer essas gerações.

Na verdade é o contrário, é bem caro. Então faz tudo muito pensado para você não gerar coisas aleatórias e gastar dinheiro aleatoriamente também. Ele demora aproximadamente 5 minutos para fazer todo esse dataset do sistema com seus eh arquivos, criando quem é essa persona, esse que eles chamam de design system.

Então eu vou clicar em gerar e vou aguardar os 5 minutos. Bom, então depois de 5 minutos, ele vem para essa página onde ele me pede para fazer um review dentro do que ele estudou sobre a minha marca.

Então, a primeira pergunta que ele me faz aqui é sobre o display type. Ele colocou a minha fonte ovética que eu mandei e tá na cor exata que eu enviei. Então eu só venho aqui e clico em looks good.

Boa. E aí ele vai continuar fazendo um monte de perguntas. Se eu achar que não tá dentro dos meus parâmetros que eu enviei ou que eu quero mudar alguma coisa, eu clico aqui e falo que eu preciso alterar alguma coisa.

Mas até agora tá super dentro. Ele tá falando de escala tipográfica, as minhas cores primárias.

Lembrando que ele pegou tudo isso dos documentos que eu enviei aqui. algumas ideias de uso dentro das cores e fontes, espaçamento.

E aí ele começa a criar algumas coisas dentro do que eu mandei. E até agora para mim tá tudo super OK.

Tô dando OK. Mas você pode fazer como lição de casa, ver certinho, vê a fundo se é realmente aquilo e se não for é só clicar em que não tá funcionando e pedir o ajuste. Então, pronto, o meu design system ele tá criado e ele vai ficar salvo sempre aqui na primeira página.

Ele mostra aqui o meu design. E como que a gente consegue usar esse design system?

Agora eu vou fazer um exemplo onde a gente vai montar uma apresentação. Eu vou dar aqui o nome da minha apresentação de colocar meu nome mesmo, Juliana Frug. Vou selecionar o meu sistema.

Se você tiver mais de um, ele vai aparecer aqui também. Vou colocar aqui essa opção como use speaker notes, que é para ele fazer além da apresentação, colocar algumas notas de apresentação para mim embaixo, para não ficar tanto texto na apresentação e deixar mais um texto falado para mim. e vou clicar aqui em cree.

Ele vai entrar nessa outra página que é a página do nosso projeto. Vou descrever aqui o que que eu quero que ele crie.

Mas antes disso, eu vou enviar um texto de um roteiro que eu já tinha pronto aqui e falar para ele transformar esse roteiro numa apresentação. Só pegar e arrastar que ele já vai fazer o upload e vou descrever em português mesmo que eu quero que ele faça.

Faça uma apresentação com o texto enviado. Vou clicar aqui para enviar e ele vai começar a ler todo o documento e revisar. para a partir disso me fazer algumas perguntas antes de criar essa apresentação para mim.

Então aqui ele criou algumas perguntas. Ele pergunta qual que é o uso dessa apresentação?

H, eu vou usar esses slides para ser uma um slide de apoio visual enquanto eu gravo. Ou vai ser uma apresentação como se fosse uma palestra.

Essa faz mais sentido. Se eu quero uma apresentação mais inxuta com 10 ou 14 slides, média ou longa, vamos no menor. Como que é o tom visual que eu quero que ele crie para mim dessa apresentação?

Vamos colocar que eu quero totalmente dentro da Ele colocou aqui notálo, poster publicitário, tudo em caixa alta, que é dentro bem do meu brandbook. Ã, se eu quero speaker note, já tinha colocado que sim, então vou colocar novamente aqui. O estilo dos títulos vão ser frases mais curtas e afirmativas ou eu quero mais detalhado?

Vamos colocar misto. E se eu quero imagens e fotos dentro da apresentação, eu quero, mas como eu acabei não enviando essas imagens, é legal que você já envie desde o começo, ele me deu a opção de deixar o place holder ali para depois eu só alterar esses lugares e colocar as imagens da maneira que eu ache melhor. Então eu vou selecionar isso e ele pergunta se eu quero algumas variações tipo Twix.

Eh, basicamente se você quer ali no momento, você consegue alterar algumas paletas de cores apenas num clique rápido. Eu vou colocar aqui sim pra gente entender como que isso funciona. Se você tiver mais alguma informação, mais alguma coisa que você acha importante colocar, tem mais uma aba aqui para você.

Eu não vou deixar nada, mas você pode até adicionar imagens. Nesse momento, vou clicar em continuar e a partir daí ele vai criar para mim essa apresentação, esse deck de 10 a 14 slides dentro do meu Visual System. Então, a gente tem aqui a nossa apresentação pronta.

Que que ele fez? Ele fez uma página inicial.

Esses daqui do lado direito são os twicks que eu consigo alterar dentro das minhas cores qual que vai ser a minha cor. base de cada slide.

Então, ele colocou vermelho, amarelo, preto, azul ou rosa. Ele faz algumas alterações ali dentro. Eu acho que o amarelo ficou muito cub, ficou não ficou tão legal.

Vamos deixar no azul e vamos ver o resto que ele colocou. E aí, aqui nos speakers note, ele me deu o que eu o que eu preciso falar.

E aí se eu tiver numa apresentação online, isso é legal porque eu consigo sempre estar ali bem fiel ao que eu preciso falar e ninguém precisa saber, não preciso ter totalmente aquilo decorado. Esses speakers notes me dão algumas linhas que me puxam sempre pro assunto. Quanto ao design, eu achei que ele ficou bem dentro dos meus padrões, digamos assim.

Eu não dei tanta informação para ele de como eu queria cada slide, mas ele conseguiu pegar dentro do meu brandbook, colocando o texto sempre em caixa alta, bold saturação bem forte no fundo, contrastando o texto com o background. Ele pegou vários tópicos dentro do meu roteiro e fez alguns insightes dentro dos slides.

Eu achei que a estrutura ficou bem interessante também, principalmente funciona se você não tem tanta habilidade para criar esse tipo de apresentação, habilidade, tempo. Pode ver, a gente fez uma apresentação de 14 slides dentro de apenas um roteiro em 5 minutos. é algo muito prático pro teu dia a dia e eu ainda consigo editar em cima disso, consigo fazer alterações slide por slide.

Que que eu vou fazer para mostrar para vocês uma coisa diferente? Vamos falar que eu quero nesse slide no esse daqui, no slide 7, eu quero que ele faça faça no slide 7. uma animação com o texto.

Não dei tantos detalhes da animação, mas vamos ver o que que ele vai criar para mim para deixar essa essa apresentação mais dinâmica. Cliquei em enviar e ele vai trabalhar em cima disso.

Bom, então tá aqui a minha animação pronta. Ele fez uma animação super simples entrando texto, mas se você fosse fazer isso manualmente, seria muito mais complicado, muito mais difícil e em poucos minutos você consegue fazer isso.

E eu tenho certeza que esse tipo de animação, ela deixa a sua apresentação muito mais rápida e dinâmica e cresce muito ao olho também. Então, eu acho que é um recurso muito válido.

Minha apresentação tá pronta, eu posso exportar a partir daqui, eu posso fazer as edições que eu quero, eu consigo enviar as imagens aonde ele colocou Place Raders para substituir. Eh, e foi tudo muito simples. Eu acho que é um ganho muito grande aí em várias áreas se você precisa criar conteúdo rápido em escala, principalmente.

Vamos então explorar mais alguns recursos dentro do cloud design. Voltando aqui pra minha página inicial, eu tenho em cima alguns exemplos que o cloud já me dá. A gente tem então um exemplo de vídeo animado com texto de partículas de efeito.

Basta eu clicar aqui em usar o prompt que ele já vai pra outra página onde eu consigo usar esse efeito. Mas vamos dar uma olhadinha em tudo.

Eu tenho também uma calculadora que eu consigo criar. uma calculadora com várias opções que eu consigo deixar ela do jeito que eu quiser, mudar a cor, mudar tamanho, mudar o tipo da calculadora. Também basta usar aqui no promptin um card aqui, um texto animado.

Consigo também criar um app onboard. A partir disso, você consegue direcionar também pro seu app, pro quiser, tendo esse template base, uma animação de um globo e aqui outras várias animações. Vamos clicar então e usar esse prompt para ver o que que eu consigo fazer com ele.

Ele vai entrar na mesma página de antes da onde eu tinha criado o a minha apresentação. E em cima desse app, eu vou também subir o meu design system que eu acabei de criar. Então ele tá aqui, Juliana Frug Design System.

Selecionei ele aqui. Ele tá falando para criar um app simples de back sharing.

Pode ser. Vamos continuar com isso. Eu vou mudar só as cores aqui que ele colocou.

Blue e orange, eu vou deixar yellow e vermelho, red, que são as minhas cores principais, e vou clicar para ele criar. Aqui também vale dizer que você pode deixar o seu prompt muito mais rico, dando mais informações do que você quer pro seu app agora ou você consegue também depois ir ajustando e editando. Bom, então tá aqui pronto a interface do meu app.

Ele criou muito dentro de todo o meu brandbook, usou as minhas fontes. Como eu não dei muitas informações do que que era o meu app, ele criou.

Então a dica é sempre deixa certinho o que que é o que que você precisa. você precisa colocar todas as informações para ele não criar algo do zero e inventar algo que não tem nada a ver com a tua marca.

Ele fez aqui então para mim o Pega Bike. Para ser sincero, eu sou ciclista.

Acho que tem um pouco a ver. Ele deu uma pesquisada sobre Juliana Frug no Google.

Ã, eu consigo criar minha conta. E aqui tem a segunda etapa, que é o número do meu telefone. Colocou aqui para mim um pouquinho sobre quem sou eu, quem é meu perfil para pra gente conseguir ter essas informações.

Eu achei que ficou super interessante e o mais importante, ele tá seguindo exatamente todos os padrões lá do design system que eu tinha criado paraa minha marca, né? Então, mais uma vez, pegue todas as informações que você tem da sua marca, faça o seu design system e a partir daí você tem inúmeras maneiras de criar várias coisas. Bom, essa foi a atualização da semana da Antropic e eu acho assim, ela é absurdamente útil para muitas coisas, principalmente para criar em escala.

Eu tenho certeza que eu vou usar no meu dia a dia. O meu único ponto ainda é sobre o valor, porque ele ainda tá bem caro.

Então sempre vou ponderar um pouco antes de fazer uma apresentação lá, por exemplo. Mas eu acho que a partir de hoje, daqui [música] pra frente esse valor tende a baixar.

É, vamos ver quando que isso vai acontecer. Se você gostou desse vídeo, deixa um comentário, começa a seguir a gente, porque toda semana vai ter um vídeo novo no canal.

Beijo.

Gostou do conteudo?

Deixe seu comentario, compartilhe com seus amigos e inscreva-se para receber novos artigos.

Fonte: Assistir vídeo original no YouTube
Baseado na transcrição original do vídeo