Aula 03: Design system e automações

Design system é um conjunto organizado de regras visuais. Ele reúne cores, fontes, espaçamentos e formas de organizar elementos para que documentos e apresentações pareçam pertencer à mesma marca.

O exemplo cria esse conjunto a partir da identidade do site VNP Advogados. A entrada pode ser um manual ou arquivos da marca, mas o percurso recebido usa uma referência de site. O trabalho do aluno é fornecer a fonte correta e depois comparar as regras geradas com essa fonte.

Preparar a fonte visual

Abra https://claude.ai/new no navegador.

Clique em T2S, o nome da organização mostrado no menu da conta.

Criar o design system

Clique em Configurações para acessar as opções do ambiente.

Selecione Design systems. Esse nome em inglês identifica a área em que os padrões visuais são organizados.

Clique em Novo design system para iniciar um novo conjunto de regras.

Clique na opção Upload brand files, pull from design connectors, or describe it. Em português, ela oferece enviar arquivos da marca, obter dados de conectores de design ou descrever a referência desejada.

Alterne para a aba em branco registrada como about:blank enquanto prepara a referência. Uma aba vazia não é uma fonte de identidade visual.

Clique na área indicada na captura para continuar a preparação da solicitação. O texto do documento registra apenas Click here; a imagem preserva a localização, sem nomear um novo controle.

Escreva o pedido de design system no campo de mensagem. O exemplo pede padrões, cores e elementos como logotipos e imagens do site.

Encontrar e informar o site de referência

Em outra aba, use a pesquisa do Google por vnp advogados, como na gravação. A pesquisa serve para localizar o site, não para substituir o endereço da fonte no pedido.

Abra o resultado VNP Advogados e confira se ele corresponde ao escritório da referência.

Retorne à aba do Claude para completar a mensagem.

Cole o endereço do site no pedido de design system. O endereço informa de onde tirar as referências; a frase do pedido explica quais elementos devem ser organizados.

Clique em enviar para submeter a solicitação com o endereço já preenchido.

Ler as regras geradas

Abra o conteúdo do design system gerado para verificar sua organização e comparar os elementos com o material de origem.

Clique em Typography. Tipografia é a escolha e o uso das fontes, incluindo a diferença entre títulos e texto de leitura.

Clique em Spacing. Espaçamento é a distância entre elementos, como o intervalo entre título, parágrafo, cartões e margens.

Clique em Breakpoint. Um breakpoint é um ponto de mudança de layout conforme a largura da tela, útil para adaptar a composição entre computador e celular.

Clique em Fotos para examinar as referências de imagens. Confira se os exemplos visuais pertencem à marca e fazem sentido no uso pretendido.

Crie um design system utilizando padrões, cores e elementos como logotipos, imagens e etc do site:
[cole aqui o endereço do site da marca]

O que verificar antes de reutilizar

Compare o logotipo, a paleta e a tipografia com o site ou manual. Verifique se as margens e os espaços favorecem a leitura e se o texto continua legível sobre as cores escolhidas. Tokens são valores com nomes reutilizáveis, como uma cor principal ou um espaçamento; componentes são peças visuais recorrentes, como cartões e botões. Esse conjunto transforma observações da marca em regras que você pode pedir novamente.

Criar o design system define as regras; utilizá-lo significa pedir que uma entrega concreta siga essas regras. O roteiro abre uma nova sessão e orienta a solicitar uma apresentação com o design system VNPA. As capturas também mostram uma variação em elaboração: um pedido que começa com Crie um documento de uma petição. Os dois exemplos ajudam a distinguir a regra visual do tipo de documento solicitado.

Não é preciso redizer todas as cores em cada solicitação. É preciso identificar o sistema desejado e explicar o conteúdo e o formato da entrega. A revisão deve verificar se o padrão foi realmente aplicado, não apenas mencionado na resposta.

Abra https://claude.ai/new para iniciar a solicitação.

Escreva o pedido de apresentação e identifique o design system VNPA que deverá orientar a entrega. As capturas seguintes mostram a sequência de composição do pedido, por isso leia a solicitação inteira antes de enviá-la.

Reconhecer a aplicação do sistema visual

Ao revisar a apresentação, compare a hierarquia dos títulos, o uso do logotipo, as fontes, as cores e os espaços entre elementos com o design system. Uma entrega pode ter o conteúdo correto e ainda fugir da identidade visual. Nessa situação, indique qual regra e qual trecho precisam de ajuste, em vez de pedir apenas que fique mais bonito.

As quatro imagens após o pedido preservam a progressão da demonstração. O documento não descreve uma sequência adicional de criação de projeto ou configuração organizacional; essas ações são tratadas em outros tópicos.

Compartilhar um design system define quem pode acessá-lo. Defini-lo como padrão indica qual conjunto de regras deve ser a referência inicial da organização. São duas decisões diferentes, demonstradas em sequência neste roteiro.

T2S é o nome da organização usada na gravação. Faça essa alteração no ambiente que administra e somente para o sistema visual que deve orientar as entregas da equipe.

Abra https://claude.ai/new no navegador.

Localizar o padrão visual da organização

Clique em T2S no menu da conta para identificar o ambiente utilizado no exemplo.

Clique em Configurações.

Selecione Design systems para acessar os conjuntos de regras visuais.

Na área Design systems, localize o sistema que será compartilhado e adotado. Confira se é o conjunto da marca certa, e não um teste ainda em elaboração.

Permitir acesso à equipe

Clique em Compartilhar no local indicado pela captura.

Abra o design system VNP Advogados para examinar sua configuração de acesso.

Selecione Qualquer pessoa em T2S. O alcance registrado é a organização T2S, não qualquer pessoa na internet.

Clique em Compartilhar para aplicar a escolha de acesso mostrada no exemplo.

Retorne às configurações de Design systems para realizar a outra parte do procedimento: a escolha do padrão.

Definir e reconhecer o padrão

Clique em Definir como padrão no sistema escolhido. Faça isso depois de revisar suas regras, pois a escolha passa a orientar o padrão do ambiente mostrado.

Observe a indicação Padrão. Ela permite reconhecer qual sistema recebeu essa configuração sem confundir a marcação com o botão Compartilhar.

Padrão não é publicação pública

A opção Qualquer pessoa em T2S e a marcação Padrão cumprem finalidades separadas. A primeira amplia acesso dentro da organização. A segunda escolhe a referência visual do ambiente registrado. Depois da configuração, confira a indicação Padrão no sistema pretendido e use uma solicitação como a do tópico 03.2 para revisar a aplicação em uma entrega.

Uma tarefa agendada é uma instrução associada a um momento ou a uma repetição. Frequência responde quantas vezes ela deve ocorrer; horário responde quando. Uma descrição como “todo dia” ainda precisa do horário e do fuso para evitar ambiguidades.

O percurso na web começa pela limpeza de um Resumo diário de demonstração e depois abre a criação assistida de uma tarefa. O último registro mostra a resposta do Claude, não uma comprovação de que uma execução futura aconteceu.

Abra https://claude.ai/new no navegador.

Examinar e remover uma tarefa de demonstração

Clique em Agendados para acessar a lista de tarefas.

Abra o item com a descrição O que precisa da sua atenção hoje no calendário, no e-mail e nas mensagens. Essa descrição ajuda a identificar o objetivo do resumo existente.

Clique em Resumo diário para abrir a tarefa correspondente.

Clique em Apagar para iniciar a exclusão dessa tarefa. Use esse procedimento apenas no resumo de demonstração ou em uma tarefa que decidiu descontinuar.

Clique novamente em Apagar na confirmação. O segundo clique conclui a exclusão registrada no roteiro.

Volte a Agendados para rever a lista.

Clique com o botão direito em Resumo semanal, conforme a gravação. Esse gesto abre um menu de contexto, mas o documento não registra a escolha de uma opção desse menu.

Iniciar uma tarefa nova

Clique em Nova tarefa para abrir a criação de um novo agendamento.

Selecione Criar com o Claude. Nessa modalidade, o assistente ajuda a transformar a intenção em uma configuração de tarefa.

Pedir as perguntas de configuração

Selecione o texto que pede ajuda para configurar uma tarefa agendada. Ele solicita perguntas sobre o que fazer, a frequência e o momento de execução antes da criação.

Clique no botão de enviar para iniciar essa conversa de configuração.

Clique no controle da resposta indicado na última captura e leia o retorno. O documento não nomeia esse controle nem registra uma tarefa final já executada; o resultado observado é a continuação da configuração assistida.

Ajude-me a configurar uma tarefa agendada. Pergunte-me o que ela deve fazer, com que frequência deve ser executada e quando, depois crie-a.

Transformar as perguntas em uma tarefa clara

Ao continuar a conversa, descreva a ação e a fonte que deverá ser consultada. Em um resumo, informe quais informações entram e como organizar o resultado. Para a frequência, diferencie dias úteis, todos os dias e uma execução única. Para o momento, informe horário e fuso. Confira os parâmetros apresentados antes de considerar a tarefa configurada; o envio do pedido inicial é apenas o começo.

A extensão Claude for Chrome conecta o assistente ao navegador. Uma extensão é um complemento do Chrome; autorizar a conexão vincula esse complemento à conta Claude. Instalar a extensão e enviar um pedido são etapas separadas.

A gravação parte do menu da conta RicardoT2S, autoriza a extensão e termina com uma solicitação ligada a mensagens no LinkedIn. T2S identifica a organização da conta no exemplo, não o nome da extensão.

Abra https://claude.ai/new no navegador Chrome.

Instalar e conectar a extensão

Clique na conta mostrada como RicardoT2S para abrir o menu do usuário.

Selecione Obter apps e extensões. É a entrada do roteiro para localizar o complemento do navegador.

Clique em Instalar na opção da extensão apresentada. Observe a tela correspondente antes de continuar a autorização.

Clique em Autorizar para conectar Claude for Chrome à conta Claude. Essa etapa estabelece o vínculo da extensão com a conta usada no exemplo.

Clique na seta de voltar para retornar a Apps e extensões depois da autorização.

Preparar a solicitação de trabalho no LinkedIn

Clique no campo de mensagem do Claude. Esse campo recebe instruções para o assistente, não é o campo de envio de uma conversa do LinkedIn.

Digite e envie o pedido de trabalho com mensagens do LinkedIn mostrado no roteiro. Identifique a conta e a conversa pretendidas ao formular sua solicitação; a sequência deste documento termina nessa entrada de pedido e não comprova um envio concluído aos contatos.

Envie a mensagem "Olá" à T2S no LinkedIn.

Separar preparação de envio

Em mensagens profissionais, explique primeiro se a tarefa é localizar conversas, resumir conteúdo ou preparar respostas. Antes de autorizar um envio, confira o destinatário e o texto final. Uma instrução de revisão não deve virar autorização implícita para falar em nome do escritório. O tópico seguinte mostra o contexto do LinkedIn e a organização das sessões e abas durante esse trabalho.

O título original foi mantido. Em português, o percurso trata da organização de mensagens do LinkedIn e de sessões do Claude no Chrome. Ele mostra um pedido ao Claude para enviar uma mensagem à T2S, o resultado no LinkedIn, a troca entre abas, o desagrupamento de um grupo e a limpeza de mensagens e convites.

Uma aba é uma página aberta no navegador; um grupo reúne várias abas sob um nome. O painel lateral do Claude fica ao lado da página. Nenhuma dessas coisas é a conversa do LinkedIn: observe onde está digitando antes de enviar qualquer texto.

Painel lateral e troca entre abas

Feche o painel lateral mostrado na primeira captura para reorganizar o espaço de trabalho no Chrome.

Clique no item Open Claude, acompanhado da informação Tem acesso a este site. A indicação se refere ao acesso da extensão à página aberta, não a um destinatário de mensagem.

Clique no campo de composição do Claude para localizar onde escrever instruções ao assistente.

Selecione a aba de administração da Company Page T2S Tecnologia no LinkedIn, dentro do grupo Claude mostrado. Company Page é a página de uma organização, diferente do perfil pessoal.

Confira a página empresarial T2S Tecnologia na visualização de usuário. A marca laranja está no conteúdo da página, junto à identificação da empresa, não na barra de abas. Localize o botão Enviar mensagem abaixo da descrição: ele abre a conversa com essa página.

Confira a janela de conversa com T2S Tecnologia aberta sobre a página. O círculo está no corpo dessa janela. Ela reúne o histórico e, abaixo, o campo Escreva uma mensagem do LinkedIn. À direita fica o painel separado do Claude, que mostra Trabalhando nisso.

A sequência registra o pedido ao Claude reproduzido abaixo. Digite essa instrução no compositor do painel lateral Claude for Chrome, não no campo Escreva uma mensagem do LinkedIn. Na imagem 7, a conversa já mostra a mensagem Olá em HOJE, às 11:45, e o Claude ainda está trabalhando. O círculo dessa captura fica no campo do LinkedIn, enquanto o campo de instruções do Claude está à direita.

Envie uma mensagem para a T2S via Linkedin

Complemento de execução. Antes de solicitar o envio no seu ambiente, confira a página destinatária T2S Tecnologia e defina o texto que deseja enviar. Peça ao Claude que apresente o destinatário e o texto para sua conferência antes de enviar. Depois de aprovar o conteúdo, acompanhe a execução e confira a mensagem na conversa do LinkedIn.

Confira o resultado apresentado no painel lateral Claude: ele relata que a mensagem foi enviada para a página T2S Tecnologia e reproduz Olá! Gostaria de saber mais sobre os serviços que vocês oferecem. A conversa do LinkedIn também exibe esse texto. O círculo laranja da imagem 8 aponta para o compositor do Claude, com o placeholder Escreva uma mensagem..., à direita, para uma próxima instrução ao assistente.

Selecione a aba identificada como (8) LinkedIn para retornar ao contexto mostrado na gravação.

Abra o menu de contexto do grupo de abas. Menu de contexto é o menu que aparece ao clicar com o botão direito sobre o item.

Escolha Desagrupar. Isso retira as abas daquele agrupamento; não apaga as conversas nem transforma as páginas em novas sessões do Claude.

Abra uma nova aba no navegador.

Clique na barra de endereços dessa nova aba, onde se digita o endereço de uma página ou uma pesquisa.

Observe o aviso Uso elevado da memória em T2S Tecnologia: Publicações | LinkedIn: 882 MB. O valor pertence à aba naquele registro; aqui memória é o consumo do navegador, não a memória de perfil ensinada na Aula 02.

Excluir uma mensagem específica

Abra Mensagens do LinkedIn para localizar a conversa que deseja revisar.

Abra a conversa mostrada na captura e confira o conteúdo antes de selecionar uma mensagem.

Abra o menu de opções da mensagem que será excluída. O alvo desta ação é a mensagem selecionada, não toda a conta do LinkedIn.

Clique em Excluir para essa mensagem, como no exemplo. Use a exclusão apenas quando ela fizer parte da limpeza que você decidiu realizar.

Revisar notificações e convites

Abra as notificações do LinkedIn para examinar os avisos.

Clique em Voltar para retornar à área anterior.

Abra as atualizações de rede do LinkedIn e localize os convites de conexão exibidos.

Ignore o primeiro convite de conexão, conforme a demonstração. Ignorar um convite é uma decisão sobre aquela solicitação, não uma regra para todos os contatos.

Ignore o convite restante registrado na sequência, se ele também fizer parte da sua limpeza.

Clique em LinkedIn para voltar ao contexto da rede social mostrado na captura.

Selecione a aba Nova sessão - Claude para retomar o assistente.

Feche a aba do LinkedIn. Fechar a aba organiza o navegador, mas não encerra automaticamente a conta da rede social.

Selecione Nova sessão - Claude para voltar ao campo de trabalho do assistente.

Selecione novamente Nova sessão - Claude, concluindo a sequência de organização de abas apresentada no documento.

Entender o resultado da organização

Desagrupar modifica a apresentação das abas; fechar uma aba remove aquela página da janela; excluir uma mensagem altera um conteúdo da conversa. São efeitos diferentes. Depois da limpeza, confira se permaneceu na conta e na sessão corretas para o próximo trabalho. No fluxo de envio, confira o destinatário e o texto da mensagem na conversa do LinkedIn. A imagem 8 registra tanto a resposta do Claude que relata o envio quanto a mensagem exibida na conversa com T2S Tecnologia.

No aplicativo de desktop, a criação assistida também começa em Agendados. O roteiro mostra como abrir uma nova tarefa, pedir que o Claude faça perguntas de configuração e enviar o pedido.

O comando Ctrl + V apenas cola o conteúdo da área de transferência. Ele não define por si só a frequência da tarefa. Leia o texto colado antes de enviá-lo e depois responda às perguntas de objetivo, repetição e horário.

Clique em Agendados no aplicativo de desktop para abrir a área de tarefas.

Clique em Nova tarefa para começar uma configuração nova.

Selecione Criar com Claude. A captura mostra essa entrada sem o artigo o utilizado na versão web do outro roteiro.

Selecione o pedido de ajuda para configurar uma tarefa agendada. O texto pede que o assistente pergunte o objetivo, a frequência e quando executar, antes de criar.

Pressione Ctrl + V para colar o texto da área de transferência no campo ativo. Confira o conteúdo colado, pois o atalho não garante que seja o pedido pretendido.

Clique em Enviar mensagem para iniciar a configuração assistida. O roteiro termina no envio; a frequência, o horário e a criação final dependem da continuação dessa conversa.

Ajude-me a configurar uma tarefa agendada. Pergunte-me o que ela deve fazer, com que frequência deve ser executada e quando, depois crie-a.

Preparar o computador para o momento da execução

O registro de Sistema no tópico 03.8 mostra Manter computador ativo e explica que essa opção impede a suspensão por inatividade enquanto o Claude estiver aberto para executar tarefas agendadas. A mesma tela informa que fechar a tampa do laptop ainda pode colocá-lo em suspensão. Considere o estado do aplicativo e do computador ao revisar seu agendamento de desktop, além do texto da tarefa.

O título expressa a limitação encontrada na gravação. Na tela de Sistema do aplicativo, o controle Ativar uso do computador está indisponível e a mensagem exibida é: “O uso do computador ainda não está disponível nos planos Team e Enterprise.” Esse é o motivo informado pela interface registrada no material.

Uso do computador, nesse controle, significa permitir que o Claude controle tela, mouse e teclado nos aplicativos autorizados. Não é sinônimo de usar uma extensão no Chrome nem de simplesmente criar uma tarefa agendada.

Clique no nome da conta para abrir o menu do aplicativo de desktop.

Clique em Barra lateral, conforme o registro da segunda captura, para alcançar a navegação de configurações mostrada no aplicativo.

Selecione Sistema para localizar as preferências relacionadas ao funcionamento do aplicativo neste computador.

Abra as configurações de Sistema e examine a área Uso do computador, identificada como Beta. Na captura, Ativar uso do computador aparece desabilitado e o aviso explica a indisponibilidade nos planos Team e Enterprise naquela interface.

Plano da conta e local de execução

A mensagem da interface associa a indisponibilidade desse controle aos planos Team e Enterprise. A mesma área informa que o uso do computador também não está disponível em sessões do Code na nuvem, pois elas não são executadas no computador local.

Navegador e computador são permissões diferentes

A tela apresenta uma área Uso do navegador, com links no navegador integrado e sites permitidos, e uma área Uso do computador, ligada à tela, ao mouse e ao teclado. Portanto, o aviso do segundo controle não prova que toda automação no Chrome ou todo agendamento esteja bloqueado. Para entender sua conta, abra Sistema e leia a mensagem exibida no controle específico que pretende usar.