Crea una checklist interactiva con IA: prueba y comparte el HTML

Abre el asistente creativo y pide una página HTML interactiva, no una imagen de una lista. El ejemplo revisa la preparación de un carrusel social.

Usa acciones observables: «Abrir los cinco archivos exportados» es más claro que «Revisar la calidad». No incluyas datos personales en una página que vas a compartir. Este ejercicio conserva el progreso solo mientras está abierta; no sincroniza cuentas ni el estado de un equipo.

El total debe incluir siempre las seis acciones, también las ocultas por un filtro. «Ver pendientes» cambia la visibilidad, no el estado. «Reiniciar» desmarca todo. Estas reglas permiten evaluar si la página funciona.

Crea una checklist HTML interactiva titulada Revisión del carrusel.
Incluye tres secciones con exactamente dos casillas cada una:
Fuente: Confirmar permiso de reutilización; Verificar el texto final.
Archivos: Abrir las cinco exportaciones; Revisar el orden.
Publicación: Previsualizar el recorte; Añadir el enlace a la fuente.
Muestra completadas/6 y una barra de progreso. Añade Ver pendientes y Reiniciar. El filtro no cambia el total; Reiniciar desmarca las seis casillas y muestra la lista completa.
Usa etiquetas claras, controles de teclado, foco visible y contraste legible. Adapta la página a un móvil estrecho sin desplazamiento horizontal.
Fondo crema, acentos morados, diseño sencillo y sin imágenes decorativas.
Guarda el estado solo en memoria. Muestra: El progreso se reinicia al recargar esta página.
No uses almacenamiento del navegador, formularios, peticiones externas, inicio de sesión, pagos, enlaces de descarga internos ni bibliotecas externas.
Crea el HTML completo como artefacto interactivo en esta conversación, no solo un bloque de código o una captura.

Espera a la tarjeta y prueba la vista previa. Guardar el artefacto no demuestra que los controles funcionen. Si aparece un error, envía al asistente el mensaje y la acción que lo provocó.

Marca dos acciones: debe aparecer 2/6. Activa Ver pendientes: quedan cuatro acciones y el contador sigue en 2/6. Vuelve a mostrar todo, desmarca una y usa Reiniciar para comprobar 0/6. Recarga y prueba las casillas y botones con Tab y Espacio.

Corrige la checklist existente. Con dos acciones completadas, Ver pendientes cambia por error el denominador a 4.
Mantén el denominador en las seis acciones originales, independientemente del filtro. Conserva los elementos completados en el estado aunque estén ocultos.
Preserva textos, diseño y reinicio del estado en memoria al recargar. Devuelve la página interactiva revisada.

Repite la secuencia fallida en la nueva versión y comprueba una pantalla estrecha. El prompt fija un objetivo de prueba, no garantiza que la primera generación lo cumpla.

Descarga el HTML desde la tarjeta y abre el archivo para comprobarlo. Este ejemplo no solicita dependencias externas; otras páginas con bibliotecas en línea pueden necesitar conexión.

Para otros lectores, revisa el contenido y utiliza Compartir página. La publicación pasa una revisión y crea una instantánea, no una checklist colaborativa en directo. El plazo predeterminado actual es de siete días: comprueba la caducidad mostrada y revoca el enlace cuando deje de ser necesario. Tras modificar la página, vuelve a revisarla y compartirla; no supongas que una instantánea anterior se actualiza.

Cualquier persona con el enlace puede verla hasta su vencimiento o revocación. La exclusión de buscadores no controla el acceso. Las páginas compartidas no permiten almacenamiento del navegador, envío de formularios ni llamadas a servicios externos; esta guía no promete progreso permanente, captación de correos ni un backend.

¿Un compañero verá mis marcas? No. El estado pertenece a cada página abierta y se borra al recargar. Para responsables, registros duraderos o colaboración, usa un sistema de tareas.

¿Es una web pública permanente? Un enlace temporal no es un sitio permanente ni una landing SEO. Los artefactos compartidos quedan excluidos de la indexación.

¿La descarga conserva la lista? Conserva la página y el código, pero este ejemplo no guarda las marcas. Comprueba el archivo por separado. La creación y las revisiones siguen las tarifas existentes.

Utiliza una infografía para una visión estática o cinco tarjetas para una lectura secuencial. Los tres flujos parten del asistente creativo.