00. Visão Geral
AP05 — Artefatos

Quinta atividade do bloco Como usar AI. Você vai criar um artefato HTML interativo — uma calculadora de ROI para avaliar se vale a pena assinar o Claude para os colaboradores da sua empresa, com a identidade visual da sua empresa aplicada automaticamente.

Ficha técnica

TipoDemonstração + Atividade Prática
Duração10 minutos
Técnica de AIGeração de artefato HTML interativo
FerramentaClaude (Project criado na AP03)
Pré-requisitoIdentidade visual salva no Project (AP04)
Introdução
01. Objetivo de aprendizagem
O que você sai sabendo ao fim desta aula

Criar um artefato HTML interativo que calcula o ROI de assinar o Claude para os colaboradores da sua empresa — usando a identidade visual da sua empresa extraída na atividade prática anterior.

Introdução
02. Conceito — Artefatos
Quando a AI para de entregar texto e entrega ferramenta

Até aqui, o Claude entregou texto: relatórios, briefings, análises. Um artefato é diferente. É uma ferramenta funcional gerada pelo Claude — um HTML que roda no navegador, tem campos para preencher, faz cálculos e mostra resultados visuais. Você não escreve código. Você descreve o que quer e o Claude constrói.

O artefato desta atividade é uma calculadora de ROI: você entra com o número de colaboradores, o custo médio por hora e as horas estimadas de ganho de produtividade — e recebe o retorno financeiro projetado de adotar o Claude na empresa.

O diferencial: o artefato vai usar as cores e fontes da sua empresa que você salvou no Project na atividade anterior. O resultado vai parecer feito pelo time de marketing da sua empresa, não por uma AI genérica.

⚠️ Pré-requisito

Esta atividade usa a identidade visual salva no seu Project na atividade prática 04. Se você não completou aquela atividade, o artefato vai ser gerado com um visual genérico, sem as cores e fontes da sua empresa.

Demonstração
03. O que você vai ver
Calculadora de ROI gerada ao vivo, com a identidade visual aplicada

O professor abre o Project da aula e cola o prompt de demonstração — já com o contexto de logística e a identidade visual da empresa de demonstração salva no Project. O Claude gera o artefato HTML ao vivo, com campos interativos, cálculos automáticos e visual com as cores da empresa.

Em seguida, o professor preenche os campos da calculadora ao vivo com dados fictícios e mostra o resultado: ROI calculado, tempo de payback e economia anual projetada.

Demonstração
04. O que observar
4 sinais visíveis durante a geração do artefato
  • Não é texto, é ferramenta. O Claude não entrega texto explicando como seria a calculadora — ele entrega a calculadora funcionando.
  • Identidade visual automática. As cores e fontes usadas no artefato vêm diretamente da identidade visual salva no Project.
  • Ajustes em linguagem natural. Você pode pedir mudanças sem escrever código: "aumenta o tamanho da fonte", "muda o botão para verde", "adiciona um campo para o custo mensal da ferramenta".
  • Saída pronta para distribuir. O artefato pode ser exportado como HTML e enviado por e-mail ou publicado internamente.
Demonstração
05. Prompt da demonstração
O prompt que o professor cola no Project ao vivo
Prompt — Calculadora de ROI (logística)
Usando a identidade visual da empresa de logística salva neste Project, crie um artefato HTML interativo: uma calculadora de ROI para avaliar se vale a pena assinar o Claude Pro para os colaboradores da empresa. A calculadora deve ter: CAMPOS DE INPUT: - Número de colaboradores que usariam o Claude - Custo médio por hora do colaborador (R$) - Horas estimadas de ganho de produtividade por semana por colaborador - Custo mensal do Claude Pro por usuário (R$ 100) OUTPUTS calculados automaticamente: - Economia mensal em horas (total do time) - Economia mensal em R$ (horas × custo hora × 4,3 semanas) - Custo mensal total do Claude Pro (usuários × R$ 100) - ROI mensal em % - Payback em semanas - Economia acumulada em 12 meses DESIGN: - Usar as cores e fontes da identidade visual salva neste Project - Layout limpo e executivo - Botão "Calcular ROI" em destaque - Resultados em cards com os números em tamanho grande - Responsivo para celular - Texto em português do Brasil Nota de rodapé discreta: "Estimativa baseada em ganho médio de produtividade reportado por empresas que adotaram AI generativa. Resultados reais variam."
Atividade Prática
06. O que você vai fazer
Sua vez — calculadora personalizada para a SUA empresa

Gerar a calculadora de ROI personalizada para a sua empresa, usando a identidade visual e o contexto que você já tem salvo no seu Project.

Atividade Prática
07. Passo a passo
5 passos em ~7 minutos
1
Abra o seu Project. (15 seg)
Acesse claude.ai e abra o Project criado na atividade prática 03. O Project já tem a identidade visual da sua empresa salva como documento — o Claude vai usá-la automaticamente.
2
Cole e rode o prompt. (1 min)
Cole o prompt abaixo no chat do seu Project e envie.
Prompt para colar no Project
Usando a identidade visual da minha empresa salva neste Project, crie um artefato HTML interativo: uma calculadora de ROI para avaliar se vale a pena assinar o Claude Pro para os colaboradores da minha empresa. A calculadora deve ter: CAMPOS DE INPUT: - Número de colaboradores que usariam o Claude - Custo médio por hora do colaborador (R$) - Horas estimadas de ganho de produtividade por semana por colaborador - Custo mensal do Claude Pro por usuário (R$ 100) OUTPUTS calculados automaticamente: - Economia mensal em horas (total do time) - Economia mensal em R$ (horas × custo hora × 4,3 semanas) - Custo mensal total do Claude Pro (usuários × R$ 100) - ROI mensal em % - Payback em semanas - Economia acumulada em 12 meses DESIGN: - Usar as cores e fontes da identidade visual salva neste Project - Layout limpo e executivo - Botão "Calcular ROI" em destaque - Resultados em cards com os números em tamanho grande - Responsivo para celular - Texto em português do Brasil Nota de rodapé discreta: "Estimativa baseada em ganho médio de produtividade reportado por empresas que adotaram AI generativa. Resultados reais variam."
3
Aguarde a geração. (1 a 2 min)
O Claude vai gerar o artefato HTML ao vivo. Você vai ver o resultado aparecendo ao lado do chat.
4
Teste a calculadora. (3 min)
Preencha os campos com dados reais ou estimados da sua empresa e veja o resultado. Verifique se as cores e fontes estão corretas.
5
Ajuste se necessário. (2 min)
Se algum elemento visual não estiver certo, corrija em linguagem natural no chat. Exemplos: "A cor do botão não está correta, use o verde da nossa marca", "Aumenta o tamanho dos números de resultado", "Adiciona o nome da empresa no topo".
Atividade Prática
08. O que você tem ao final desta atividade
Uma calculadora pronta para apresentar ao board

Uma calculadora de ROI funcional, com a identidade visual da sua empresa, pronta para apresentar ao board ou ao time de gestão. Você pode usar essa calculadora para sustentar a decisão de adotar o Claude na empresa com números reais do seu contexto.

Insight

Na próxima atividade você dá o pulo para Skills — pacotes de instruções reutilizáveis que transformam o Claude num especialista permanente em qualquer função do seu trabalho.