🎨 Dashboard completo com 1 prompt no Claude Design
Nível 2 · 🎶 Sereias · ⏱️ ~10 min (mais o tempo de geração) · Pré-requisitos: acesso ao Claude Design (o vídeo não diz qual plano da conta é exigido, então confirme no seu), um design system já criado para o seu negócio e o prompt grande do autor, ou um equivalente que você mesmo escreva (veja "O que ficou de fora")
📌 Pra que serve
O Claude Design é a área de design do Claude. Nele você gera telas, protótipos e mockups. A técnica do vídeo é rodar um único prompt grande em cima de um design system que você já criou. O Claude gera várias telas de um produto (dashboard, organizações, equipe, planos, suporte) com cores, fontes e componentes padronizados. Serve para quem constrói SaaS, app ou site e quer um visual consistente sem montar tela por tela.🛠️ Passo a passo
1. Faça antes o design system do seu negócio. O autor diz que ensinou isso num vídeo de dois dias antes, e este tutorial não cobre essa etapa. O tutorial parte do ponto em que o design system já existe. No vídeo, o sistema se chama "ConverteChat Design System". 2. Tenha o prompt em mãos. O prompt do autor está fixado nos comentários do reel e não aparece no vídeo. Pegue-o lá. Se não conseguir, escreva o seu como descrito em "O que ficou de fora" antes de seguir. 3. Abra o Claude Design. A tela inicial mostra "What should we create?". Embaixo ficam a lista de projetos (Dashboard, Protótipo de telas de autenticação, Landing page) e os tipos de criação: Wireframe, Animation, UI mockups, Résumé e 3D object. 4. Escolha o design system. Clique no seletor de design system, ao lado do "+", e marque o do seu negócio. Na lista aparecem o seu sistema, o padrão da organização ("Org default") e os incluídos (Modernist, Classical, Organic e outros). 5. Selecione "Blank" (template em branco). O autor diz para não usar nenhum templat e. Quem manda no visual é o design system. 6. Cole o prompt grande na caixa de texto. O autor recomenda adaptar o prompt ao seu negócio e o trata como base. O prompt serve para o Claude entender como ele gosta de organizar as telas. 7. Confira o modelo. O quadro mostra "Model: Opus 5" no canto direito. Pela fala, ele também usa uma opção "extra" (esforço máximo, provavelmente). A transcrição está confusa nesse trecho, então confirme na sua interface. 8. Clique na seta laranja de enviar e espere. O Claude cria as telas em tempo real, seguindo o design system. Segundo o autor, "nada sai do padrão", seja site, app web ou app para Play Store e App Store. 9. Revise o resultado. No vídeo saíram: - Uma tela de Organizações, com cards por empresa, usuários, números, conversas e receita. - Um Painel, com gráfico mensal, receita ganha no mês, ranking semanal da equipe, tarefas do dia, fila de atendimento e números conectados. - Um menu lateral com gamificação (barra de XP e nível), equipe e permissões, planos e pagamentos, perfil e suporte interno. 10. Itere conversando. O autor menciona que dá para continuar conversando com a IA. O ponto central, porém, é que um prompt já entrega a base inteira.⚠️ O que ficou de fora
O prompt exato não aparece no vídeo. O autor diz que está fixado nos comentários, e eu não tive acesso a ele. O quadro também não mostra o design system sendo criado. Os detalhes do prompt (quais telas ele pede, a estrutura) são desconhecidos. O vídeo também não informa o plano ou o preço necessários para usar o Claude Design. Se quiser reproduzir sem o prompt original, peça ao Claude um prompt equivalente: descreva seu produto, liste as telas desejadas e mande seguir o design system. O resultado não vai ser idêntico ao do vídeo.💡 Dica: Gaste seu tempo no design system. Quanto melhor ele estiver (cores, tipograf
ia, componentes), mais consistente sai o resultado do prompt. Adapte o prompt de base ao seu negócio, com seus módulos e termos reais, em vez de colar genérico.
🔗 Links e instalação
- Fonte: https://www.instagram.com/reel/DdSfS5FMgkO/
- Claude Design: https://claude.ai/design
- Perfil do autor: https://www.instagram.com/matheusgomes
Não há nada para instalar. Tudo roda pelo navegador, na conta do Claude.