Si eres implementador WordPress, conocerás esta situación perfectamente: necesitas un bloque muy específico para un cliente. No un slider genérico, ni un acordeón estándar. Necesitas ese bloque concreto que resuelve un requerimiento puntual.
Hasta ahora tenías dos opciones: pelearte con el código (React, PHP, bloques nativos…) o instalar un pesado plugin que añade 50 bloques que no necesitas para usar solo uno.
Telex ha llegado para cambiar esto (y mucho más). Es un creador de bloques basado en IA que escribe el código por ti. Ya te hablé de lo básico de Telex en este post.
Pero, como ocurre con cualquier herramienta de inteligencia artificial, la calidad del resultado depende 100% de la calidad de tu petición. Si le pides basura, obtendrás código basura.
Así que te voy a enseñar a pensar como una máquina para que Telex trabaje para ti. Vamos a ver la estrategia exacta para redactar prompts que generen bloques funcionales, limpios y listos para producción.
La estrategia ganadora: claridad por encima de tecnicismos
El error número uno que veo al usar asistentes de código es intentar ser «demasiado desarrollador» sin serlo. A Telex no necesitas decirle qué librerías importar o cómo estructurar el block.json al principio. Necesitas decirle qué quieres lograr.
La estrategia más efectiva se basa en una descripción clara y específica, estructurada en cuatro pilares fundamentales. Si cubres estos cuatro puntos en tu prompt, el éxito está altamente garantizado.
1. Define el propósito: el «qué»
Empieza con una visión clara. No seas ambiguo.
- Mal: «
Hazme un bloque bonito para el equipo» ? - Bien: «
Crea un bloque que muestre una tarjeta de perfil para los miembros del equipo con foto, nombre, título profesional y biografía» ?
Define si el bloque es estático (contenido fijo que no cambia mucho) o dinámico (que necesita renderizado PHP). Si no lo sabes, simplemente describe la naturaleza del contenido y deja que Telex decida.
2. Especifica la funcionalidad: el «cómo funciona»
Aquí es donde Telex se juega los cuartos. ¿Qué controles necesitas tener tú (o tu cliente) en el editor de bloques?
- ¿Necesitas poder cambiar la alineación?
- ¿El usuario debe poder subir una imagen o escribir un texto libremente?
- ¿El bloque se comporta diferente en el editor (backend) que en la web (frontend)?
3. Describe la apariencia: el «look&feel»
No dejes el diseño al azar. Telex usará estilos básicos si no le dices nada (algo que a menudo no está tan mal), pero puedes ahorrar mucho tiempo de CSS si eres lo suficientemente descriptivo.
- Menciona colores, bordes, sombras y disposición (grid, flex, columnas).
- Usa referencias visuales universales: «
estilo tarjeta», «estilo minimalista», «tipo revista».
4. Interactividad: el factor «wow!»
Gracias a la Interactivity API de WordPress, los bloques pueden ser reactivos. Si necesitas que pase algo cuando el usuario hace clic o pasa el ratón por encima, dilo explícitamente:
- «
Al hacer hover sobre la foto, debe aparecer la biografía». - «
Al hacer clic, debe desplegarse más información».
Antiguamente, para hacer que un bloque hiciera algo al hacer clic (como abrir un acordeón o mostrar un texto), había que cargar librerías externas (como jQuery) o escribir JavaScript a mano que a veces rompía el sitio.
La Interactivity API es el nuevo estándar nativo de WordPress que permite que los bloques sean reactivos ( que reaccionen al usuario) de forma ultraligera y sin depender de código externo. Al usar esta API, Telex garantiza que el bloque seguirá funcionando en futuras actualizaciones de WordPress y que no ralentizará tu web. Por eso es vital que en el prompt le digas explícitamente «quiero que al hacer hover pase X», para que Telex sepa que debe activar esta API en el código que te entrega.
Anatomía de un prompt perfecto
Vamos a bajar esto a tierra. La teoría está muy bien, pero seguro que quieres ver cómo se aplica.
Imagina que quieres un bloque para mostrar testimonios.
El enfoque novato:
Crea un bloque de testimonios
El resultado será genérico, probablemente sin opciones de personalización y tendrás que retocar mucho CSS a mano.
El enfoque PRO (la fórmula Telex):
Crea un bloque que muestre una tarjeta de perfil con foto, nombre, título profesional y biografía. Debe tener controles en el inspector para cambiar colores de fondo y el tamaño del texto. En el frontend, al hacer hover sobre la foto, debe mostrarse la biografía completa con una transición suave. El estilo debe ser moderno, con bordes redondeados y sombra sutil
¿Ves la diferencia? Le hemos dado contexto, funcionalidad, diseño e interactividad. Telex te devolverá un bloque prácticamente terminado. Seguro que requiere algunos ajustes, pero te has ahorrado muchos pasos.
Itera, no busques la perfección a la primera
Aquí es donde muchos se atascan. Sé que el prompt que acabas de leer puede intimidar un poco si no estás acostumbrado ello. Así que vamos a afrontar una nueva estrategia en lugar de intentar escribir un prompt de 50 líneas para que el bloque salga perfecto a la primera.
Telex funciona mejor por capas.
- Primer prompt o capa: Pide la funcionalidad básica.
- Segundo prompt o capa: Añade controles.
- Tercer prompt o capa: Refina el estilo.
Vamos con un ejemplo más elaborado: Una tabla de precios con interruptor (toggle) mensual/anual. Mola ¿verdad?
Este es el típico elemento que, si lo haces mal, acabas instalando un plugin de 5MB solo para mostrar tres columnas. Con Telex y un prompt por capas, lo tienes limpio y ligero.
Capa 1: propósito y estructura (el esqueleto)
Crea un bloque de tabla de precios con tres columnas. Cada columna debe representar un plan (Básico, Pro, Agencia) e incluir: título, precio, lista de características con iconos de check y un botón de llamada a la acción (CTA)
Capa 2: funcionalidad e interactividad (la lógica)
Aquí es donde la magia ocurre. Le pedimos lógica condicional.
Añade un interruptor (toggle) en la parte superior para alternar entre facturación "Mensual" y "Anual". Usa la Interactivity API para que, al cambiar el interruptor, los precios se actualicen instantáneamente en el frontend sin recargar la página. (Asume un descuento del 20% para el precio anual)
Capa 3: apariencia y jerarquía (el diseño)
El diseño debe ser limpio y responsive (usando Grid o Flexbox). Quiero que la columna central ("Pro") esté destacada visualmente: hazla un poco más grande, con una sombra más pronunciada y un borde de color acentuado para guiar la atención del usuario
Capa 4: personalización (el control para el cliente)
En el inspector del editor, añade controles para: editar los precios base de cada plan, cambiar el color de acento del plan destacado y modificar los textos de los botones
El prompt maestro (todo en uno)
Si unimos las capas, este es el prompt que debes copiar y pegar en Telex para obtener un resultado de nivel profesional:
Crea un bloque de tabla de precios de tres columnas (Básico, Pro, Agencia). Cada columna debe tener título, precio, lista de características y botón.
Funcionalidad clave: Implementa un interruptor (toggle) arriba para alternar entre precios Mensuales y Anuales usando la Interactivity API. Los precios deben cambiar instantáneamente al hacer clic. Calcula automáticamente un 20% de descuento para la vista anual.
Diseño: Estilo moderno y responsive. Destaca la columna central ('Pro') haciéndola ligeramente más grande y con un borde/sombra de color acentuado.
Controles: Permite editar los precios base, el porcentaje de descuento y los colores desde el inspector del editor.
Aquí puedes ver el proyecto de Telex resultante. Si te gusta puedes hacer un remix y llevártelo a tu cuenta.
¿Por qué funciona este ejemplo?
- Ahorra deuda técnica: Evitas plugins de pricing que cargan hojas de estilo enormes.
- Usa el estándar moderno: Al pedir explícitamente la Interactivity API para el cambio de precios, Telex creará un código javascript muy ligero que gestiona el «estado» (mensual vs anual) directamente en el navegador del usuario.
- Es vendible: Le das al cliente final el control de los precios desde el editor, sin que te llamen para cambiar un número.
Confía en las decisiones técnicas de la IA. Telex está programado para seguir los WordPress Coding Standards. Él sabe mejor que tú (probablemente) qué dependencias usar y cuáles no. Déjale elegir si el bloque debe ser estático o dinámico, o qué API utilizar. Tú céntrate en el producto, deja que Telex se centre en el código.
Conoce los límites: qué puede y qué NO puede hacer Telex
Para ser eficiente, necesitas saber dónde están las líneas rojas. Telex es increíblemente potente porque trabaja dentro de unas limitaciones específicas que garantizan la estabilidad de tu sitio.
Lo que SÍ hace (y muy bien)
- Bloques completos: Genera todos los archivos necesarios.
- Uso de nativos: Solo usa dependencias ya instaladas en WordPress (
@wordpress/*). Esto significa que tus bloques son ligeros y no rompen el sitio con librerías externas extrañas. - Interactividad: Puede usar la Interactivity API para cosas como menús, hovers, contadores, etc.
- Personalización: Puede modificar bloques existentes usando parches JSON. Es decir, si el bloque ya existe, le puedes decir «cámbiame esto» y lo editará quirúrgicamente.
Lo que NO debes pedirle
- Complejidad arquitectural: No le pidas controladores REST API complejos o clases PHP avanzadas. Telex diseña bloques autocontenidos.
- Bloques anidados (InnerBlocks): Aunque técnicamente posible en WordPress, Telex funciona mejor con bloques autónomos para mantener la simplicidad. Evita pedirle bloques que contengan otros bloques dentro si puedes evitarlo.
- Librerías externas: No le pidas que instale un slider de jQuery o una librería de npm. Telex trabaja con lo que WordPress trae de serie. Y créeme, eso es bueno para el rendimiento de tu web.
El data driven Marketing no se aplica solo a la analítica; se aplica también a cómo gestionamos nuestros recursos (bootstrapping en el amplio sentido de la palabra). Usar Telex eficientemente es una decisión basada en datos: reduces el tiempo de desarrollo de horas a minutos.
No necesitas ser desarrollador para crear herramientas potentes en WordPress, pero sí necesitas ser un buen comunicador. La calidad de tus bloques y la velocidad de producción es directamente proporcional a la claridad de tus instrucciones.
Empieza con una visión clara, itera paso a paso y respeta los límites técnicos de la herramienta. Si haces eso, tendrás un superpoder que la mayoría de implementadores aún desconocen.
Ahora, abre Telex y prueba ese prompt de la tarjeta de perfil o cualquier otra cosa. Piensa en bloques que has echado de menos en estos últimos años y hazlos realidad. Te sorprenderá lo que puedes construir.