Para este Prompt Tuesday #9, combinamos finanzas y desarrollo web. En plena temporada de dividendos, descubre cómo usar la IA Gemini para codificar instantáneamente un Dashboard moderno en HTML, JavaScript y Tailwind CSS.
Combinar las finanzas personales y el desarrollo web es el núcleo del ADN de Linkeum. A medida que entramos en la famosa "temporada de dividendos" (abril, mayo, junio), muchos inversores y desarrolladores buscan crear sus propias herramientas de seguimiento.
En esta prueba, el objetivo es utilizar Gemini (la IA de Google) para generar de principio a fin el código Front-End de un panel (Dashboard) de dividendos. Le imponemos tecnologías simples, universales y sin configuraciones pesadas: HTML puro, JavaScript nativo (Vanilla JS), la librería Chart.js para el gráfico y Tailwind CSS para el diseño.
El Prompt
Para que la IA genere un archivo directamente utilizable en un navegador, es necesario darle un rol específico, imponerle el uso de enlaces CDN para las librerías y proporcionarle el contexto de negocio. Este es el prompt exacto 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.
Qué pretendía lograr el prompt
El desafío de este prompt era transformar una idea financiera en una interfaz web visual e instantáneamente comprobable:
- Definir un stack tecnológico "Plug & Play": Al exigir HTML, JS nativo y enlaces CDN para Tailwind y Chart.js, nos aseguramos de obtener un código que funciona inmediatamente con un simple doble clic en el archivo, sin requerir un entorno de desarrollo complejo.
- Integrar Visualización de Datos: La petición explícita de un gráfico interactivo (Chart.js) obliga a la IA a escribir la lógica JavaScript necesaria para instanciar y configurar el lienzo visual de los ingresos mensuales.
- Imponer una dirección artística: Los términos "sleek dark mode aesthetic" y "high-end fintech apps" guían a Gemini para que proponga un diseño premium (sombras, degradados, colores oscuros) adaptado a las finanzas.
- Integrar lógica de negocio: Incluir una barra de progreso hacia un objetivo anual y acciones específicas (M6, Pepsico, TotalEnergies) permite tener un renderizado inmediatamente relevante para un inversor.
Por qué el resultado es interesante
Este resultado demuestra el poder de Gemini como asistente de programación. La IA no se limita a alinear etiquetas HTML; estructura correctamente la página, importa de manera inteligente los scripts externos, escribe la lógica JavaScript del gráfico y aplica las clases de utilidad de Tailwind CSS para un renderizado estético y responsive.
Para un desarrollador o creador de proyectos, es un ahorro de tiempo masivo. En lugar de pasar horas leyendo la documentación de Chart.js y Tailwind para estructurar una maqueta, obtienes una base sólida y visual en pocos segundos, que solo necesita ser conectada a datos reales.
