00:00:00Vou propor a vocês, junto com centenas de outros designers, um experimento muito legal.
00:00:06Quero ver até onde podemos levar o design com IA, e desta vez é específico para o Claude Code,
00:00:13para produzir uma seção hero baseada em uma mesma ideia de negócio fictícia.
00:00:19Atualmente, está rolando um desafio de design de UI de 30 dias no designcourse.com.
00:00:24É 100% gratuito.
00:00:25Já tivemos um desafio com mais de 200 envios, e este agora é o
00:00:30segundo desafio.
00:00:31Vou mostrar como usar o Claude Code e equipá-lo com uma habilidade especial de design
00:00:37para produzir layouts realmente bons.
00:00:40O objetivo deste desafio é: darei a todos a mesma ideia de negócio fictícia,
00:00:44mas vamos ver quão boas são suas habilidades de prompting para criar a melhor UI
00:00:50possível para essa tarefa.
00:00:52Daqui a pouco, mostrarei exatamente como participar desse desafio hoje.
00:00:56Não importa quando você esteja assistindo, pode ser meses depois disso.
00:00:58Você sempre pode participar deste desafio para ver o que as pessoas estão fazendo.
00:01:01Mas primeiro, vou mostrar como configurar tudo o que você precisa.
00:01:04Primeiro, você obviamente vai precisar do Claude Code, certo?
00:01:07Esta é a página para a configuração.
00:01:10Existem diferentes ambientes.
00:01:11Não vou passar por tudo, então vou apenas deixar o link da página de instalação.
00:01:15Você pode descobrir como instalá-lo se ainda não o fez.
00:01:17E quando estiver pronto, basta digitar “claude” e ele deve carregar
00:01:22bem aqui.
00:01:23Certo.
00:01:24O próximo passo é garantir que você o equipe com uma habilidade especial.
00:01:26Uma habilidade é apenas um conjunto de instruções alimentado no contexto da
00:01:30IA.
00:01:31E há várias habilidades diferentes.
00:01:32Antes de mostrar a habilidade, veja como instalar habilidades no seu sistema.
00:01:37Você precisa encontrar onde está sua pasta do Claude Code baseada no seu SO
00:01:43e no ambiente que você está usando.
00:01:44Então, basta pegar este arquivo markdown, que é uma habilidade, e colocá-lo
00:01:49nessa pasta.
00:01:50A habilidade específica de que estou falando se chama Front End Design, bem aqui.
00:01:55Vou linkar na descrição para que você possa acessá-la.
00:01:58O que você deve fazer é clicar em Skills, Front End Skills, Skill.md e, depois,
00:02:03em Download Raw File, certo?
00:02:06Assim que tiver o arquivo da habilidade, pegue-o e encontre sua pasta do Claude Code
00:02:12naquele caminho que acabei de mostrar.
00:02:14A minha pasta aqui no Windows 11 fica em C:, Usuários, Gary e .claude.
00:02:21Talvez você não tenha uma pasta “skills” lá dentro.
00:02:24Se não tiver, crie-a.
00:02:25Eu já tenho.
00:02:26Clique nela e crie uma pasta chamada “Designer”.
00:02:31E dentro dela, você cola o arquivo da habilidade, o Skill.md.
00:02:35Se você já estiver com o Claude rodando, feche-o primeiro pressionando Ctrl+C
00:02:39algumas vezes.
00:02:41Digite “claude” de novo e digite /skills para listar as habilidades disponíveis.
00:02:47No momento, eu só tenho três.
00:02:48Vemos bem aqui: Front End Design.
00:02:51A forma de acessar esta é usando o comando /frontend-design.
00:02:56Depois, você cola o seu prompt.
00:02:58Vou mostrar isso em ação.
00:03:00Se eu colocar /frontenddesigner e pedir a seção hero de uma landing page para
00:03:06um serviço de verificação de identidade por IA.
00:03:07Deve ter um fundo bege claro com duas colunas, um título forte e um texto
00:03:11à esquerda com uma chamada para ação.
00:03:13E à direita deve haver uma animação de UI fictícia, mas simples, que demonstre
00:03:16a ideia de verificação de identidade, desculpe.
00:03:20Coloque isso em um arquivo HTML com CSS e inclua variáveis.
00:03:23Esse é todo o meu prompt, e foi isso que ele acabou produzindo.
00:03:28Não sei vocês, mas isso está muito sólido, e ele fez de primeira.
00:03:33E vocês viram o prompt.
00:03:35É bem curto.
00:03:36Agora vou mostrar o desafio e a ideia de negócio do prompt que eu quero
00:03:41que vocês usem, e quero ver o que conseguem produzir.
00:03:46A ideia é incrementar com suas próprias preferências de design para criar algo
00:03:51único e até animado, se quiserem.
00:03:53O primeiro passo é acessar [designcourse.com/foundations](https://www.google.com/search?q=https://designcourse.com/foundations) challenge.
00:03:58O link está em algum lugar abaixo.
00:04:00Ao entrar, você verá esta página: 613 alunos e 197 envios
00:04:06para o primeiro desafio que já realizamos.
00:04:08Este é para o segundo desafio.
00:04:09Basta clicar aqui e você verá: baixe o template do Figma de UI/UX de 2026.
00:04:16Lá está o desafio número dois, e é esse que eu quero que usem.
00:04:20A aparência é esta aqui.
00:04:23Este é o desafio número dois, e aqui estão as instruções.
00:04:27Esta é a parte do prompt que eu quero que vocês incluam.
00:04:29Esta é a ideia de negócio fictícia.
00:04:31Não quero que usem nenhuma outra ideia.
00:04:32Quero que todos usem a mesma: um negócio de inspeção residencial com IA.
00:04:37Usa visão computacional para analisar porões, telhados e fundações em busca de defeitos
00:04:42comuns e gera automaticamente relatórios de inspeção padronizados.
00:04:45Nosso objetivo é instruir a IA com este prompt inicial
00:04:50para criar uma seção hero de alto nível com a nossa habilidade de designer do Claude Code.
00:04:56E aqui estão as instruções.
00:04:58Use o Claude Code para gerar uma seção hero para a ideia de negócio fictícia
00:05:03apresentada à direita deste quadro aqui.
00:05:05Certifique-se de colar isso como parte do seu prompt.
00:05:08Inclua a ideia de negócio, mas também suas próprias preferências de design e estilo.
00:05:13Foi assim que eu orientei para tentar criar aquele pequeno card animado
00:05:17que acabamos de ver.
00:05:18Você pode usar quantos prompts quiser para refinar o resultado final.
00:05:22Pode integrar animação se desejar.
00:05:24Ao enviar, primeiro inclua o número de prompts necessários para chegar ao resultado,
00:05:29pois quero que você refine o trabalho se quiser.
00:05:32Também inclua o prompt em si no campo de comentários.
00:05:36Você também pode usar o plugin “Claude code to Figma” para compartilhar um protótipo
00:05:42do design no seu envio, mas não é obrigatório.
00:05:44Uma captura de tela funcionará perfeitamente.
00:05:47O plugin permite que você pegue o resultado final da sua UI e o
00:05:53envie para o Figma.
00:05:54Não vou mostrar como fazer aqui porque postei um vídeo ontem
00:05:58exatamente sobre isso.
00:06:00Novamente, não é obrigatório.
00:06:01Um screenshot basta para a sua submissão.
00:06:04Aqui mostra como enviar a sua entrada.
00:06:09Por exemplo, se você decidir compartilhar um documento do Figma do que está fazendo,
00:06:14o que me permitiria fazer revisões se eu for avaliar o seu trabalho, basta
00:06:18clicar em compartilhar aqui.
00:06:20Copie o link do protótipo, garanta que qualquer um possa visualizar e envie
00:06:25junto com sua submissão.
00:06:26Vai ser um desafio muito legal porque veremos se os resultados
00:06:30serão muito parecidos.
00:06:32Eles serão se você não der muita direção, seu toque criativo
00:06:37nos estilos e como você infunde suas ideias originais.
00:06:40Se você fizer isso, acho que veremos muitas variações e conceitos
00:06:47interessantes sendo produzidos.
00:06:48Então, especifique o esquema de cores e qualquer tipo de ilustração
00:06:53ou animação interessante que queira.
00:06:55O objetivo é tentar maximizar o que a IA pode produzir.
00:06:58Espero ver todos participando deste.
00:07:01É um desafio muito bacana.