Criar Aplicações com Claude 3.7 Sonnet
Como transformar ideias em aplicações funcionais sem conhecimentos avançados de programação
O universo da inteligência artificial está em constante evolução, e com o lançamento do Claude 3.7 Sonnet, temos em mãos uma poderosa ferramenta para criar aplicações de forma rápida e intuitiva. Neste artigo, vou partilhar as minhas experiências com esta incrível ferramenta.
Primeiros passos com o Claude 3.7 Sonnet
Para começar a explorar o potencial do Claude, o primeiro passo é criar uma conta gratuita. Basta aceder a Claude.ai e escolher se pretende registar-se com a sua conta Google ou com um e-mail padrão. Após o registo, depara-se com um ecrã inicial muito semelhante ao ChatGPT.
Antes de começarmos a criar qualquer aplicação, existe uma configuração importante: ativar os artefactos. Para tal, clique em «Settings» e depois em «Profile», e ative a opção «Enable Artifacts». Esta funcionalidade é fundamental, pois permitirá visualizar as aplicações diretamente através da interface web do Claude.
Criar a sua primeira aplicação: Pomodoro Timer
Comecemos por algo simples, mas extremamente útil: um temporizador Pomodoro personalizável. A beleza deste processo está na simplicidade - basta explicar ao Claude o que pretende, pedindo um design moderno e elegante, e especificando que pretende visualizar a aplicação diretamente através do Claude Artifacts.
Crie uma aplicação que funcionará como um temporizador pomodoro personalizável. O design deve ser moderno e elegante. Crie o código de forma a que eu consiga visualizar a aplicação diretamente através do Claude Artifacts.
Em pouco mais de um minuto, o Claude cria o código completo da aplicação, que pode visualizar clicando no separador «Code» à direita do ecrã. A interface gerada permite iniciar o temporizador, resetá-lo, programar pausas curtas e longas, além de incluir uma engrenagem de configurações para modificar o tempo do ciclo Pomodoro, o tempo de pausa curta e longa, e até o número de ciclos até à pausa longa.
É interessante notar que, como o prompt era bastante simples e não especificava nada técnico ou preferências de desenvolvimento, o Claude foi diretamente para o React como framework de eleição. Não é surpresa - o React é uma espécie de «queridinho» do momento entre os adeptos da AI para a criação de interfaces. É como aquele amigo que só sabe falar de crossfit... só que com componentes e hooks! Mas não se preocupe, não está preso a isso. Podes perfeitamente pedir ao Claude para usar Angular, Vue, Svelte, ou até mesmo JavaScript puro com HTML na cara dura. Basta especificar no seu prompt inicial, e o Claude vai satisfazer o seu pedido com a tecnologia que preferir.
O que torna esta experiência ainda mais incrível é a possibilidade de partilhar a aplicação. Basta clicar no botão «Publish», depois em «Publicar e copiar link», e já está! Tem um link para a sua aplicação que pode ser partilhado com qualquer pessoa. Ao abrir o link, o utilizador receberá uma mensagem indicando que se trata de um artefacto gerado para um utilizador, e após clicar em «Não mostrar», poderá utilizar a aplicação normalmente.
É importante salientar que esta é apenas a primeira versão da aplicação, que já é bastante funcional. Pode sempre continuar a conversa com o Claude para pedir alterações, modificar cores, temas e adicionar funcionalidades.
Elevando o nível: Criar uma App Kanban
Para quem gosta de organização, uma aplicação Kanban pode ser uma excelente ferramenta. O Claude também dá conta desta mensagem com muita competência.
Crie uma app Kanban, ao estilo Trello. Deverá ser algo visualmente rico, repleto de ícones e detalhes de UI que demonstrem que se trata de uma app meticulosamente planeada, com uma interface lindíssima. O fundo da app deve ser preto e os elementos com os quais o utilizador iterage deve possuir cores vivas com um aspeto néon.
Na primeira versão criada pelo Claude, temos a interface básica do Kanban. No entanto, nas versões iniciais, funcionalidades como arrastar os cartões pelo ecrã ou adicionar novos cartões podem não estar presentes. Nesse caso, precisamos de pedir ao Claude que adicione essas funcionalidades.
Quando trabalhamos com códigos mais complexos como este, podemos enfrentar um pequeno desafio: por utilizar uma conta gratuita, a extensão da conversa é limitada. A solução é simples: copie o código gerado, crie uma nova conversa, cole o conteúdo e peça as alterações pretendidas.
Este processo pode ser repetido para adicionar funcionalidades de forma incremental. Por exemplo, primeiro pedir a funcionalidade de drag and drop, depois a possibilidade de adicionar novos cartões, e assim por diante. Cada nova melhoria torna a aplicação mais completa e funcional.
Dashboard interativo para visualização de dados
Uma das aplicações mais impressionantes do Claude 3.7 Sonnet é a criação de dashboards interactivos para visualização de dados. Imagine que tem uma apresentação para fazer, um trabalho na faculdade, e quer dispor os dados de forma criativa - o Claude é perfeito para isso.
O processo é simples: basta anexar um ficheiro CSV ou Excel contendo os seus dados e pedir ao Claude para criar um dashboard interativo. O resultado é surpreendente - um painel completamente interativo, onde a modificação dos dados altera tanto os números como os gráficos em tempo real.
Crie um dashboard interativo baseado nestes resultados que possa ser visualizado no Claude Artifacts
Para este exemplo utilizei este ficheiro Excel com os resultados das eleições para o parlamento em 2024.
De notar que mesmo em versões anteriores como o Claude 3.5 Sonnet, esta funcionalidade já era bastante impressionante. No entanto, com o 3.7, notámos um aumento significativo da qualidade das respostas geradas, com códigos mais interessantes e visuais mais atrativos.
Convites interativos: Criatividade na comunicação
Outra possibilidade fascinante é a criação de convites interativos. Por exemplo, ao pedir ao Claude para criar um convite para um evento de lançamento de um livro ou festa de aniversário, fornecendo detalhes como a data, a hora e as preferências visuais, pode gerar um convite interativo com elementos como a contagem decrescente, o mapa da localização e o espaço para confirmação de presença.
Crie uma web app que servirá de convite para a comemoração do 21º aniversário da Yes Marketing. A data será 20 de dezembro de 2025. Horário 20h00. A web app deve ser interativa e visualmente impactante, utilizando uma estrutura que remeta para a simplicidade. Insira elementos com os quais os utilizadores possam clicar e interagir. A UI deve ser visualmente rica, com elementos que denotem que a app foi meticulosamente planeada. O fundo da app deve ser branco e os elementos visuais devem ser em tons de azul, pois a identidade visual da empresa são nestes tons. O local do evento será o restaurante O Faroleiro, no Guincho, em Cascais - crie uma secção para mostrar as indicações de localização com o Google Maps. A app deverá ser possível de ser visualizada no Claude Artifacts.
Mesmo que o resultado inicial não seja exatamente o que tinha em mente (geralmente por falta de especificações claras no prompt inicial), os elementos interativos funcionam perfeitamente, e pode sempre pedir ajustes posteriores. Tal como nos outros exemplos, este convite pode ser publicado e partilhado através de um link.
Jogos em 3D: Diversão e possibilidades
Para demonstrar a versatilidade do Claude, podemos até criar um simples jogo 3D. Com um prompt tão básico como criar um jogo de carros em 3D que seja jogável através do Cloud Artifacts, o Claude gera um pequeno jogo ao estilo Top Gear, onde é possível controlar o carro, acelerar, movimentar-se, e até mesmo «morrer» ao bater.
Embora pareça apenas uma curiosidade, as aplicações práticas são diversas: as empresas podem criar ações de marketing que envolvam minijogos, os professores podem desenvolver jogos educativos para tornar o ensino mais divertido, e os estudantes podem criar quizzes e flashcards para facilitar a aprendizagem.
Landingpages: Da ideia ao protótipo
O Claude destaca-se também na criação de sites e landing pages. Com um simples prompt a pedir uma landingpage moderna e a fornecer um código de animação (que pode ser obtido em sites como o prismic.io, o Claude gera uma landingpage completa incorporando a animação solicitada.
Crie uma landingpage moderna, com todos os códigos e bibliotecas contidos num único ficheiro html. Incorpore a animação abaixo no design. Código de exemplo: [COLHE AQUI O CÓDIGO DA ANIMAÇÃO]
É importante referir que, embora seja possível publicar esta landing page diretamente através do Claude, o ideal é utilizar o Claude como ferramenta de prototipagem. Depois de ter o código criado, pode ajustá-lo e hospedá-lo num serviço mais apropriado para sites profissionais.
Claude Code: Uma ferramenta avançada
Para além da interface web do Claude, existe uma ferramenta mais avançada chamada Claude Code, lançada em conjunto com o Claude 3.7 Sonnet. Esta ferramenta necessita de ser instalada no seu computador e permite uma interação mais direta com o código gerado pelo Claude.
Para demonstrar o seu funcionamento, vamos criar um projeto Link Tree de raiz. Primeiro, criamos uma pasta no computador e abrimos um terminal nessa pasta. Após instalar o Claude Code, podemos iniciá-lo escrevendo simplesmente claude no terminal.
Para obter melhores resultados, é recomendável criar um ficheiro README contendo todas as instruções do projeto. Podemos fazer isto usando o Claude normal através do site, explicando o que precisamos e pedindo-lhe que crie o ficheiro README com as instruções necessárias. Estas instruções podem incluir aspetos visuais, referências de design, e até imagens para inspiração.
Vou criar uma landingpage, ao estilo Link Tree, que conterá os links das minhas redes sociais. O fundo da página deve ser branco e o design, de um modo geral, deve ter um aspeto moderno e tecnológico. Todo o projeto será criado por um agente de AI, pelo que, necessito que crie um ficheiro readme.md contendo todas as instruções que o agente terá de ter em conta na criação do projeto.
Após descarregar este ficheiro README e guardá-lo na pasta do projeto, voltamos ao Claude Code e damos o comando /init. Isto faz com que o Claude Code leia os ficheiros da pasta, compreenda o projeto e crie um ficheiro claude.md. De seguida, podemos pedir-lhe que crie o projeto completo, incluindo toda a base de código, dependências e bibliotecas necessárias.
O Claude Code começará a fazer edições, a criar ficheiros e a solicitar confirmações. Passados alguns minutos, teremos um projeto completo e funcional. Por exemplo, no caso do Link Tree, teremos um HTML out-of-the-box, inspirado no design de referência fornecido.
Considerações sobre o custo e as alternativas
É importante referir que a utilização do Claude Code tem um custo associado. Por exemplo, a criação do Link Tree mencionado custou 33 cêntimos de dólar - um valor relativamente baixo por ser um ficheiro HTML simples, mas que pode aumentar significativamente para projetos mais complexos que envolvam linguagens mais elaboradas.
O Claude Code funciona através da API do Claude, onde é necessário colocar créditos para utilizar a ferramenta. Considerando o elevado custo da API para utilizar o Claude 3.7 Sonnet, outras alternativas podem ser mais viáveis economicamente.
Uma dessas alternativas é o Cursor ou Windsurf, que oferece acesso ao Claude 3.7 Sonnet (incluindo a versão «Thinking», que é ainda mais capaz) por 20 dólares por mês. Para além do Claude, o Cursor e o Windsurf dão também acesso a vários outros modelos, como o Deepseek, GPT-4, Mini GPT-4, entre outros.
Instalar o Claude Code
Se mesmo assim quiser testar o Claude Code, a instalação é relativamente simples. Basta aceder à documentação oficial da Anthropic, verificar os requisitos do sistema (no Windows, é necessário instalar o WSL e o Node.js), e seguir as instruções de instalação.
npm install -g @anthropic-ai/claude-code
Após a instalação, será necessário criar uma conta na consola da Anthropic, carregar essa conta com créditos para utilizar a API, e depois poderá utilizar o Cloud Code como demonstrado.
O Claude 3.7 Sonnet representa um avanço significativo na democratização da criação de aplicações. Com uma interface amigável e resultados impressionantes, permite que mesmo pessoas sem conhecimentos avançados de programação possam dar vida às suas ideias. Seja para uso pessoal, educativo ou profissional, as possibilidades são vastas e entusiasmantes. À medida que estas ferramentas continuam a evoluir, assistimos a uma verdadeira revolução na forma como interagimos com a tecnologia e criamos soluções digitais.
E como é óbvio, nós na Yes Marketing já utilizamos praticamente todas estas ferramentas: Cursor, Windsurf, Claude Code e mais o Bolt e Google Code para fazer as mais diversas soluções para os nossos clientes, claro, cada ferramenta utilizada no momento e contexto certo.
