Las técnicas para escribir indicaciones efectivas para v0 también deberían aplicarse a otras herramientas de programación de IA, como lovable. Marco básico: tres insumos clave Después de pruebas exhaustivas, el equipo v0 descubrió que las mejores palabras de sugerencia contenían tres partes: 1. Superficie del producto ¿Qué es exactamente lo que hay que hacer? 2. Caso de uso (Contexto de uso) ¿Quién lo utiliza, cuándo y qué problema resuelve? 3. Restricciones y gustos ¿Cómo hacerlo y cuáles son las limitaciones? La plantilla se ve así: Crear un [componente, datos o función específicos]. ¿Para quién? En [qué escenario], ¿Para lograr qué objetivo? restricción: - Plataforma/Dispositivo - Estilo visual - Requisitos de diseño Parte 1: Superficie del producto No diga simplemente "crea un tablero", explique claramente qué hay dentro del tablero. Por ejemplo: Pantalla del tablero: - Nombres y desempeño de los 5 mejores vendedores - Barra de progreso del rendimiento del equipo frente al objetivo - Embudo de ventas (Cliente potencial → Calificado → Demostración → Cierre) - Cuanto más específico sea su gráfico de tendencias de rendimiento durante los últimos 6 meses, menos probable será que v0 haga conjeturas descabelladas o cree un montón de funciones que no utilizará. Segunda parte: Casos de uso Esta es la parte que más fácilmente se pasa por alto, pero tiene el mayor impacto. Considere estas preguntas: -¿Quién lo está utilizando? -¿Cuando utilizarlo? -¿Qué decisión se debe tomar? -¿Cuánto tiempo tienes disponible? Tomemos nuevamente el ejemplo del panel de control: El gerente de ventas (que no entiende de tecnología) usó esto durante la reunión de la mañana. Visto en el monitor grande de la oficina. Identifique rápidamente a aquellos que tienen un rendimiento inferior al esperado y, mientras lo hace, felicítelos por su buen desempeño. ¿Puedes ver la diferencia? El mismo tablero puede tener diseños completamente diferentes para la reunión matutina de un gerente de ventas y para el análisis en profundidad de un analista de datos. El primero requiere que usted vea los puntos clave de un vistazo, mientras que el segundo requiere funciones detalladas de filtrado y exploración en profundidad. El equipo de Vercel realizó una prueba comparativa: Versiones sin casos de uso especificados: - La función de búsqueda es falsa (es solo un cuadro). - No se puede hacer clic en el carrito de compras - Es un desastre cuando se ve en un teléfono móvil. Una versión con casos de uso descritos: - Están disponibles tanto la búsqueda como el carrito de compra. - Perfectamente compatible con teléfonos móviles. - También agregó automáticamente una vista previa rápida y un filtrado de categorías. Aunque tardó 26 segundos más en generarse, ahorró una o dos rondas de modificaciones posteriores. Al final, fue más rápido. Parte tres: Restricciones incluir: - Preferencia de estilo - Supuestos sobre el equipo - Expectativas de diseño - Esquema de colores - Requisitos de respuesta Por ejemplo: Una sensación profesional pero amigable. El diseño estilo tarjeta proporciona una jerarquía clara. Esquema de colores: verde indica normal, amarillo indica advertencia y rojo indica emergencia. Se utiliza principalmente en pantallas grandes. Debería sentirse como un verdadero producto SaaS. La configuración predeterminada para v0 ya es buena, pero restricciones específicas pueden hacerla aún mejor y el código más conciso. Comparación de pruebas reales El equipo de Vercel realizó tres series de pruebas comparativas, cambiando sólo una variable en cada serie. Prueba 1: Impacto de los escenarios de uso Versión borrosa: "Para crear un sitio web de comercio electrónico, es necesario tener listados de productos, filtros y funciones de compra". Versión clara: Los sitios web de comercio electrónico de moda están dirigidos a jóvenes de entre 25 y 35 años, quienes los consultan principalmente en sus teléfonos durante sus desplazamientos. Comparan rápidamente varios productos antes de realizar un pedido. Cree una página de producto que incluya: imágenes desplazables, nombre del producto, precio, descripción, selección de tamaño y color, y un botón para agregar al carrito. La parte superior solo tiene un botón de retroceso y un icono de carrito de compras. Tiene un aspecto limpio y sofisticado. Resultado: La versión clara se realizó correctamente a la primera. La versión borrosa necesita una o dos rondas más de revisión. Prueba 2: Impacto en la superficie del producto Una versión más ambigua: "Crear una página de perfil de usuario". Versión clara: "Crea una página de perfil de usuario que muestre: avatar, apodo, nombre de usuario, correo electrónico, biografía, hora de registro, estadísticas de actividad (número de publicaciones, número de comentarios, número de seguidores), lista de actividad reciente (con marcas de tiempo) y botones de edición y configuración. " Prueba 3: El impacto de las restricciones Versión básica: Cree un panel de control de tickets de atención al cliente. Visualice tickets pendientes, tiempo de respuesta, rendimiento del servicio al cliente y actividad reciente. Versión detallada: Cree un panel de control de tickets de atención al cliente. Visualice tickets pendientes, tiempo de respuesta, rendimiento del servicio y actividad reciente. Mobile-first (los gerentes usan sus teléfonos móviles para ver el contenido mientras están en el sitio). Tema de color claro con alto contraste. Esquema de colores: rojo indica emergencia (más de 24 horas), amarillo indica medio y verde indica normal. Diseño de máximo 3 columnas. Debe incluir un estado de carga. Diferencia clave: la versión básica solo se puede ver en teléfonos móviles (el diseño de escritorio es más pequeño), mientras que la versión detallada es verdaderamente "móvil primero". Iteraciones posteriores Después de la generación, tienes dos formas de mejorarla: 1. Continúa escribiendo palabras de referencia. Adecuado para modificaciones funcionales, como agregar características o cambiar la estructura. 2. Modo de Diseño: Haga clic en el Modo de Diseño y seleccione directamente el elemento para ajustarlo. Ideal para cambiar rápidamente detalles visuales como el color, el espaciado y la fuente. Recuerde: utilice palabras clave para la lógica y la estructura, y patrones de diseño para los ajustes visuales. Finalmente, aquí hay un ejemplo completo: Cree un panel de servicio al cliente que muestre: - Número de órdenes de trabajo pendientes - Tiempo medio de respuesta - Órdenes de trabajo categorizadas por prioridad (alta/media/baja) - Lista de desempeño del servicio al cliente (que muestra la carga de trabajo actual) - Flujo de actividad de tickets recientes Para los supervisores de servicio al cliente (que gestionan de 5 a 10 representantes de servicio al cliente), utilizar sus teléfonos móviles para monitorear la situación durante las rondas, a fin de evitar la sobrecarga del servicio al cliente y garantizar que se cumplan los objetivos de tiempo de respuesta. Verifique cada 30 minutos para identificar al personal de servicio al cliente sobrecargado y reasignarlo a otras tareas. restricción: - Móvil primero, tema de color claro, alto contraste - Esquema de colores por prioridad: Rojo para emergencia, Amarillo para medio, Verde para normal. - Muestra indicadores del estado del servicio al cliente (ocupado/disponible). - Máximo de 2 columnas en dispositivos móviles En conclusión Buenos avisos = mejores resultados + mayor velocidad. La próxima vez que uses la versión 0, intenta escribir más. Explica claramente a quién va dirigido, por qué lo necesita y cómo usarlo. -- El artículo original se puede encontrar en la sección de comentarios.
Artvercel.com/blog/how-to-pr…/t.co/vMMq7nLaJK