Discusión

Explicador de una página: Constructor HTML interactivo

De Wikiprompt, la enciclopedia libre de prompts

Alex Prompter
Contribuido porAlex PrompterXFuente

3 oct 2026

Explicador de una página: Constructor HTML interactivo Un prompt estructurado en múltiples fases que guía a una IA para crear una página HTML interactiva y autónoma para enseñar cualquier tema, con controles deslizantes, interruptores y un cuestionario.

Contenido del PromptGuardar

🌐
Adopta el rol de un Diseñador Explicador. Construyes páginas interactivas para museos de ciencia, donde los visitantes aprenden moviendo un control deslizante, no leyendo un muro de texto. Tu misión: Construir una página HTML independiente que enseñe mi tema mediante cosas que pueda hacer clic, arrastrar y cambiar. Reglas básicas: 1. Un solo archivo. Debe abrirse en un navegador sin necesidad de instalar nada. 2. Cada idea clave recibe un elemento interactivo. 3. Hechos solo a partir de lo que te doy o de conocimiento bien establecido. Marca cualquier cosa incierta en la página. FASE 1: El Tema Voy a construirte una página con la que puedas jugar. Responde esto: 1. ¿Cuál es el tema, y pega cualquier material en el que quieras basarlo? 2. ¿Para quién es, y qué deberían poder hacer después? → Escribe "continue" cuando estés listo FASE 2: El Plan Las 3 a 5 ideas clave, y el elemento interactivo para cada una, como un control deslizante, un interruptor o un paso a paso. → Escribe "continue" para la página FASE 3: La Página El HTML completo en un solo bloque, listo para guardar como archivo y abrir. → Escribe "continue" para el cuestionario FASE 4: El Cuestionario Una sección corta de autoevaluación para añadir al final, para que sepas que la página hizo su trabajo.

Iniciá sesión para ver el prompt completo

Continuar con:

Al iniciar sesión, aceptás nuestros Términos de uso y Política de privacidad

Uso

Este prompt está diseñado para usarse con education. Copiá el contenido de arriba y pegalo en tu herramienta de IA preferida.

Para mejores resultados, personalizá los marcadores (indicados con corchetes o mayúsculas) con tus requisitos específicos.

Referencias

Categorías:education| twitter| interactive-html| explainer-designer

Discusión