El Kit: explorar, vistas previas y añadir un módulo

El Explorador tiene exactamente tres niveles, y cada uno vive en la dirección de la propia página, no solo en el estado del componente: la cuadrícula de categorías (/projects/kit o /projects/<id>/kit), la lista de módulos de una categoría (añade ?cat=<key>) y la página de detalle completa de un módulo (añade &module=<id>). Así, el botón Atrás del navegador siempre hace lo correcto, y la página de detalle de un módulo concreto es un enlace real que puedes compartir: envía a alguien directamente a «esto es exactamente lo que te da el Formulario de presupuesto o de solicitud de estimación» en lugar de explicarle dónde hacer clic. Escape retrocede un nivel a la vez, igual que Atrás.

Si se abre desde dentro de un proyecto (/projects/<id>/kit), la página sabe qué proyecto estás viendo, así que puede mostrar lo que ya contiene y dejarte añadir directamente a él. Si se abre por separado (/projects/kit, desde el enlace de la pestaña Kit o directamente), son los mismos tres niveles sin nada específico de un proyecto: útil para explorar antes de decidir qué crear, o para mostrarle a alguien el catálogo sin abrir un proyecto concreto.

En la parte superior de la cuadrícula de categorías, el mismo selector de dos opciones que aparece en toda aiKit divide todo el catálogo: Kit del sitio son secciones y funciones que pasan a formar parte del sitio web o la app (páginas, formularios, galerías, tienda, reservas, SEO); Kit de herramientas de negocio son herramientas que funcionan junto al proyecto en lugar de dentro de él (automatización de marketing, facturación, CRM, herramientas de personal, informes). Cada categoría muestra cuántos módulos tiene y una insignia de «N listos ahora» siempre que al menos uno de ellos sea un módulo Listo ahora (ver abajo).

El cuadro de búsqueda sobre las categorías busca por nombre o descripción del módulo en TODO el catálogo a la vez, tanto en Kit del sitio como en Kit de herramientas de negocio, sin importar qué opción esté seleccionada; por eso buscar «factura» la encuentra aunque estés viendo Kit del sitio.

Si se abre desde dentro de un proyecto, y solo mientras no estés buscando, aparece una fila «Recomendado para este proyecto» encima de la cuadrícula de categorías cuando aiKit tiene sugerencias reales: reglas simples, sin IA, según el tipo de proyecto (a un sitio web se le sugieren un formulario de presupuesto, un formulario de contacto, una vitrina de reseñas, SEO local y páginas de preguntas frecuentes; a una tienda en línea, carrito y pago, recuperación de carritos abandonados y reseñas de productos; y así con páginas de destino, apps, sistemas de administración, paneles, portales de clientes, blogs y proyectos de automatización de marketing), más algunas coincidencias de palabras clave con el texto de objetivo del proyecto (mencionar «presupuesto», «reserva», «reseña», «correo», «factura» o «vender en línea» muestra el módulo correspondiente con su propia razón de una línea). Lo que ya esté en el proyecto se omite, y la lista se limita a seis.

Cada módulo lleva una de dos etiquetas de estado, y el texto es deliberadamente literal, no lenguaje de marketing. «Listo ahora» significa que el módulo es uno de los módulos probados del motor de creación: código real que muestra una página verdadera con datos de ejemplo en lugar de tus datos, exactamente la misma plantilla que usa un sitio en vivo. «Hecho para ti» significa que el módulo es una parte real y planificada del catálogo que todavía no se muestra en ninguna parte: al elegirlo se añade al plan y se crea un elemento de trabajo real, y el módulo se construye en el código del propio sitio, con su marca y su redacción, igual que cualquier otra edición de IA; simplemente no hay todavía una plantilla probada lista.

Ninguno de los dos estados significa «no real» o «hipotético». Ambos son cosas que aiKit realmente creará para ti. La única diferencia que indica la etiqueta es si puedes ver ahora mismo la forma terminada o si tienes que imaginarla a partir de una descripción y un diagrama.

Al abrir una categoría se muestran todos sus módulos como tarjetas: una miniatura, el nombre del módulo, su etiqueta de estado, una descripción breve de una línea, una fila de etiquetas «Ideal para» (hasta tres) y «En este proyecto» si ya se ha añadido (cuando exploras dentro de un proyecto). La miniatura de un módulo Listo ahora es una pequeña vista previa en vivo de la página real, que solo se carga cuando entra en pantalla, y se limita a seis miniaturas en vivo a la vez para que una categoría larga nunca ralentice la página; lo que supere ese límite muestra un marcador de carga sencillo hasta que sea visible. La miniatura de un módulo Hecho para ti es el mismo diagrama ilustrativo descrito abajo, pero más pequeño, salvo en los módulos que tienen una vista previa funcional (ver abajo), cuya tarjeta muestra el sitio de ejemplo real reducido, una insignia de «Vista previa funcional · N variaciones» y un botón «Ver cómo funciona» en lugar de «Ver detalles». «Ver detalles» abre la página propia del módulo.

En un módulo Listo ahora, la vista previa es un iframe real de la página verdadera ya probada, a tamaño completo, enmarcada como una pequeña ventana de navegador con un selector Escritorio/Teléfono que cambia de verdad el tamaño del marco para que puedas comprobar cómo se ve en un teléfono (en un teléfono real, el selector se reemplaza por una etiqueta sencilla de "Vista previa del teléfono" y el marco se abre desplazado hasta el propio formulario, para que veas los campos y no solo la sección principal). El marco se desvanece en la parte inferior; "Abrir vista previa completa" debajo lo abre en una pestaña nueva, y un pie de foto debajo indica el negocio de ejemplo cuyos datos se están usando. Si se abre dentro de un proyecto, un interruptor "Mostrar con los colores de este sitio" vuelve a pedir esa misma vista previa con los colores de marca del proyecto (tomados directamente de los códigos #hex escritos en las notas de marca del resumen) y con el nombre del proyecto, así que ves algo más parecido a lo que mostraría tu sitio real, no una muestra genérica.

En un módulo Diseñado para ti, no hay iframe en vivo; en su lugar obtienes el mismo esquema ilustrativo de la lista de categorías, dibujado más grande: un diagrama SVG sencillo de trazo fino que muestra la forma del diseño (los campos de un formulario, la cuadrícula de un calendario, los mosaicos de un panel, el tipo de pantalla que mejor encaje con el módulo), con algunas etiquetas breves tomadas de los datos de vista previa del propio módulo. Debajo siempre aparece obligatoriamente un pie de foto que nunca se elimina: "Ilustración del diseño. Tu versión está diseñada para coincidir con tu sitio." Está ahí específicamente para que un boceto de la forma nunca se confunda con una vista previa terminada y con la marca.

Vistas previas funcionales (4/10/2026): un número creciente de módulos Diseñado para ti omite el boceto y abre en su lugar un sitio de ejemplo completo y clicable, mostrado a todo el ancho por encima de los detalles. Los doce módulos de Comercio electrónico / Tienda en línea abren la misma tienda de cerámica de ejemplo, Juniper Kiln, cada uno en la parte que trata ese módulo: el catálogo (filtrar, ordenar, buscar, abrir un producto y elegir un esmalte y un tamaño; la imagen y el precio cambian), el carrito y el pago (cambiar cantidades, quitar artículos, introducir WELCOME10, FREESHIP o GIFT-2580, calcular el envío con el código postal y completar la compra hasta una página de confirmación), opciones de pago (tarjeta, Pay in 4 y botones de billetera), tarifas de envío, códigos de descuento y tarjetas de regalo, reseñas de productos (filtrar por estrellas o fotos, marcar como útil, escribir una), paquetes y complementos, impuesto sobre las ventas (cambia el estado de entrega y la línea de impuestos cambia), cuentas de clientes (iniciar sesión, volver a comprar, rastrear un paquete, iniciar una devolución), correos de pedido (los de confirmación, envío y entrega, con una página de seguimiento que funciona), devoluciones y cambios (buscar el pedido, elegir artículos y un motivo, obtener una etiqueta de devolución) e inventario (una vista de Propietario en la que cambiar el stock cambia lo que ven los compradores). Los diez módulos de Cursos en línea y Productos digitales abren una escuela de panadería de ejemplo, Rise & Crumb: reproducir una lección (velocidad, subtítulos), marcarla como completada, ver cómo se llena el anillo de progreso, hacer el cuestionario, inscribirse desde la vista previa gratuita, ver el certificado, hacer una pregunta bajo una lección, comprar una descarga digital, elegir un paquete de cursos o marcar un complemento del pago, y cambiar a la vista de Propietario para renombrar, reordenar, añadir o despublicar lecciones y establecer cuándo se abre cada semana. En el módulo de calendario de lanzamientos, una fila Vista previa de hora encima del marco tiene Avanzar una semana (y Volver a hoy), para que puedas ver cómo se abren las lecciones bloqueadas en sus fechas.

Encima del marco: una fila de opciones por cada variación que ofrece el módulo (por ejemplo, Diseño de la tienda: Cuadrícula, Lista o Destacados; Carrito: Carrito deslizable o Página del carrito, más Pago: Una página o Paso a paso; Regla de lanzamiento: En fechas establecidas, Días después de unirse o Después de terminar la última lección). Al elegir una, el sitio de ejemplo se redibuja de inmediato con esa variación y se guarda en la dirección de la página (?v=…), de modo que se puede compartir un enlace a una variación concreta. Escritorio y Teléfono cambian el tamaño del marco para que el sitio de ejemplo se reajuste como lo haría en un teléfono (en un teléfono real, esto es una simple etiqueta de "Vista del teléfono"). Restablecer devuelve el sitio de ejemplo a como estaba al principio. Una fila breve de "Cosas por hacer" indica lo primero en que hacer clic, y la descripción de cada variación elegida aparece debajo del marco. Dentro de un proyecto con colores de marca en su resumen, "Mostrar con los colores de este sitio" cambia el color principal del sitio de ejemplo por el del proyecto (solo si ese color es lo bastante oscuro para que el texto blanco de los botones se lea bien).

Nada de una vista previa funcional llega a un servidor. No hay conexión de pagos: el pago aparece marcado como "Vista previa: no se cobra nada y no se envía ningún pedido", el número de tarjeta es una muestra fija de solo lectura, y los botones de billetera (Apple Pay, Google Pay, PayPal) solo muestran una nota. No se envía ningún correo, no se publica ninguna reseña y nada se guarda; al salir de la página se olvida todo. Los negocios de ejemplo, los productos, las personas y los precios son inventados. El pie de foto bajo el marco lo indica: "Vista previa funcional con datos de muestra de un negocio inventado. Tu versión usa tus propios productos, precios, textos y marca. Aquí nada se cobra, guarda ni envía." Todos los demás módulos Diseñado para ti siguen mostrando la ilustración del diseño.

• Lo que ve el visitante: un recorrido numerado y en lenguaje sencillo de lo que realmente experimenta alguien que usa el módulo, paso a paso.
• Lo que obtienes: lo que el módulo entrega al propietario del proyecto (clientes potenciales registrados en un lugar real, un estado que puedes actualizar, y más).
• Características y, solo para un módulo con variantes reales con nombre definidas en el catálogo, un conjunto de tarjetas seleccionables "Elige la variante" justo en esta sección (la primera viene seleccionada por defecto, marcada con una pequeña casilla), de modo que una elección real de una opción u otra se hace aquí y no se escribe a mano.
• Por qué importa: el argumento sincero de por qué un negocio querría tenerlo.
• Cómo se personaliza (Listo ahora) o Variantes que puedes elegir (Diseñado para ti): lo que realmente puede hacerse diferente.
• Ideal para: los mismos chips de tipo de negocio de la tarjeta, mostrados completos.
• Cómo se construye: una frase sencilla que explique exactamente cómo llega a existir este módulo (una página probada que el motor muestra hoy, o integrada en el sitio por la IA durante una compilación), incluyendo una nota si necesita una cuenta de terceros, como pagos o mapas.

Debajo de todo lo demás aparece «Añadir esto a <nombre del proyecto>» (o «tu proyecto», si navegas sin haber elegido ninguno todavía). Si el módulo tiene ideas de personalización guardadas, se muestran primero como una lista de verificación, con la etiqueta «Personalizaciones sugeridas» para un módulo Listo ahora, o «Elige las variantes que quieres» para uno Creado para ti; al marcar cualquiera de ellas, esa línea exacta se incluye en lo que se envía, y no solo se marca una casilla en silencio.

En un módulo con vista previa funcional, el panel está en la columna izquierda, debajo de la vista previa, y empieza con «Tu variación»: la variación elegida en las filas de opciones de la vista previa (por ejemplo, «Carrito: Página del carrito · Pago: Paso a paso»). Lo que se muestre en la vista previa cuando pulses Añadir es lo que se registra: se guarda en el brief del proyecto junto con el módulo, y el elemento de trabajo dice «Variante: …» para que quien lo construya use ese diseño. Un módulo que también tiene opciones con nombre en su sección de Características pregunta allí «¿Qué es lo más importante para ti?», para que las dos elecciones no se confundan.

«¿Qué debería ser diferente para ti?» es una nota de texto libre con el mismo botón de dictado que en el resto de aiKit, además de un botón «Adjuntar una foto o PDF» (solo imágenes y PDF, de hasta 2,5 MB cada uno) para un logotipo, una foto de referencia o una ficha técnica; los archivos adjuntos aparecen allí como etiquetas que se pueden quitar. Si el módulo tiene preguntas reales y específicas que necesita responder para construirse bien, aparecen bajo «Lo que te preguntaremos», cada una con su propio campo de texto opcional, para que puedas responder de antemano en lugar de esperar a que te lo pregunten más tarde.

«Añadir al plan» siempre está disponible cuando ya estás en un proyecto real: registra la elección en el brief del proyecto (el mismo plan que leen la pantalla Plan del sitio y la página del proyecto) y crea un elemento de trabajo real, para el equipo, en la pestaña Comentarios, marcado como «Esperando a nosotros», igual que cualquier otra solicitud. «Añadir y construir ahora» aparece junto a él solo cuando el proyecto ya tiene archivos reales que editar: su primera compilación ha terminado o ya está publicado; hace lo mismo que las dos cosas anteriores y, a continuación, ejecuta de inmediato ese elemento de trabajo con el mismo editor de IA que usa Corregir con IA, sin una cola aparte. Si intentas añadir un módulo que ya está en el proyecto, se rechaza directamente con un mensaje claro de «ya está en este proyecto», en lugar de crear un duplicado.

Una vez enviado, una confirmación sustituye a los botones y muestra lo que realmente ocurrió: el mensaje sencillo «Añadido al plan como elemento de trabajo» o, en una solicitud de construir ahora, el estado real (iniciado, o el motivo concreto por el que no pudo iniciarse, como estar en espera de aprobación previa a la revisión), además de dos enlaces directos a «Abrir el plan» y «Ver solicitudes», para que nunca te quedes sin saber adónde fue.

En /projects/kit, con el mismo inicio de sesión real que el resto del panel de proyectos alojados, sin necesidad de tener un proyecto, todo funciona exactamente igual, hasta que intentas añadir algo. Al pulsar «Añadir a un proyecto» (el botón dice eso en lugar de «Añadir al plan» cuando no hay ningún proyecto cargado) se abre «¿A qué proyecto añadirlo?», un selector pequeño con todos los proyectos de tu cuenta. Elige uno y te llevará directamente al Explorador del kit de ese proyecto, con el mismo módulo abierto, listo para terminar de añadirlo. Si todavía no tienes proyectos, el selector lo indica claramente y ofrece un enlace directo de «Empezar un proyecto →» en lugar de dejarte sin salida.