Guía de Prompt

Comienza en el chat del proyecto. Abre el chat del proyecto que quieres cambiar y luego elige o dirígete al agente cuyo rol coincida con el trabajo. Si no estás seguro de qué agente encaja, pide al equipo que lo aclare antes de construir.

Esta guía reúne las técnicas que de forma consistente logran mejores resultados de tu equipo de agentes. Ninguna requiere una habilidad especial. Se trata de lo que dices, no de cómo le das formato. Ya sea que estés escribiendo tu primera solicitud o refinando un proyecto maduro, se aplican los mismos principios: pensamiento claro entra, resultados claros salen.

Deja que el equipo pregunte antes de construir

Una de las formas más efectivas de obtener un mejor resultado: cuando una solicitud es grande o imprecisa, invita a hacer preguntas en lugar de esperar que el equipo adivine correctamente. Indica lo que quieres y luego añade una línea al final:

Pregúntame cualquier cosa que necesites para entender completamente lo que quiero antes de empezar.

A menudo recibirás preguntas que no se te habría ocurrido responder por tu cuenta, ya sea sobre casos límite, audiencias o compensaciones. Resolverlas desde el principio cuesta un minuto; descubrirlas después de una construcción cuesta rehacer trabajo. El resultado queda mucho más cerca de tu intención en el primer intento.

Paso 1: Decide antes de escribir

Ten claro qué estás construyendo

Unos minutos de reflexión al principio pueden ahorrarte mucho volver a escribir prompts más tarde. Antes de empezar, asegúrate de poder responder cuatro preguntas simples: qué estás construyendo, para quién es, por qué lo usarían y cuál es la acción principal que quieres que realicen.

Esa acción principal suele llamarse CTA, abreviatura de call to action. Es el botón, enlace o siguiente paso que más quieres que los usuarios elijan, como Sign Up, Book a Demo, Start Free o Buy Now.

No necesitas escribir una especificación completa. El objetivo es simplemente darle al proyecto una dirección clara. Cuanto más específico sea tu punto de partida, más fácil será generar un resultado que coincida con lo que tienes en mente.

Construye un sitio de una sola página para una app de presupuesto dirigida a freelancers. El CTA principal es “Start Saving Smarter.” Usa un estilo audaz y expresivo con tipografía grande y colores intensos.

Esboza el recorrido, no solo las pantallas

El buen diseño vive tanto entre pantallas como en ellas. Recorre el camino que sigue tu usuario: qué ve primero, qué genera confianza, qué le da seguridad para actuar y a dónde conduce esa acción. Incluso un esquema de tres tiempos, hero, prueba, llamada a la acción, hace que tus solicitudes sean mucho más efectivas, porque ahora cada sección tiene una razón para existir y una razón para llevar a la siguiente.

Define la dirección visual desde el principio

El estilo es mucho más fácil de establecer que de adaptar después. Elige una dirección: tranquila y elegante, audaz y disruptiva, premium y estilizada, y exprésala en tu primera solicitud usando palabras de tono sobre las que el equipo pueda actuar: minimalista, lúdico, cinematográfico, enfocado en desarrolladores. Estas palabras son más que decoración: dan forma a la tipografía, el espaciado, el color, la sombra y el radio de las esquinas desde el primer componente. Reutiliza la misma línea de estilo en solicitudes posteriores para mantener todo cohesionado.

Usa un diseño tranquilo, inspirado en el bienestar: degradados suaves, tonos tierra apagados, esquinas redondeadas, padding generoso. Tono general suave y tranquilizador.

Paso 2: Escribe solicitudes que funcionen

Describe resultados, no implementaciones

Describe el resultado que quieres, no los pasos para construirlo. Por ejemplo, “Añade una sección de precios con tres opciones y haz que la del medio destaque” es más útil que explicar exactamente cómo debe construirse la página. Concéntrate en lo que debe aparecer y por qué importa; el equipo puede decidir cómo construirlo.

Trabaja por partes, no por páginas

Las solicitudes acotadas a un solo componente — un hero, una cuadrícula de funciones, una fila de testimonios, una tabla de precios — te dan claridad y control. Si una parte no da en el blanco, ajustas esa parte en lugar de regenerar todo lo que la rodea. Construye un bloque, revísalo, refínalo y luego pasa al siguiente. Una solicitud de página completa produce ruido; una solicitud de componente produce señal.

Crear una sección de funciones: encabezado centrado y luego tres tarjetas una al lado de la otra, cada una con un ícono, un título y una línea de descripción. Sombras suaves, ligera elevación al pasar el cursor.

Usa palabras reales

El texto de relleno oculta problemas; el texto real los revela. Un encabezado real puede necesitar dos líneas; un CTA real puede funcionar mejor como verbo. Escribe lo que un usuario realmente leería, aunque sea un borrador; los diseños, el espaciado y las decisiones de diseño mejoran cuando el contenido es real.

Encabezado del hero: “Design Calmly.” Subtexto: “Turn stress into structure.” CTA: “Start Building Free.” Diseño centrado en el texto con espaciado vertical generoso.

Nombra elementos reales

Usa palabras claras y específicas para describir lo que quieres en la página. No necesitas conocer terminología de diseño; solo nombra las cosas que los usuarios deberían ver o con las que deberían interactuar, como una tarjeta de perfil, un botón o un formulario.

Las solicitudes específicas son más fáciles de construir que las amplias. Empieza con el elemento básico que necesitas y luego añade detalles uno por uno.

Crear una tarjeta de perfil con una foto, nombre y botón de seguir. Añade una pequeña etiqueta “Verified” junto al nombre y muestra una breve explicación cuando alguien pase el cursor sobre ella.

Paso 3: Cambia con precisión

Delimita cada cambio: qué se mueve, qué se queda

Al ajustar trabajo existente, sé explícito en ambos lados: qué debe cambiar y qué no debe cambiar. Usa palabras directivas como “replace”, “update” y “adjust” en lugar de “make this better”, y delimita las partes que te gustan. La precisión aquí es lo que evita que la iteración se convierta en regresión.

Cambiar el texto del CTA a “Get Started” y aumentar su padding horizontal. Mantén sin cambios los colores actuales, la fuente y todo lo demás en esta sección.

Un cambio significativo a la vez

Actualiza el texto, luego el diseño, luego las interacciones y verifica cada resultado antes de la siguiente solicitud. Los pasos pequeños y deliberados se acumulan en un producto pulido; diez cambios en un solo mensaje se acumulan en ambigüedad, y cuando algo sale mal no sabrás qué cambio lo causó.

Las correcciones a mitad de tarea ocurren en el chat. Cuando Prompt Queue está disponible en tu chat y el trabajo del Agente está activo, los mensajes de seguimiento se ponen en cola detrás del trabajo en ejecución. Confirma que tu mensaje aparezca en la cola antes de enviar otra copia. Si los controles de la cola no están visibles, no vuelvas a enviar: espera a que termine el trabajo actual o usa un control de interrupción si tu chat ofrece uno, y luego confirma el estado de la tarea antes de enviar un seguimiento. Consulta Chat del proyecto para más detalles.

Piensa un paso por delante de la UI

Si tu proyecto necesita hacer más que verse pulido, define el comportamiento junto con la apariencia. Especifica qué ven los usuarios cuando han iniciado sesión o cuando no, de dónde viene el contenido dinámico y cómo maneja la interfaz los estados vacíos, de carga y de error. No necesitas un backend funcional para diseñar en torno a estos escenarios; planificarlos temprano ayuda a evitar una gran reelaboración de la UI más adelante.

Si el usuario ha iniciado sesión, muestra su avatar y nombre en la parte superior derecha. Si no, muestra un botón “Log In” que redirija a la pantalla de autenticación.

Preguntas frecuentes

¿Cómo escribo un prompt efectivo para el agente de IA?

Estructura tu prompt con estos elementos clave:

1. Contexto — Establece la situación. Explica qué estás construyendo y en qué estado se encuentran actualmente las cosas.

2. Objetivo — Sé específico sobre el resultado exacto o la función que quieres.

3. Requisitos & restricciones — Enumera claramente qué debe cambiar y qué debe permanecer intacto.

4. Resultado esperado — Define cómo se ve el éxito (por ejemplo, comportamiento de la UI, manejo de errores, persistencia del estado).

5. Referencias — Adjunta capturas de pantalla, enlaces, pasos del flujo de trabajo o muestras de código siempre que sea posible. Elimina contraseñas, códigos de verificación, claves de API, cookies, datos personales y detalles de pago antes de compartir.

Ejemplo: "Estoy construyendo un panel con una barra lateral. Añade un botón de cierre de sesión en la parte inferior de la barra lateral. Debe borrar la sesión y redirigir a /login. No cambies el diseño de la barra lateral ni los enlaces de navegación. Después de hacer clic, el usuario debería ver la página de inicio de sesión en menos de 1 segundo."

¿Cómo debo manejar solicitudes complejas que involucran múltiples funciones?

Para solicitudes complejas, divídelas en tareas más pequeñas:

1. Indica el problema actual y el objetivo final.

2. Enumera cada subtarea por separado (tarea 1, tarea 2, tarea 3).

3. Verifica cada tarea antes de pasar a la siguiente.

4. Prueba el flujo completo al final.

Este enfoque reduce los cambios inesperados por pedirle al Agente que haga demasiado a la vez. Cada prompt debe centrarse en un único resultado verificable.

¿Cómo escribo un prompt para corregir un error?

Un prompt útil para corregir errores debe incluir:

• La página, función, entorno y usuarios afectados
• Pasos exactos para reproducir el problema
• Comportamiento real y comportamiento esperado
• El texto completo del error y cuándo ocurrió
• Capturas de pantalla o registros relevantes, con contraseñas, tokens, cookies, datos personales y detalles de pago eliminados
• Qué debe permanecer sin cambios
• Cómo verificar la corrección y qué comprobaciones de regresión ejecutar

Ejemplo: “En la página de pago en Preview, seleccionar Submit devuelve un error 500. Esperado: el pedido se confirma y el usuario llega a la página de agradecimiento. Reproducción: [steps]. Corrige la causa sin cambiar los totales del carrito ni el flujo de pago, y luego verifica un caso de pago exitoso y uno de pago rechazado. Eliminé todos los valores secretos del registro adjunto.”

¿Cómo escribo un prompt para modificar el diseño o el estilo de una página?

Al solicitar modificaciones de página, incluye:

1. La página, módulo y elemento específicos que se deben modificar.

2. Estado actual y resultado objetivo.

3. Enlaces de referencia o capturas de pantalla.

4. Funciones que deben permanecer sin cambios.

5. Criterios de aceptación (por ejemplo, debe funcionar tanto en escritorio como en móvil).

Ejemplo: "En la página /pricing, cambia la cuadrícula de tarjetas de planes de 2 columnas a 3 columnas en escritorio. Mantén el diseño móvil como una sola columna. Usa esta captura de pantalla como referencia [attach]. No cambies el contenido de las tarjetas ni los estilos de los botones."

¿Qué debo hacer cuando el agente sigue haciendo cambios incorrectos a pesar de las correcciones?

Cuando el Agente falla repetidamente, añadir más instrucciones a veces puede causar más confusión. En su lugar:

1. Conserva el estado actual — Deja de enviar correcciones superpuestas. Si tu chat muestra un control Revert, lee su texto de confirmación antes de usarlo, toma nota de cualquier cambio posterior que necesites conservar y verifica el proyecto después. Si el alcance no está claro, no continúes; usa la guía de Chat del proyecto o contacta a Soporte con un Chat Link redactado y una captura de pantalla.

2. Elimina el ruido — En lugar de añadir instrucciones extra encima, reformula el problema central claramente desde cero.

3. Una tarea a la vez — Concéntrate en resolver un solo problema antes de seguir adelante.

Dar un paso atrás y abordar los cambios de forma incremental suele resolver los problemas mucho más rápido que intentar corregir múltiples problemas superpuestos en un solo prompt.