← Todos los artículos

Tutoriales

Construye una regla con AI Helper — un recorrido paso a paso

17 mayo 2026 · por JustZix Team

Sabes lo que quieres — «oculta ese popup de newsletter» — pero no quieres escarbar en el DOM, escribir un selector y adivinar con !important. AI Helper hace el escarbado. Este es un recorrido concreto, clic a clic, de la construcción de una regla real, desde una petición en lenguaje sencillo hasta una regla guardada que sobrevive a las recargas.

Antes de empezar

AI Helper necesita una clave de API de uno de tres proveedores — OpenAI, Anthropic o Gemini. La añades una vez en Ajustes → AI Helper; la clave vive en chrome.storage.local y nunca toca la página. Si aún no lo has hecho, la guía de configuración lo explica en dos minutos. Para este recorrido asumimos que ya hay una clave instalada.

El objetivo

Elegiremos una molestia común: un sitio que te lanza un modal de newsletter a pantalla completa unos segundos después de que la página carga. Lo queremos fuera — cada visita, automáticamente. Al final tendremos una regla guardada limitada a ese único dominio.

Paso 1 — abre AI Helper en la página

Navega al sitio infractor y espera a que aparezca el popup (para que los elementos estén en el DOM). Luego abre AI Helper con Ctrl+Alt+\. También puedes usar el botón del widget emergente o el menú contextual del clic derecho — los tres abren lo mismo: una ventana flotante, arrastrable y redimensionable dentro de la página, limitada a esta pestaña.

Paso 2 — describe el objetivo

Escribe lo que quieres en lenguaje sencillo. Sin selectores, sin jerga:

Oculta el popup de newsletter que aparece en este sitio
unos segundos después de que la página carga.

AI Helper no salta directo al código. El prompt de sistema impone un flujo de trabajo: pedir detalles → inspeccionar la página → probar en una ventana TEMP → pedirte que verifiques → solo entonces persistir. Así que la primera respuesta suele ser una pregunta aclaratoria — por ejemplo, si también quieres eliminar la superposición oscura detrás del modal, o solo la caja del modal en sí. Respóndela; cuanto más preciso seas, mejor será el selector.

Paso 3 — observa cómo inspecciona la página

Una vez que tiene suficiente con lo que continuar, AI Helper inspecciona la página en vivo. Verás aparecer chips de llamadas a herramientas en la conversación — cada chip es una acción que tomó el modelo:

• query_page — ejecuta un selector CSS contra la página y recupera los elementos coincidentes más su HTML. Así es como encuentra el contenedor real del modal.
• list_structure — lee tus carpetas, grupos y reglas existentes, así que sabe dónde encajaría una regla nueva y evita duplicar algo que ya tienes.

El modelo recibe el contexto de la página actual — URL, título y un fragmento HTML — así que no está adivinando. Acota desde un selector amplio hasta el contenedor específico que aloja el popup.

Paso 4 — ve el código probado en una ventana TEMP

Aquí está la parte que hace esto fiable. AI Helper no escribe código en una regla guardada. Invoca open_temp_pane para abrir una ventana TEMP CSS — el mismo tipo de ventana de desarrollador dentro de la pestaña que abrirías a mano — y luego set_temp_pane_code para colocar su CSS propuesto en ella. Ves aparecer el código, en vivo, y la página reacciona en tiempo real:

/* Propuesto por AI Helper — mostrado en una ventana TEMP CSS */
.newsletter-modal,
.newsletter-modal__overlay {
  display: none !important;
}
html, body {
  overflow: auto !important;
}

El popup desaparece frente a ti. Aún no se ha guardado nada — esto es un entorno aislado. Si el selector es incorrecto, también lo ves de inmediato, y puedes decirle a AI Helper «la superposición sigue ahí» o «eso también ocultó el pie de página». Vuelve a inspeccionar y ajusta.

Paso 5 — verifica que realmente funcionó

Tómate un momento. Recarga la página si quieres — la ventana TEMP persiste para la pestaña. Comprueba que:

• el popup desapareció;
• el desplazamiento de la página funciona (los popups a menudo bloquean el desplazamiento del body);
• nada más se rompió — sin botones ausentes, sin diseño colapsado.

Si algo está mal, mantén la conversación en marcha. Este ir y venir es el punto — estás afinando la regla juntos antes de que se vuelva permanente.

Paso 6 — confirma, y la regla se crea

¿Conforme con ella? Dile a AI Helper que la guarde. Invocará create_rule — y aquí es donde aparece una confirmación separada y explícita. La extensión te muestra exactamente lo que está a punto de crear: el nombre de la regla, el patrón de URL (sugerirá el dominio actual, p. ej. https://example.com/*) y el cuerpo del CSS. No se escribe nada en tu configuración hasta que haces clic en confirmar.

Si la regla necesita una nueva carpeta o grupo en el que vivir, esas son confirmaciones separadas también — create_folder y create_group preguntan cada una por su cuenta. AI Helper nunca puede reestructurar tu configuración en silencio.

Paso 7 — listo

Haz clic en confirmar y la regla es real. Aparece en tu jerarquía de carpetas/grupos/reglas como cualquier regla hecha a mano. Recarga el sitio: el popup desapareció, automáticamente, en cada visita futura. Puedes abrir la regla más tarde en el editor normal para retocar el CSS, cambiar el patrón de URL o desactivarla.

Lo que realmente hiciste

Describiste un objetivo en una frase. AI Helper inspeccionó la página, encontró el selector correcto, demostró que funcionaba en una ventana que podías ver y guardó una regla solo después de que dijiste que sí. Todo el bucle tardó quizá dos minutos — y nunca escribiste un selector ni abriste las DevTools.

Consulta también

• AI Helper prueba en ventanas TEMP antes de guardar — por qué importa el modelo de probar y luego confirmar.
• Cómo AI Helper inspecciona la página — una mirada más cercana a las herramientas de inspección de página.
• El flujo de trabajo agéntico de llamadas a herramientas — el bucle de hasta 8 pasos detrás de los chips.

Descarga JustZix — gratis, sin cuenta, Chrome 100+ (también Edge, Brave, Opera, Vivaldi). Añade una clave de API y construye tu primera regla simplemente pidiéndola.