Quarta atividade prática do DELTA BOARD. Você vai criar a identidade visual da sua empresa no Claude Design a partir de prints do site e integrá-la ao seu Project — para que todo artefato gerado pelo seu Assistente Executivo (apresentações, dashboards, relatórios) saia automaticamente com as cores, fontes e estilo da sua marca.
Ficha técnica
| Tipo | Demonstração + Atividade Prática |
| Duração da prática | 10 minutos |
| Bloco | 04 — Como usar AI · Quarta atividade |
| Técnica de AI | Claude Design (extração de Design System a partir de imagens) |
| Ferramenta | Claude Design (claude.ai/design) + Project da AP03 |
| Pré-requisito | Ter completado AP03 e ter o Project “Assistente Executivo” criado |
| Entregável | Arquivo identidade-visual.md salvo como 5º arquivo de contexto no Project da AP03 |
Entregável final: Identidade visual da sua empresa salva no seu Project — para que todo artefato criado pelo seu Assistente Executivo saia com as cores, fontes e estilo da sua marca.
Criar a identidade visual da sua empresa usando o Claude Design e integrá-la ao seu Project criado na AP03 — para que todos os materiais gerados pelo seu Assistente Executivo (artefatos, apresentações, dashboards) saiam automaticamente com as cores, fontes e estilo da sua marca, sem você precisar especificar nada a cada interação.
Toda empresa tem uma identidade visual: cores, fontes, estilo de comunicação. Quando você pede para o Claude criar uma apresentação ou um dashboard sem passar esse contexto, ele inventa uma estética genérica que não representa ninguém.
O Claude Design resolve isso. Você envia prints do site da sua empresa e o Claude analisa as imagens, identifica as cores, a tipografia e o estilo visual, e monta um Design System completo — sem você precisar saber o nome técnico de nada.
O que é um Design System? É um documento que descreve a identidade visual de uma marca em formato técnico:
#1F3331 que reproduzem fielmente as cores da marca em qualquer tela.Designers e desenvolvedores usam Design Systems como referência para manter consistência visual em tudo que produzem. Nesta atividade, você vai gerar o Design System da sua empresa automaticamente — e depois integrá-lo ao seu Assistente Executivo (Project da AP03).
A demonstração a seguir é apenas para ilustração durante a aula expositiva. Você não precisa testar agora — você terá sua própria atividade prática logo depois desta seção.
O professor demonstra o fluxo completo em duas fases:
Fase 01 — Geração no Claude Design
O professor acessa claude.ai/design, tira prints da primeira página de um site exemplo (logística ferroviária) — uma captura de tela para cada dobra do site, até cobrir toda a página inicial de cima a baixo. Em seguida, faz upload de todos os prints e clica em "Continue to generation". O Claude analisa as imagens por ~5 minutos e entrega um Design System completo: paleta de cores com hex, tipografia identificada e UI Kit.
Fase 02 — Integração no Project da AP03
O professor pede ao Claude Design (no chat lateral) para resumir o Design System como texto simples para salvar como arquivo de contexto. Em seguida, salva o resumo como identidade-visual.md e adiciona como o 5º arquivo de contexto do Project criado na AP03. A partir daí, qualquer artefato que o assistente executivo gerar vai respeitar essa identidade visual.
Antes de acessar o Claude Design, capture prints da primeira página completa do site da sua empresa. A regra é simples:
1 print para cada dobra do site, até cobrir toda a primeira página de cima a baixo.
Cada vez que você faz scroll na página, surge uma nova "dobra" (uma nova tela visível). Capture um print de cada uma dessas telas: Print 01 — topo da página inicial (logo, menu, banner principal); Print 02 — primeira dobra após o topo; Print 03 — segunda dobra; e assim por diante até chegar ao rodapé. Geralmente são entre 4 e 8 prints, dependendo do tamanho do site. Quanto mais variedade de elementos visuais o Claude vir (cores de fundo, botões, cards, ícones, tipografia em diferentes tamanhos), melhor o Design System gerado.
O Claude Design não aceita arquivos com acentos, espaços ou caracteres especiais no nome. Antes de fazer o upload, renomeie os arquivos para nomes simples como print01.png, print02.png, print03.png, e assim por diante. No Mac, prints automáticos vêm com nomes como "Captura de Tela 2026-04-22 às 19.59.28.png" — renomeie todos antes de subir.
Você vai gerar o Design System da sua empresa e integrá-lo ao seu Assistente Executivo (Project criado na AP03). Esta atividade tem duas fases:
- Fase 01 — gerar o Design System no Claude Design a partir dos prints do seu site
- Fase 02 — extrair o Design System como arquivo
.mde adicionar como arquivo de contexto no Project da AP03
O Claude Design é uma ferramenta especializada — ela cria o Design System mas não conversa com o seu Project automaticamente. Na Fase 02, você transforma o resultado em um arquivo de contexto que vira parte permanente do seu Assistente Executivo, garantindo que toda a comunicação visual gerada por ele respeite a identidade visual da sua empresa.
Em uma nova aba do navegador, acesse claude.ai/design. Na parte superior da tela, clique na aba Design systems.
Clique no botão Create ao lado de "Create new design system — Teach Claude your brand and product".
Na seção Add fonts, logos and assets, clique em browse para selecionar os prints. Faça upload de todos os prints que você capturou no item 06 (uma captura para cada dobra da primeira página do site). Confirme que os nomes dos arquivos não têm acentos nem espaços.
Depois do upload dos prints, clique em Continue to generation. Na próxima tela, clique em Generate para o Claude começar a processar os prints e gerar o Design System.
O Claude Design vai analisar as imagens e gerar o Design System. O processamento leva cerca de 5 minutos. Aguarde até a tela mostrar o Design System pronto, com paleta de cores, tipografia e UI Kit.
O processamento é mais lento que outras atividades porque envolve análise de imagens. Não feche a aba — espere o resultado aparecer.
Quando o processamento terminar, o Claude apresenta o resultado em duas áreas:
- Painel esquerdo (Chat). O Claude lista o que gerou e aponta limitações. Leia com atenção — se alguma cor ou fonte estiver errada, corrija em linguagem natural diretamente no chat. Exemplo: "A cor principal da nossa marca é verde, não azul."
- Painel direito (Design System). Você vê a paleta de cores com códigos hex, Typography identificada e o UI Kit. Para cada item, clique em Looks good se estiver correto ou Needs work... se precisar de ajuste.
No painel direito, localize a caixa de texto no topo com a mensagem "Your design system is ready, but your feedback will improve it!". Logo abaixo dessa mensagem há um checkbox com a palavra Published ao lado. Clique nesse checkbox para marcar — ele ficará azul quando ativado.
Isso ativa o Design System para todos os projetos que você criar no Claude Design a partir de agora.
O Claude Design não tem botão de exportar. Para extrair o Design System em formato salvável no seu Project, use o chat do painel esquerdo. Use o botão Copiar prompt no bloco abaixo:
No painel esquerdo do Claude Design, localize o campo Describe what you want to create.... Cole o prompt copiado no Passo 08 (Cmd+V no Mac ou Ctrl+V no Windows) e clique em Send.
identidade-visual.mdQuando o Claude Design responder, ele vai entregar um artefato Markdown com o resumo do Design System. Localize o artefato e clique em Download identidade-visual.md. O arquivo será salvo no seu computador.
identidade-visual.md" — salva o arquivo no seu computador (geralmente vai para a pasta Downloads)Volte para o seu Assistente Executivo (Project criado na AP03). Na seção Arquivos do Project, clique no ícone + e selecione Carregar do aparelho. Faça upload do arquivo identidade-visual.md que você acabou de baixar.
identidade-visual.md baixado no Passo 10
.md — identidade-visual.md ao lado do mapeamento-ai-kaifulee.md e inteligencia-competitiva.md da AP03; agora o Assistente Executivo tem 5 elementos de contextoAbra um novo chat dentro do Project e use o prompt abaixo para validar que o Assistente Executivo agora respeita a identidade visual da sua empresa:
identidade-visual.md
Você sai desta atividade com:
identidade-visual.md salvo como arquivo de contexto no seu Project da AP03..md (mapeamento Kai-Fu Lee, inteligência competitiva, identidade visual).A partir daqui, sempre que você pedir ao seu Assistente Executivo para criar um relatório, dashboard, apresentação ou qualquer artefato visual, ele vai automaticamente aplicar as cores e fontes da sua empresa. Você não precisa mais especificar isso a cada interação — está no contexto permanente do Project.