← Todas las guías
Método Esclusa Construye con IA

Crea webs, herramientas y artefactos HTML con IA

Cómo pedirle a la IA una página web, una calculadora o un panel que funcione de verdad, iterarlo como un producto y publicarlo en internet en minutos.

3 min de lecturaRevisada en octubre de 2026Método Esclusa

Qué es un artefacto y por qué cambia las reglas

Un artefacto es una página web completa que la IA escribe por ti: HTML, estilos y código en un solo archivo. Se abre en cualquier navegador, se puede compartir con un enlace y no necesita servidor. Con una buena petición sale una calculadora de presupuestos, un panel de seguimiento, una landing de producto o un formulario interactivo en pocos minutos.

Los asistentes actuales muestran el resultado en vivo mientras lo escriben, y muchos permiten publicarlo con un enlace privado. Si no, basta con guardar el archivo como index.html.

Cuándo compensaHerramientas internas pequeñas, prototipos para enseñar una idea, webs de una página y paneles con datos que cambian poco. Cuando necesitas usuarios, pagos o una base de datos compartida, el artefacto es el prototipo y la aplicación se construye aparte (lo verás en la guía de nivel 4).

Cómo pedirlo: el brief de producto

Una web se pide como se le pediría a un diseñador: para quién es, qué tiene que poder hacer y cómo debe sentirse. Cuanto más concreto, menos vueltas.

Brief para un artefactoCrea una página web en un solo archivo HTML. Para quién: comerciales de una empresa de reformas que presupuestan en casa del cliente, desde el móvil. Qué tiene que hacer: 1. Elegir tipo de reforma (baño, cocina, pintura) y metros cuadrados. 2. Marcar calidades (básica, media, alta) con su precio por metro. 3. Calcular el total con IVA y mostrar el desglose. 4. Botón para copiar el resumen y pegarlo en un WhatsApp. Cómo debe ser: limpia, botones grandes para el pulgar, colores azul marino y blanco, funciona sin conexión. Datos de precios: [pega tu tabla]. Restricciones: sin librerías externas, nada de datos personales del cliente, textos en español de España.

Iterar como un producto, no como un chat

  1. Primero que funcione. Prueba todos los botones con datos reales antes de pedir cambios de diseño.
  2. Un cambio por mensaje. "Cambia el color" y "añade la exportación a PDF" en dos peticiones; así sabes qué rompió qué.
  3. Describe el fallo con precisión. "En el móvil, el total se sale de la pantalla cuando pongo 120 m²" es mejor que "se ve mal".
  4. Pide revisión. "Revisa el código buscando errores de cálculo y casos raros: cero metros, decimales, campos vacíos."
  5. Guarda versiones. Antes de un cambio grande, descarga el archivo. Si algo se rompe, vuelves atrás.

Publicarlo en internet en cinco minutos

Un archivo HTML se publica gratis en servicios de páginas estáticas. El proceso en Cloudflare Pages:

  1. Guarda el archivo como index.html dentro de una carpeta.
  2. Entra en Cloudflare, ve a Workers y Pages, crea un proyecto y elige subir archivos.
  3. Arrastra la carpeta. En segundos tienes una dirección del tipo tu-proyecto.pages.dev.
  4. Si quieres tu dominio, añádelo en la sección de dominios personalizados.

Netlify y GitHub Pages funcionan de forma parecida.

Lo que nunca debe ir en un artefacto

  • Claves de API o contraseñas. Todo el código de una página web lo puede leer cualquiera que la abra. Si necesitas llamar a un servicio con clave, va en un servidor intermedio (guía de nivel 4).
  • Datos personales o confidenciales embebidos. Un listado de clientes dentro del HTML queda expuesto aunque la página "pida contraseña" con JavaScript.
  • Lógica que deba ser secreta. Precios internos, márgenes o reglas de negocio sensibles.
Una contraseña en JavaScript no protege nadaSi la página comprueba la clave en el propio navegador, basta con ver el código fuente para saltársela. Para proteger de verdad, usa la protección de acceso del servicio donde publicas o un servidor con autenticación.

Diez artefactos útiles para empezar

ArtefactoPara qué
Calculadora de presupuestosComerciales que presupuestan en la calle
Panel de seguimiento de un proyectoHitos, fechas y responsables en una vista
Simulador de retornoEnseñar a un cliente cuánto ahorra
Checklist interactivoProcesos de calidad o de alta de clientes
Landing de un producto o eventoValidar una idea antes de invertir
Cuestionario de diagnósticoCaptar contactos con una evaluación rápida
Comparador de opcionesProveedores, tarifas o planes lado a lado
Generador de documentosRellenar un formulario y obtener el texto listo
Visor de datos de un CSVFiltrar y graficar una exportación
Juego o test de formaciónRepasar procedimientos con el equipo

Ponlo en práctica

Guía del método de trabajo de Esclusa, escrita a partir de nuestros proyectos. Vale para cualquier asistente de IA.

@esclusa.ia