Skip to main content
PBX Build utiliza IA para ayudarle a crear y probar ideas rápidamente. No necesita conocimientos de programación para crear variaciones de alto rendimiento; solo necesita saber cómo comunicar su visión a la IA. Piense en la IA como un colaborador hábil. Si proporciona instrucciones claras y contexto, la IA puede ofrecer resultados precisos. Utilice esta guía para aprender los principios de los prompts eficaces.

​
¿Qué hace que un prompt sea bueno?

Para obtener los mejores resultados de la IA, céntrese en estos tres principios fundamentales.

​
Contexto

Proporcione contexto sobre el objetivo de su cambio. Explicar por qué desea probar una idea determinada ayuda a la IA a adaptar su salida para cumplir sus objetivos.
  • Bueno: “Cambia el color del CTA a azul para mejorar la visibilidad para el usuario.” ✅
  • Demasiado vago: “Haz que este CTA se vea mejor.” ❌

​
Precisión

Sea específico sobre el cambio que desea realizar. Proporcione una descripción visual precisa, incluyendo detalles como tamaño, color, forma, posición y estilo.
  • Bueno: “Añade un icono de camión de reparto blanco junto al texto de envío gratuito para mejorar la tasa de clics. La altura del icono debe coincidir con la altura del texto.” ✅
  • Sin objetivo claro: “Cambia el diseño.” ❌

​
Simplicidad

Utilice terminología sencilla y accionable. Céntrese en instrucciones claras y limítese a una petición por prompt. No complique excesivamente el prompt con jerga técnica.
  • Bueno: “Sustituye el fondo blanco por un degradado de arriba abajo de #2b5d50 a #dae995.” ✅
  • Demasiadas instrucciones: “Cambia el color del botón, añade una imagen promocional y mueve el texto.” ❌

​
Siga una estructura de prompt clara

Los usuarios tienen éxito con PBX cuando sus prompts siguen una estructura clara. Utilice estos cuatro pasos para peticiones más complejas:
  1. Defina el cambio
    • Indique exactamente qué transformación desea lograr.
  2. Especifique los cambios visuales y de diseño
    • Detalle los cambios visuales para el elemento objetivo, las directrices de diseño y los elementos de diseño. También puede hacer referencia a mockups o archivos de diseño aquí.
  3. Explique el comportamiento
    • Describa cómo debe responder el elemento objetivo a las acciones del usuario.
  4. Establezca límites y limitaciones (opcional)
    • Defina las limitaciones técnicas, los requisitos de capacidad de respuesta y lo que no debe ocurrir.
Utilice un LLM para refinar los prompts complejos antes de utilizarlos en Kameleoon. Incluso puede proporcionar la estructura de prompt anterior como plantilla para que el LLM la siga.

​
Ejemplos en acción

Revise estos ejemplos para ver cómo funciona la estructura de prompt en la práctica.

​
El prompt “comparar hoteles”

Este ejemplo proporciona una estructura clara para una función compleja:
“Crea una función ‘Comparar hoteles’ como en el mockup. Añade un interruptor ‘Comparar propiedades’ en la barra lateral izquierda para activarla o desactivarla. Cuando el interruptor esté activado, muestra una casilla ‘Comparar’ en cada tarjeta de propiedad, en la esquina inferior derecha. Si hay al menos una propiedad seleccionada, muestra una bandeja fija en la parte inferior con miniaturas, un contador ‘X/5 seleccionadas’ y los botones ‘Cancelar’ y ‘Comparar’. Al hacer clic en ‘Comparar’, se abre un modal sencillo con los detalles de los anuncios seleccionados. Limita la selección a 5.”
Prompt comparar hoteles
Modal comparar hoteles

​
¿Funcionará este prompt?

Prompt: “Sustituye el bloque ‘Mostrar en el mapa’ por un botón flotante ‘Mapa’ que se pueda mover. Los usuarios deben poder arrastrarlo a cualquier lugar de la página. Al hacer clic en él, debe abrirse la vista de mapa.” Veredicto: ✅ Sí. Sigue la estructura de prompt recomendada y describe claramente la transformación.
Prompt Mostrar en el mapa
Prompt: “Muestra un 15 % de descuento a los clientes fieles que regresan.” Veredicto: ❌ No. La IA actualmente tiene dificultades para crear nuevas funcionalidades que impliquen datos dinámicos o lógica de backend. Prompt: “Haz que la vista de cuadrícula sea la vista predeterminada.” Veredicto: ✅ Sí. Si la vista de cuadrícula ya existe en la página, la IA puede cambiar el estado predeterminado.
Prompt vista de cuadrícula

​
En caso de duda…

Si no está seguro de cómo formular un prompt, tenga en cuenta estos consejos:
  • Piense en grande, pero sea realista: la IA no puede crear nueva funcionalidad de backend. Concéntrese en cambios de UI y UX.
  • Manténgalo simple: los cambios sencillos no necesitan prompts complejos.
  • Trate a la IA como un compañero de equipo: redacte los prompts con la misma claridad con la que daría instrucciones a un desarrollador.
También puede utilizar la función Draw a sketch para encerrar visualmente el área que desea actualizar, la función Import a file para proporcionar un mockup que la IA pueda seguir, importar diseños directamente desde Figma o referenciar un sitio web externo como inspiración—por ejemplo, “Replica el diseño de filtros de este sitio de reservas de viajes: www.example.com/search.”

​
FAQ

Puede crear cualquier variante que gestione con código front-end. No obstante, Kameleoon no puede generar código para prompts que requieran lógica de backend o cambios del lado del servidor. Un desarrollador familiarizado con su sistema backend debe gestionar esos casos.
PBX destaca en tareas como:
  • Cambios de texto o contenido, incluidos titulares, CTA y avisos.
  • Actualizaciones de estilo, como colores, fuentes y ajustes de diseño.
  • Banners e inserciones de contenido.
  • Cambios interactivos sencillos, incluidos el reposicionamiento de botones, enlaces y modales.
También puede utilizar PBX para flujos de varios pasos, galerías o elementos interactivos personalizados. Para casos avanzados, utilice un enfoque híbrido. Primero, deje que PBX genere la implementación inicial y, a continuación, refínela manualmente. Este método combina la velocidad de la automatización con la precisión del desarrollo personalizado.
Nuestra IA explora muchas formas posibles de cumplir su petición, por lo que no produce un resultado fijo. El mismo prompt puede dar lugar a salidas diferentes en cada ocasión.La variación de las salidas ocurre debido a:
  • Aleatoriedad controlada: el modelo varía sus respuestas para evitar la repetición y fomentar la creatividad.
  • Interpretación del prompt: pequeñas diferencias de contexto pueden hacer que el modelo se centre en distintos detalles.
  • Diversidad de entrenamiento: el modelo se basa en patrones de conjuntos de datos de entrenamiento variados.
Para obtener resultados más coherentes, añada restricciones. Proporcione un mockup, un archivo de diseño o defina un Master Prompt que establezca reglas generales y contexto de marca para todas sus generaciones.
Sí, puede refinar la salida con prompts de seguimiento, pero tenga en cuenta el historial de prompts.Lo que PBX recuerda:
  • El código que generó más recientemente (utilizado como contexto).
Lo que PBX no recuerda:
  • Sus instrucciones de prompts anteriores.
  • El historial completo de la conversación.
  • Mockups o bocetos añadidos en prompts anteriores.
Los prompts de seguimiento vagos como “Corrige el problema de X e Y” pueden fallar porque PBX carece de contexto completo.Prácticas recomendadas para prompts de seguimiento:
  • Menos efectivo: “La navegación con flechas no funciona.”
  • Más efectivo: “En el nuevo carrusel, la navegación con flechas no funciona como se esperaba. Corrígelo usando el código generado a partir de mi prompt anterior. Las flechas deben aparecer a la izquierda y a la derecha y avanzar una imagen por clic.”
Sea específico en los prompts de seguimiento:
  • Identifique el elemento o función que se debe arreglar.
  • Describa el comportamiento esperado.
  • Haga referencia explícitamente al código generado.
  • Incluya detalles técnicos relevantes.
Sí, siempre que el DOM de la página contenga el código HTML del elemento activado por hover. Si JavaScript inyecta el elemento dinámicamente tras la interacción de hover, la IA de Kameleoon podría no detectarlo ni modificarlo correctamente.Para obtener los mejores resultados, verifique que:
  • El elemento hover existe en el HTML inicial, aunque esté oculto.
  • La estructura es estable y no se genera de forma asíncrona.