🎯 Objetivo
Construir landing pages y mockups profesionales usando HTML + JavaScript puro + Tailwind CSS (CDN), con ayuda de inteligencia artificial para acelerar el desarrollo.
Definir la idea del negocio o sistema
Lo primero es tener total claridad sobre el tipo de sistema o proyecto que queremos construir.
1. Abre ChatGPT
2. Cuéntale toda la historia, necesidad o problema del sistema que deseas construir.
3. Sé lo más detallado posible: público, funcionalidades, objetivos, casos de uso, roles, ejemplos, etc.
4. Una vez que hayas explicado toda tu idea, agrega el siguiente texto:
En base a lo que te voy a contar sobre el sistema que necesito,
necesito que generes un archivo idea.md con:
- La descripción clara del proyecto
- Los módulos principales
- Los roles necesarios
- Los flujos de usuario
- Los requerimientos funcionales
- Los requerimientos técnicos
- IMPORTANTE: esto es una prueba POC por ende solo tendrá
archivos HTML Y JS puro, no usaremos nada de framework
ni backend, las reglas de estilos las pondré en otro archivo
Crear el archivo idea.md
Copia toda la respuesta que te dio ChatGPT y pégala en un archivo llamado idea.md dentro de tu proyecto.
Este archivo será la base documental del sistema que vas a construir.
Integrar la idea con Cursor + Claude
Abre Cursor y activa el comando para trabajar con Claude. Adjunta o pega:
- • El archivo
idea.mdque generaste - • El archivo
prompt.md(contiene las reglas de estructura y formato)
Indícale a Claude el siguiente mensaje:
Teniendo en cuenta las reglas de estructura y detalle
definidas en prompt.md, y considerando que la idea completa
de mi sistema está definida en idea.md, necesito que generes
la arquitectura, los archivos iniciales y el plan de
desarrollo del proyecto.
📘 Guía del Prompt (prompt.md)
El archivo prompt.md define las reglas de estilo y estructura para que la IA genere código consistente:
🛠️ Stack técnico
- • HTML semántico
- • JavaScript modular (archivo externo)
- • Tailwind CSS (CDN)
- • Sin frameworks, sin backend
🎨 Estilo visual
- • Inspirado en shadcn/ui
- • Tipografía limpia
- • Layouts con padding generoso
- • Bordes suaves y sombras sutiles
📁 Estructura
/proyecto/
├── index.html
├── js/
│ └── main.js
└── assets/
🧱 Secciones típicas
- • Header + navegación
- • Hero moderno
- • Features (3 columnas)
- • Testimonios
- • CTA + Footer
💡 Ejemplo de Idea
Aquí un ejemplo de cómo describir una idea para Medication Reminder:
El sistema será una web app que permite a los usuarios
gestionar sus medicamentos y configurar recordatorios
automáticos para tomar cada dosis en el momento adecuado.
El objetivo principal es mejorar la adherencia al tratamiento,
evitar olvidos y ofrecer seguimiento básico del consumo.
La plataforma estará orientada a:
- Personas que deben tomar medicamentos de forma periódica.
🧰 Herramientas y Librerías Recomendadas
Estas librerías funcionan con HTML/JS puro y se pueden cargar via CDN. Úsalas para potenciar tus mockups:
🎮 Gráficos 3D
Three.js
threejs.org
La librería 3D más popular. Escenas, modelos, animaciones, shaders.
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
Babylon.js
babylonjs.com
Motor 3D potente. Física, VR/AR, materiales PBR avanzados.
<script src="https://cdn.babylonjs.com/babylon.js"></script>
📊 Gráficos y Estadísticas
Chart.js
chartjs.org
Gráficos simples y elegantes. Barras, líneas, tortas, radar.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
ApexCharts
apexcharts.com
Gráficos interactivos modernos. Sparklines, heatmaps, treemaps.
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
✨ Animaciones
GSAP
greensock.com
El estándar de animación web. Timelines, ScrollTrigger.
<script src="https://cdn.jsdelivr.net/npm/gsap"></script>
Anime.js
animejs.com
Animaciones ligeras. CSS, SVG, DOM attributes.
<script src="https://cdn.jsdelivr.net/npm/animejs"></script>
Lottie
lottiefiles.com
Animaciones After Effects en JSON. Iconos animados.
<script src="https://cdn.jsdelivr.net/npm/lottie-web"></script>
🎨 Componentes UI
⚡ Referencia Rápida CDN
Copia y pega estos scripts en tu <head> para empezar rápido:
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js - Gráficos -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Three.js - 3D -->
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<!-- GSAP - Animaciones -->
<script src="https://cdn.jsdelivr.net/npm/gsap"></script>
<!-- AOS - Scroll Animations -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<!-- Swiper - Carruseles -->
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>