Para este Prompt Tuesday #9, combinamos finanças e desenvolvimento web. Em plena época de dividendos, descubra como usar a IA Gemini para codificar instantaneamente um Dashboard moderno em HTML, JavaScript e Tailwind CSS.
Aliar as finanças pessoais e o desenvolvimento web é o cerne do ADN da Linkeum. À medida que entramos na famosa "época de dividendos" (abril, maio, junho), muitos investidores e programadores procuram criar as suas próprias ferramentas de acompanhamento.
Neste teste, o objetivo é usar o Gemini (a IA da Google) para gerar de ponta a ponta o código Front-End de um painel (Dashboard) de dividendos. Impomos-lhe tecnologias simples, universais e sem configurações pesadas: HTML puro, JavaScript nativo (Vanilla JS), a biblioteca Chart.js para o gráfico e Tailwind CSS para o design.
O Prompt
Para que a IA gere um ficheiro diretamente utilizável num navegador, é preciso dar-lhe um papel específico, impor a utilização de links CDN para as bibliotecas e fornecer-lhe o contexto de negócio. Aqui está o prompt exato utilizado:
Act as an expert Front-End Developer. Write a modern, responsive single-page HTML file for a "Dividend Tracking Dashboard" using Tailwind CSS (via CDN) and vanilla JavaScript. Include a chart using Chart.js (via CDN) to visualize monthly dividend income. The UI should have a sleek dark mode aesthetic. Include a main card showing the total yearly dividend goal with a progress bar. Below that, display a neat list or grid of recent dividend payouts using mock data for the following stocks: M6 Metropole, Pepsico, and TotalEnergies. Make the design look premium, similar to high-end fintech apps. Output the complete, functional code so I can copy-paste it directly into an index.html file.
O que o prompt pretendia alcançar
O desafio deste prompt era transformar uma ideia financeira numa interface web visual e instantaneamente testável:
- Definir uma stack tecnológica "Plug & Play": Ao exigir HTML, JS nativo e links CDN para Tailwind e Chart.js, garantimos que obtemos um código que funciona imediatamente com um simples duplo clique no ficheiro, sem precisar de um ambiente de desenvolvimento complexo.
- Integrar Visualização de Dados: O pedido explícito de um gráfico interativo (Chart.js) obriga a IA a escrever a lógica JavaScript necessária para instanciar e configurar o canvas visual dos rendimentos mensais.
- Impor uma direção artística: Os termos "sleek dark mode aesthetic" e "high-end fintech apps" orientam o Gemini para propor um design premium (sombras, gradientes, cores escuras) adaptado às finanças.
- Integrar a lógica de negócio: Incluir uma barra de progresso para um objetivo anual e ações específicas (M6, Pepsico, TotalEnergies) permite ter uma renderização imediatamente relevante para um investidor.
Por que o resultado é interessante
Este resultado demonstra o poder do Gemini como assistente de programação. A IA não se limita a alinhar tags HTML; estrutura corretamente a página, importa inteligentemente scripts externos, escreve a lógica JavaScript do gráfico e aplica as classes utilitárias do Tailwind CSS para um aspeto estético e responsivo.
Para um desenvolvedor ou criador de projetos, isto é uma poupança de tempo enorme. Em vez de passar horas a ler a documentação do Chart.js e Tailwind para estruturar um protótipo, obtém uma base sólida e visual em poucos segundos, que só precisa de ser ligada a dados reais.
