00:00:00Paper, talvez uma das ferramentas de design mais quentes do momento para designers nativos em IA,
00:00:05fluxos de trabalho agênticos de IA.
00:00:06E ele permite que você desenhe aqui em uma tela e exporte para código,
00:00:11mas também faça o oposto.
00:00:13Portanto, é um fluxo de trabalho completo e bidirecional.
00:00:15Vou mostrar como usá-lo e como instalá-lo.
00:00:17E também, isso faz parte da minha série de 30 dias de design nativo em IA,
00:00:22onde você é desafiado a pegar este design bem aqui,
00:00:25no qual trabalhamos no desafio anterior,
00:00:27e usar o Paper para integrar e completar esta seção do design.
00:00:32Então, antes de chegarmos a esse desafio e como você realmente participa,
00:00:36deixe-me mostrar como instalar o Paper de fato.
00:00:38Aqui em paper.design, vá para a seção de Documentação.
00:00:41E a primeira coisa que você deve fazer é baixar o aplicativo de desktop do Paper, certo?
00:00:46Apenas um aplicativo simples e rápido.
00:00:48Depois, você está usando o Cursor?
00:00:50Está usando o Claude Code?
00:00:51Está usando Codex, Copilot, o que quer que seja?
00:00:54Eu, pessoalmente, uso o Claude Code.
00:00:55É extremamente fácil de instalar.
00:00:57Basta pegar esta linha aqui depois de digitar Claude
00:01:00e colocá-lo para rodar no seu terminal,
00:01:03colar e ele será instalado.
00:01:05E você saberá que funciona se digitar este comando, /mcp,
00:01:10e verá o Paper bem ali.
00:01:13Você também pode ver o Pencil, que cobriremos em um futuro próximo.
00:01:17Ok, então este é o aplicativo Paper, certo?
00:01:19Você precisa deixá-lo aberto.
00:01:21E então, obviamente, abra o Cursor ou Claude Code,
00:01:24e tenha o MCP conectado.
00:01:26Então, qual é o próximo passo?
00:01:27Bem, você pode usar o Paper de várias maneiras diferentes.
00:01:31Você pode começar um design aqui usando a ferramenta de moldura,
00:01:35criando o seu layout.
00:01:37Eles têm uma área familiar aqui.
00:01:39Então, se você já entende o Auto Layout do Figma,
00:01:41entenderá como estruturar layouts do zero aqui manualmente, se quiser.
00:01:46Não vamos seguir essa abordagem.
00:01:48Basicamente, vamos pedir ao Claude ou ao que quer que seja,
00:01:52se estiver usando o Cursor ou algo assim,
00:01:53vamos pedir para usar o servidor MCP do Paper,
00:01:58e projetar um layout para nós.
00:02:00E então vamos elevar o design
00:02:02e fazer mudanças personalizadas nele aqui no Paper,
00:02:05e depois exportá-lo de volta.
00:02:06Então, agora vamos pedir para ele criar um layout
00:02:09para algum tipo de negócio fictício.
00:02:10Agora, antes de fazer isso, eu queria fazer um experimento rápido no coolers.co.
00:02:14Isso já existe há uma eternidade.
00:02:16Mas se você clicar em Iniciar o Gerador,
00:02:18e apertar a barra de espaço,
00:02:20você pode encontrar temas diferentes,
00:02:22ou melhor, o próprio aplicativo faz isso.
00:02:24E então você mesmo pode personalizar as cores, se quiser.
00:02:28No meu caso, vou continuar apertando,
00:02:31ok, este parece interessante.
00:02:32É um esquema de cores mais claras.
00:02:33É meio colorido, etc.
00:02:36O que eu vou fazer é apenas tirar um print da tela.
00:02:39E ele tem os códigos de cores na parte inferior,
00:02:41que podemos colar no Claude Code ou no que você estiver usando como contexto.
00:02:46E vamos pedir para ele usar essas cores para criar um layout
00:02:51quando ele criar um layout para algum tipo de negócio fictício.
00:02:53Para o prompt, vou usar a habilidade de design front-end aqui no Claude Code.
00:02:59Geralmente produz resultados melhores.
00:03:01Mas se você não for muito específico,
00:03:04ele costuma produzir um resultado bem genérico.
00:03:08Então, veremos o que ele cria,
00:03:10e depois vamos elevar esse design no Paper.
00:03:12A primeira coisa que farei é colocar barra front-end design,
00:03:15como você pode ver aqui.
00:03:17Acredito que ele já venha com o Claude Code automaticamente agora,
00:03:19mas se não, há um vídeo que vou linkar na descrição
00:03:22que mostra como integrar isso como uma habilidade.
00:03:25Agora, barra front-end design.
00:03:28Agora, vou especificar o prompt.
00:03:29Aqui está um prompt bem curto.
00:03:32Use o servidor MCP do Paper.
00:03:34É muito importante solicitar isso.
00:03:36Para projetar um layout SaaS moderno para um negócio fictício
00:03:39que utiliza tecnologia de IA para garantia de qualidade na fabricação de produtos.
00:03:43Parece chato.
00:03:43Deve ser projetado para desktop e ter uma barra de navegação e uma seção hero.
00:03:47E só.
00:03:47Quero que você use o esquema de cores.
00:03:49Os valores hexadecimais são mostrados na parte inferior de cada cor anexada no print,
00:03:53que está bem aqui.
00:03:54Agora, você não precisa usar todas as cores.
00:03:56Apenas garanta o contraste adequado e que o visual fique bom.
00:03:59É isso.
00:04:00Vou apertar enter,
00:04:02e começaremos a vê-lo gerar informações sobre o acesso ao servidor MCP do Paper,
00:04:07e podemos carregar o Paper e ver o que está acontecendo em tempo real.
00:04:11Infelizmente, há um problema no Windows 11 especificamente com o meu computador,
00:04:15onde ele fica piscando assim.
00:04:16Já entrei em contato com o fundador,
00:04:18falei sobre isso, você provavelmente não terá esse problema.
00:04:21Ok, e foi isso que ele criou.
00:04:23Na minha opinião, está bem mediano,
00:04:25e você consegue perceber nitidamente que,
00:04:27"Ei, a IA gerou isso na maior parte."
00:04:30Então, vamos usar o Paper para fazer ajustes visualmente neste design,
00:04:34e depois exportá-lo de volta.
00:04:36Então, o que eu vou fazer?
00:04:37Primeira coisa, quero aumentar isso só um pouco.
00:04:39Ok, nos dar um pouco de espaço em branco aqui.
00:04:42E o próximo passo, ok,
00:04:45você tem que se familiarizar para entender as camadas aqui.
00:04:48Nesta seção, você pode ver estas camadas aqui,
00:04:51e vemos que temos uma seção hero com duas colunas dentro dela, esquerda e direita.
00:04:56Eu não quero aquela.
00:04:57Eu só quero ter uma área que seja assim,
00:05:01que seja apenas uma seção de coluna centralizada,
00:05:05e vamos ter uma seção interessante atrás dela.
00:05:08Mas primeiro, certo, queremos pegar isso,
00:05:11e vamos centralizar todo o texto,
00:05:15e também aumentar a largura disso.
00:05:17Aqui em cima, vemos que a largura está definida como automática.
00:05:20Agora, também podemos ter uma largura fixa,
00:05:23podemos fazer com que preencha o contêiner,
00:05:25ou que se ajuste ao conteúdo.
00:05:26Então, o ajuste ao conteúdo é a mesma coisa.
00:05:28Preencher o contêiner.
00:05:29Ok, então ele vai preencher este espaço disponível aqui,
00:05:33e então eu vou pegar isto,
00:05:36e bem aqui,
00:05:38podemos ver que já está configurado como um contêiner flexbox com um espaçamento de 32 entre os elementos.
00:05:44Então, se ajustarmos isso,
00:05:46você verá como tudo meio que se espalha.
00:05:48E eu quero garantir que tudo esteja centralizado naquele espaço.
00:05:53Agora, nem tudo está funcionando perfeitamente ainda,
00:05:55porque temos que fazer outros ajustes.
00:05:57Então, se as coisas não estiverem se comportando como você espera, continue inspecionando.
00:06:01Por exemplo, esta área.
00:06:04Vamos centralizar isso.
00:06:06E de novo, estou apenas clicando para centralizar as coisas.
00:06:08Isso é texto, então podemos centralizar esse texto.
00:06:10Ok, está indo bem.
00:06:12Isto aqui, vamos centralizar estas coisas.
00:06:15E depois vou centralizar isto também.
00:06:18Certo, então posso clicar com o botão direito e ir em Frame Selection.
00:06:21Ah, isso funcionou automaticamente.
00:06:24Então, você só precisa estar disposto a experimentar todas essas capacidades do layout.
00:06:30E é a mesma coisa com o Figma.
00:06:31Tipo, você precisa entender como trabalhar com o layout,
00:06:35porque isso tenta ser uma representação do navegador real na tela de design.
00:06:40Pode ser um pouco complicado mover as coisas,
00:06:43se você não tiver certeza de como todas funcionam.
00:06:44Então, dedique um tempo a isso.
00:06:46A seguir, vou tirar um print disso,
00:06:49só para integrar algumas dessas cores de um jeito que eu ache melhor do que o que foi integrado.
00:06:55Porque, repare, ele usou algumas cores, mas não todas.
00:06:58Não que a gente precise necessariamente.
00:07:00Mas eu só quero mostrar o processo de fazer alguns ajustes adicionais aqui.
00:07:05Por exemplo, se quisermos que a seção do cabeçalho tenha uma cor de fundo específica.
00:07:10Vou pegar este preenchimento aqui,
00:07:13e vamos usar aquela primeira cor lá de cima.
00:07:15É FC6471.
00:07:19Ok, ficou feio pra caramba, porque agora o texto ficou estranho, certo?
00:07:23Vou pegar esta área, cores de seleção.
00:07:27Vamos deixar isso branco.
00:07:28Vamos deixar o preto branco também.
00:07:31E, talvez, se quisermos, podemos usar CTRL e clique esquerdo para selecionar,
00:07:35e depois colocar em negrito para este aqui.
00:07:37Ok, spectral AI.
00:07:39Vou deixar isso preto, ou melhor, vou deixar aquela parte preta branca.
00:07:43Isto, eu realmente não gostei do gradiente.
00:07:45Sim, obviamente temos suporte a gradiente aqui.
00:07:48Talvez eu deixe este aqui claro.
00:07:51Isto é apenas algum tipo de logo genérico estranho, o que, sabe, não é grande coisa.
00:07:56Não estou muito preocupado com isso.
00:07:57Vamos mover isso para cá.
00:08:00Ok, e finalmente, aqui, este contraste está terrível.
00:08:04Então, talvez possamos deixar isto branco.
00:08:11Este pode ficar preto, e depois este texto bem aqui vamos deixar claro também.
00:08:20Ok, como vocês podem ver, é muito rápido e fácil fazer ajustes.
00:08:23Agora, digamos, por exemplo, que queiramos pegar este fundo e adicionar algo legal,
00:08:29como algum tipo de efeito de shader.
00:08:30Bem aqui, você clica e pode ver os shaders.
00:08:34Esta é uma das coisas muito legais nesta ferramenta,
00:08:38é que podemos criar shaders muito interessantes e únicos de algum tipo.
00:08:42Como, por exemplo, este anel de fumaça aqui.
00:08:45Certo, vamos tentar esse.
00:08:46Vou clicar nele.
00:08:47Quando você faz isso, ele vai adicioná-lo como apenas mais um elemento no DOM,
00:08:51o Document Object Model.
00:08:53Isso é coisa de desenvolvedor front-end que você talvez nunca tenha ouvido falar.
00:08:57É aqui que ajuda ter um background técnico.
00:09:00Então, o que queremos fazer é colocá-lo com posição absoluta bem ali.
00:09:05Quando você faz isso, ele meio que quebra a convenção do box model, como é chamado.
00:09:09E podemos mover essa coisa para qualquer lugar, embora tenha cuidado,
00:09:11porque se você passar o mouse sobre certas coisas, ele será colocado dentro delas.
00:09:14Bom, queremos colocá-lo e estruturá-lo para que fique no topo, à esquerda e à direita,
00:09:20e preencha toda esta seção hero.
00:09:23Para fazer isso aqui em cima, primeiro, vamos colocar a posição X em zero,
00:09:28e depois a posição Y em zero também.
00:09:31E quanto à largura, vamos deixar 100%, e a altura também em 100%.
00:09:35Agora, quando fazemos isso, escondemos tudo, certo?
00:09:39Infelizmente, por algum motivo, não há um Z-index que eu consiga ver aqui.
00:09:42O Z-index é uma propriedade CSS em elementos com posição absoluta
00:09:47onde você controla a pilha, o fluxo dela.
00:09:50Não o fluxo, mas a ordem.
00:09:52Deveria estar por baixo de tudo isso.
00:09:54E, infelizmente, não vejo isso como uma opção,
00:09:57mas podemos fazer isso depois de importar para o Claude Code e voltar para o código do navegador, HTML e CSS,
00:10:04podemos fazer esse ajuste lá.
00:10:05Mas, por enquanto, podemos ver isso se fizermos os ajustes bem aqui nos parâmetros.
00:10:10Todos os shaders têm seus parâmetros individuais que podem ser alterados bem aqui.
00:10:15Então, você pode mudar a velocidade e todas essas outras coisas.
00:10:18Agora, você pode ver bem aqui, temos um preenchimento que é preto.
00:10:21Se mudarmos isso para 0%, ah, ok, agora podemos ver o que está por trás.
00:10:26Não conseguimos ver muito bem o primeiro plano.
00:10:28Bom, o primeiro plano aqui, vamos pegar essa cor e selecionar nosso anel de fumaça.
00:10:36Vamos mudar o preenchimento para aquela cor.
00:10:39Ou melhor, o primeiro plano para aquela cor.
00:10:43Ah, ok, isso ainda parece ridículo, né?
00:10:46Então, vamos mudar alguns desses outros elementos aqui.
00:10:50Temos escala, temos espessura.
00:10:54Ah, isso é interessante.
00:10:56Temos o raio.
00:10:58Como podem ver, quero dizer, é incrivelmente divertido brincar com isso.
00:11:03Isso aqui até que parece legal.
00:11:04Vou mexer um pouco mais.
00:11:07É, estou satisfeito com isso.
00:11:09Vamos experimentar um shader diferente, no entanto.
00:11:11O que é muito legal aqui é que, se mudarmos qualquer um desses valores para 0% de opacidade,
00:11:18conseguimos ver o que está atrás.
00:11:19Claro, não quero que esse seja o resultado final no navegador.
00:11:23Então, usaremos a propriedade Z-index quando pudermos corrigir isso lá,
00:11:27porque ainda não vejo onde posso ajustar isso aqui.
00:11:30Tudo bem, vou seguir com este
00:11:32e veremos como fica depois de resolvermos o problema do Z-index.
00:11:35Então, acho que vamos usar este aqui mesmo.
00:11:39O que fazemos é selecioná-lo para levar isso,
00:11:43de volta para o Cursor ou, você sabe, Claude Code ou algo assim.
00:11:46E então voltamos para o nosso terminal.
00:11:48Eis o que vou dizer: use o servidor Paper MCP
00:11:50para traduzir o design selecionado no Paper para HTML, CSS,
00:11:53e JavaScript puros em um arquivo index.html.
00:11:56Certifique-se de que tudo seja traduzido perfeitamente.
00:11:58Anexei um print das configurações do shader para garantir que você acerte.
00:12:01Esta parte é importante porque falei com o fundador
00:12:04e, no momento, não está passando todas as informações necessárias,
00:12:08pelo menos nos meus testes iniciais com shaders.
00:12:11Agora, vamos dar enter e ver o que ele faz.
00:12:14Tudo bem, está pronto.
00:12:15Aqui vamos nós.
00:12:16Aqui está.
00:12:17Não é um reflexo 100% perfeito, especialmente o shader
00:12:22que você pode ver ao fundo.
00:12:24O meu parece um pouco diferente.
00:12:28Com linhas fluidas um pouco maiores.
00:12:31E o que você teria que fazer é apenas tirar um print aqui.
00:12:34Certifique-se de printar as configurações de gradiente
00:12:36e as configurações de mesh gradient ou o que quer que use,
00:12:38e tente fazer com que ele melhore iterativamente.
00:12:42Acredito que isso será corrigido muito em breve,
00:12:44conforme eles integrem adequadamente os shaders e,
00:12:47como o MCP lida com a tradução dessas informações.
00:12:51Agora, o que eu quero que você faça é ir para designcourse.com.
00:12:56O link está aqui embaixo para participar do desafio de 30 dias
00:13:01da série Native AI Designers.
00:13:04E eu quero que você use o Paper.
00:13:06Há uma conta 100% gratuita para terminar este design bem aqui.
00:13:11Este é o que trabalhamos anteriormente no último desafio.
00:13:14E nesta seção mais escura que você pode ver aqui,
00:13:17onde diz "seu design aqui",
00:13:18quero que use o Paper seguindo o exato fluxo que acabamos de fazer.
00:13:24Baixe o recurso que está na página do desafio,
00:13:27que contém este HTML que você está vendo,
00:13:30e complete o design abaixo usando o Paper.
00:13:33É a página de desafio aqui no Figma.
00:13:35Você pode usar isso como referência, se desejar.
00:13:38Não é obrigatório usar.
00:13:39Mas aqui estão as instruções.
00:13:40Basta criar uma conta gratuita.
00:13:42Baixe o arquivo index.html na página do desafio.
00:13:45Use o Paper para finalizar o design no espaço vazio desta seção aqui.
00:13:49É aqui que o seu design entra, assim.
00:13:52Você pode desenhar como quiser e escrever o que quiser.
00:13:54Só precisa ser algo harmônico.
00:13:56E você também está livre para fazer o que quiser na próxima seção,
00:13:59podendo integrar animação e interatividade.
00:14:02Se fizer isso, envie uma captura de vídeo para a sua submissão,
00:14:04já que o nosso sistema aceita uploads de vídeo.
00:14:07Estou muito interessado em ver o que vocês vão criar.
00:14:09Farei a análise de cerca de 8 a 10 deles, como tenho feito no desafio,
00:14:13análises em vídeo, e veremos o que vocês inventam.
00:14:16O futuro do design é muito legal.
00:14:18Sabemos que muitas dessas ferramentas que estão saindo agora são fluxos agênticos de IA.
00:14:24Paper é uma delas, Pencil é outra, e acho que veremos muito mais.
00:14:28Então, veremos quem chegará ao topo.
00:14:30Seria o Figma?
00:14:31Não sei.
00:14:32Veremos.
00:14:33Vejo todos vocês em breve.
00:14:34Tchau.