EXPLORA
RECURSOS
Materiales y Referencias
Explora ejemplos prácticos generados con Vibe Coding y compara cómo diferentes IAs interpretan el mismo prompt.
Prompt (Ruleta Matemática)
🎡 Ejemplo 1: Ruleta de Preguntas Matemáticas 📝 Prompt en lenguaje natural Actúa como un desarrollador web experto en educación K-12. Soy maestro/a de 4to grado y necesito una actividad digital para practicar tablas de multiplicar (del 2 al 9) con mis estudiantes de 9-10 años en tablets del salón. Crea una RULETA INTERACTIVA que al hacer clic gire con animación, se detenga en una multiplicación al azar, y muestre un campo de texto para que el estudiante escriba la respuesta. Si acierta, muestra el mensaje "¡Excelente!" con confeti. Si falla, muestra la respuesta correcta. Lleva un puntaje de aciertos. RESTRICCIONES TÉCNICAS: ## Restricciones técnicas estándar Archivo único: genera UN (1) solo bloque de código en HTML. CSS incrustado dentro de la etiqueta <style>. JavaScript incrustado dentro de la etiqueta <script>. Cero dependencias: sin React, Bootstrap, Tailwind, bases de datos, CDNs ni APIs externas. Debe ser responsive y adaptarse a celulares, tablets, computadoras del salón y pizarra interactiva digital. Debe funcionar correctamente al embeberse y ocupar 100% del ancho y alto disponibles del contenedor, usar unidades fluidas (%, vh, vw, clamp, min/max), evitar tamaños fijos rígidos y no depender de scroll interno para ver partes esenciales. La interfaz completa debe quedar visible sin cortar contenido ni ocultar botones principales; si el espacio es pequeño, debe reorganizarse, compactarse o escalarse de forma responsive en lugar de crear barras de scroll internas. Diseño de interfaz UX moderno, colorido, atractivo y de baja carga cognitiva. Sin explicaciones largas: solo el código listo para copiar y pegar, seguido de 2 líneas sobre cómo probarlo.
Previsualización
Abrir ↗
Prompt (Juego de Memoria)
🃏 Ejemplo 2: Juego de Memoria de Vocabulario 📝 Prompt en lenguaje natural Actúa como un desarrollador web experto en educación K-12. Soy maestro/a de 2do grado y necesito una actividad para que mis estudiantes de 7-8 años practiquen vocabulario inglés-español sobre animales (8 palabras). La usarán en celulares y tablets. Crea un JUEGO DE MEMORIA (matching pairs) con 16 cartas (8 pares). Cada par une una palabra en inglés con su traducción en español. Las cartas se voltean al hacer clic, y si forman pareja se quedan volteadas. Cuenta los intentos y muestra mensaje de victoria con tiempo total. RESTRICCIONES TÉCNICAS: ## Restricciones técnicas estándar Archivo único: genera UN (1) solo bloque de código en HTML. CSS incrustado dentro de la etiqueta <style>. JavaScript incrustado dentro de la etiqueta <script>. Cero dependencias: sin React, Bootstrap, Tailwind, bases de datos, CDNs ni APIs externas. Debe ser responsive y adaptarse a celulares, tablets, computadoras del salón y pizarra interactiva digital. Debe funcionar correctamente al embeberse y ocupar 100% del ancho y alto disponibles del contenedor, usar unidades fluidas (%, vh, vw, clamp, min/max), evitar tamaños fijos rígidos y no depender de scroll interno para ver partes esenciales. La interfaz completa debe quedar visible sin cortar contenido ni ocultar botones principales; si el espacio es pequeño, debe reorganizarse, compactarse o escalarse de forma responsive en lugar de crear barras de scroll internas. Diseño de interfaz UX moderno, colorido, atractivo y de baja carga cognitiva. Sin explicaciones largas: solo el código listo para copiar y pegar, seguido de 2 líneas sobre cómo probarlo.
Previsualización
Abrir ↗
Prompt (Línea de Tiempo)
📜 Ejemplo 3: Línea de Tiempo Interactiva de Historia 📝 Prompt en lenguaje natural Actúa como un desarrollador web experto en educación K-12. Soy maestro/a de 6to grado de Estudios Sociales y necesito una actividad para que mis estudiantes exploren los principales eventos de la historia de Puerto Rico. La usarán en computadoras y tablets. Crea una LÍNEA DE TIEMPO interactiva vertical con 8 eventos clave. Cada evento debe ser una tarjeta con año, título y al hacer clic, expanda para mostrar una descripción detallada con animación. Incluye iconos y colores diferentes por época. RESTRICCIONES TÉCNICAS: ## Restricciones técnicas estándar Archivo único: genera UN (1) solo bloque de código en HTML. CSS incrustado dentro de la etiqueta <style>. JavaScript incrustado dentro de la etiqueta <script>. Cero dependencias: sin React, Bootstrap, Tailwind, bases de datos, CDNs ni APIs externas. Debe ser responsive y adaptarse a celulares, tablets, computadoras del salón y pizarra interactiva digital. Debe funcionar correctamente al embeberse y ocupar 100% del ancho y alto disponibles del contenedor, usar unidades fluidas (%, vh, vw, clamp, min/max), evitar tamaños fijos rígidos y no depender de scroll interno para ver partes esenciales. La interfaz completa debe quedar visible sin cortar contenido ni ocultar botones principales; si el espacio es pequeño, debe reorganizarse, compactarse o escalarse de forma responsive en lugar de crear barras de scroll internas. Diseño de interfaz UX moderno, colorido, atractivo y de baja carga cognitiva. Sin explicaciones largas: solo el código listo para copiar y pegar, seguido de 2 líneas sobre cómo probarlo.
Previsualización
Abrir ↗
Prompt (Simulador Ecosistema)
🌿 Ejemplo 4: Simulador de Ecosistema 📝 Prompt en lenguaje natural Actúa como un desarrollador web experto en educación K-12. Soy maestro/a de 5to grado de Ciencias y necesito una actividad para enseñar el concepto de ecosistema y cadena alimenticia a estudiantes de 10-11 años. La usarán en tablets. Crea un SIMULADOR VISUAL de un bosque con 3 tipos de seres vivos: plantas, conejos y zorros. El maestro puede ajustar con sliders cuántos hay de cada uno. Al presionar "Simular", muestra una animación de 10 segundos donde la población cambia según la cadena alimenticia, y aparece un gráfico de barras simple con el resultado final. Incluye explicación educativa. RESTRICCIONES TÉCNICAS: ## Restricciones técnicas estándar Archivo único: genera UN (1) solo bloque de código en HTML. CSS incrustado dentro de la etiqueta <style>. JavaScript incrustado dentro de la etiqueta <script>. Cero dependencias: sin React, Bootstrap, Tailwind, bases de datos, CDNs ni APIs externas. Debe ser responsive y adaptarse a celulares, tablets, computadoras del salón y pizarra interactiva digital. Debe funcionar correctamente al embeberse y ocupar 100% del ancho y alto disponibles del contenedor, usar unidades fluidas (%, vh, vw, clamp, min/max), evitar tamaños fijos rígidos y no depender de scroll interno para ver partes esenciales. La interfaz completa debe quedar visible sin cortar contenido ni ocultar botones principales; si el espacio es pequeño, debe reorganizarse, compactarse o escalarse de forma responsive en lugar de crear barras de scroll internas. Diseño de interfaz UX moderno, colorido, atractivo y de baja carga cognitiva. Sin explicaciones largas: solo el código listo para copiar y pegar, seguido de 2 líneas sobre cómo probarlo.
Previsualización
Abrir ↗
Prompt (Generador Quizzes)
📝 Ejemplo 5: Generador de Quizzes Personalizados 📝 Prompt en lenguaje natural Actúa como un desarrollador web experto en educación K-12. Soy maestro/a y necesito una herramienta donde MIS ESTUDIANTES puedan crear sus propios quizzes y compartirlos con sus compañeros. Es para 7mo grado, edad 12-13 años. Crea un GENERADOR DE QUIZZES donde el usuario pueda: 1) Escribir el título del quiz, 2) Agregar preguntas con 4 opciones cada una y marcar cuál es la correcta, 3) Presionar "Crear Quiz" y se genere una versión jugable del quiz creado, 4) Al terminar, muestre el puntaje y porcentaje de aciertos. Que tenga modo "Crear" y modo "Jugar" claramente diferenciados. RESTRICCIONES TÉCNICAS: ## Restricciones técnicas estándar Archivo único: genera UN (1) solo bloque de código en HTML. CSS incrustado dentro de la etiqueta <style>. JavaScript incrustado dentro de la etiqueta <script>. Cero dependencias: sin React, Bootstrap, Tailwind, bases de datos, CDNs ni APIs externas. Debe ser responsive y adaptarse a celulares, tablets, computadoras del salón y pizarra interactiva digital. Debe funcionar correctamente al embeberse y ocupar 100% del ancho y alto disponibles del contenedor, usar unidades fluidas (%, vh, vw, clamp, min/max), evitar tamaños fijos rígidos y no depender de scroll interno para ver partes esenciales. La interfaz completa debe quedar visible sin cortar contenido ni ocultar botones principales; si el espacio es pequeño, debe reorganizarse, compactarse o escalarse de forma responsive en lugar de crear barras de scroll internas. Diseño de interfaz UX moderno, colorido, atractivo y de baja carga cognitiva. Sin explicaciones largas: solo el código listo para copiar y pegar, seguido de 2 líneas sobre cómo probarlo.
Previsualización
Abrir ↗
Prompt (Pareo Conceptos)
🔗 Ejemplo 6: Pareo de Conceptos 📝 Prompt en lenguaje natural Actúa como un desarrollador web experto en educación K-12. Soy maestro/a de 5to grado de Ciencias y necesito una actividad para que mis estudiantes pareen conceptos del Sistema Solar con sus descripciones. Edad: 10-11 años, en tabletas. Crea una actividad de PAREO donde aparezcan dos columnas: a la izquierda los nombres de 6 planetas, y a la derecha 6 descripciones desordenadas. El estudiante debe hacer clic en un planeta y luego en su descripción correcta para emparejarlos. Si acierta, ambos se marcan en verde con animación. Si falla, se marcan en rojo brevemente. Lleva un contador de pares correctos. RESTRICCIONES TÉCNICAS: ## Restricciones técnicas estándar Archivo único: genera UN (1) solo bloque de código en HTML. CSS incrustado dentro de la etiqueta <style>. JavaScript incrustado dentro de la etiqueta <script>. Cero dependencias: sin React, Bootstrap, Tailwind, bases de datos, CDNs ni APIs externas. Debe ser responsive y adaptarse a celulares, tablets, computadoras del salón y pizarra interactiva digital. Debe funcionar correctamente al embeberse y ocupar 100% del ancho y alto disponibles del contenedor, usar unidades fluidas (%, vh, vw, clamp, min/max), evitar tamaños fijos rígidos y no depender de scroll interno para ver partes esenciales. La interfaz completa debe quedar visible sin cortar contenido ni ocultar botones principales; si el espacio es pequeño, debe reorganizarse, compactarse o escalarse de forma responsive en lugar de crear barras de scroll internas. Diseño de interfaz UX moderno, colorido, atractivo y de baja carga cognitiva. Sin explicaciones largas: solo el código listo para copiar y pegar, seguido de 2 líneas sobre cómo probarlo.
Previsualización
Abrir ↗
Prompt (Quiz Opción Múltiple)
✅ Ejemplo 7: Quiz de Opción Múltiple 📝 Prompt en lenguaje natural Actúa como un desarrollador web experto en educación K-12. Soy maestro/a de 6to grado de Ciencias y necesito un quiz para evaluar el tema de los estados de la materia. Edad: 11-12 años. Lo usarán en celulares. Crea un QUIZ DE OPCIÓN MÚLTIPLE con 8 preguntas sobre los estados de la materia, cada una con 4 opciones. Una sola pregunta visible a la vez. Al seleccionar una respuesta, mostrar inmediatamente si es correcta (verde) o incorrecta (roja) con explicación breve. Barra de progreso visible. Al final, mostrar puntaje total, porcentaje, y un mensaje motivacional según el resultado. RESTRICCIONES TÉCNICAS: ## Restricciones técnicas estándar Archivo único: genera UN (1) solo bloque de código en HTML. CSS incrustado dentro de la etiqueta <style>. JavaScript incrustado dentro de la etiqueta <script>. Cero dependencias: sin React, Bootstrap, Tailwind, bases de datos, CDNs ni APIs externas. Debe ser responsive y adaptarse a celulares, tablets, computadoras del salón y pizarra interactiva digital. Debe funcionar correctamente al embeberse y ocupar 100% del ancho y alto disponibles del contenedor, usar unidades fluidas (%, vh, vw, clamp, min/max), evitar tamaños fijos rígidos y no depender de scroll interno para ver partes esenciales. La interfaz completa debe quedar visible sin cortar contenido ni ocultar botones principales; si el espacio es pequeño, debe reorganizarse, compactarse o escalarse de forma responsive en lugar de crear barras de scroll internas. Diseño de interfaz UX moderno, colorido, atractivo y de baja carga cognitiva. Sin explicaciones largas: solo el código listo para copiar y pegar, seguido de 2 líneas sobre cómo probarlo.
Previsualización
Abrir ↗
Prompt (Fracciones)
🔢 Ejemplo 8: Calculadora Visual de Fracciones 📝 Prompt en lenguaje natural Actúa como un desarrollador web experto en educación K-12. Soy maestro/a de 4to grado de Matemáticas y necesito una herramienta visual para enseñar fracciones a estudiantes de 9-10 años. Lo usarán en tablets. Crea una CALCULADORA VISUAL DE FRACCIONES donde el estudiante pueda: 1) Ajustar dos fracciones con sliders, 2) Ver cada fracción representada como un círculo dividido en partes coloreadas (como una pizza), 3) Elegir la operación (+, -, ×, ÷), 4) Ver el resultado numérico y también su representación visual. Que sea muy visual e intuitivo para que entiendan el concepto. RESTRICCIONES TÉCNICAS: ## Restricciones técnicas estándar Archivo único: genera UN (1) solo bloque de código en HTML. CSS incrustado dentro de la etiqueta <style>. JavaScript incrustado dentro de la etiqueta <script>. Cero dependencias: sin React, Bootstrap, Tailwind, bases de datos, CDNs ni APIs externas. Debe ser responsive y adaptarse a celulares, tablets, computadoras del salón y pizarra interactiva digital. Debe funcionar correctamente al embeberse y ocupar 100% del ancho y alto disponibles del contenedor, usar unidades fluidas (%, vh, vw, clamp, min/max), evitar tamaños fijos rígidos y no depender de scroll interno para ver partes esenciales. La interfaz completa debe quedar visible sin cortar contenido ni ocultar botones principales; si el espacio es pequeño, debe reorganizarse, compactarse o escalarse de forma responsive en lugar de crear barras de scroll internas. Diseño de interfaz UX moderno, colorido, atractivo y de baja carga cognitiva. Sin explicaciones largas: solo el código listo para copiar y pegar, seguido de 2 líneas sobre cómo probarlo.
Previsualización
Abrir ↗
Prompt (Arrastrar y Soltar)
🎯 Ejemplo 9: Juego de Arrastrar y Soltar (Clasificar) 📝 Prompt en lenguaje natural Actúa como un desarrollador web experto en educación K-12. Soy maestro/a de 3er grado y necesito una actividad para enseñar clasificación de animales (mamíferos, aves, reptiles) a estudiantes de 8-9 años. La usarán en tablets. Crea un JUEGO DE ARRASTRAR Y SOLTAR donde aparezcan 9 animales (con emoji grande) que el estudiante debe arrastrar a una de tres cajas: 🦁 Mamíferos, 🦅 Aves, 🦎 Reptiles. Si lo coloca correcto se queda allí (en verde). Si falla, regresa a su lugar (en rojo brevemente). Importante: debe funcionar tanto en computadora (mouse) como en tablet/celular (touch). Mostrar contador de animales clasificados correctamente y mensaje al completar. RESTRICCIONES TÉCNICAS: ## Restricciones técnicas estándar Archivo único: genera UN (1) solo bloque de código en HTML. CSS incrustado dentro de la etiqueta <style>. JavaScript incrustado dentro de la etiqueta <script>. Cero dependencias: sin React, Bootstrap, Tailwind, bases de datos, CDNs ni APIs externas. Debe ser responsive y adaptarse a celulares, tablets, computadoras del salón y pizarra interactiva digital. Debe funcionar correctamente al embeberse en plataformas como Google Sites: ocupar 100% del ancho y alto disponibles del contenedor, usar unidades fluidas (%, vh, vw, clamp, min/max), evitar tamaños fijos rígidos y no depender de scroll interno para ver partes esenciales. La interfaz completa debe quedar visible sin cortar contenido ni ocultar botones principales; si el espacio es pequeño, debe reorganizarse, compactarse o escalarse de forma responsive en lugar de crear barras de scroll internas. Diseño de interfaz UX moderno, colorido, atractivo y de baja carga cognitiva. Sin explicaciones largas: solo el código listo para copiar y pegar, seguido de 2 líneas sobre cómo probarlo.
Previsualización
Abrir ↗
Sube tu Recurso Diseñado
¿Por qué recursos diferentes con el mismo prompt?
No existe "un solo Bot" — cada uno tiene su propio modelo entrenado por una empresa diferente. Aunque se utilice el mismo texto (el mismo "código"), hay cuatro razones por las que el resultado siempre va a variar:
- Datos de entrenamiento distintos — Cada empresa entrenó su modelo con conjuntos de datos diferentes. Uno aprendió más ejemplos de cierto estilo de HTML, otro de otro. Eso moldea cómo "piensan" y qué consideran buena solución.
- Aleatoriedad incorporada — Los modelos de lenguaje no calculan una respuesta única; eligen palabras de forma probabilística. Hay un parámetro llamado "temperatura" que controla eso. Resultado: incluso el mismo modelo dará algo ligeramente diferente si se ejecuta dos veces.
- Arquitectura interna diferente — Es como el motor de un carro. Todos llevan al mismo destino, pero el recorrido interno es distinto. Claude, GPT-4o, Gemini y Copilot usan arquitecturas que sus equipos diseñaron de forma independiente.
- System prompt de cada empresa — Antes de que llegue el mensaje del usuario, cada modelo ya recibió instrucciones internas de su empresa: cómo formatear, qué incluir, qué evitar. Eso afecta el resultado aunque el prompt sea idéntico.
Esto es en realidad una ventaja didáctica: la "creatividad" de la IA no es magia, sino el resultado de decisiones técnicas concretas. El mismo prompt puede ser el punto de partida de múltiples versiones, lo cual abre la puerta a iterar y combinar lo mejor de cada una.