samarv/Shanon

La construcción de productos nativos con IA cambia el rol del Product Manager: de escribir requisitos para otros a dirigir directamente a un agente de IA para construir el software. Este enfoque reduce el tiempo de desarrollo de meses a semanas y los costos hasta en un 99%.

El marco "JIRA-Prompt"

Trata cada interacción con un agente de IA (como Bolt) como si estuvieras escribiendo un ticket de alta calidad para un desarrollador senior.

1. Define el alcance técnico

En lugar de descripciones generales, proporciona los parámetros específicos que la IA necesita para iniciar el entorno:

• Identifica la funcionalidad principal: "Haz un clon de Spotify con streaming, listas de reproducción y soporte para archivos MP3."
• Especifica el stack: Indica las integraciones deseadas (p. ej., "Usa Supabase para la base de datos y Netlify para el hosting").
• Proporciona contexto de datos: Pega datos sin procesar (p. ej., biografía de LinkedIn, filas de CSV o pautas de marca) directamente en el prompt para dar contexto a la IA.

2. Equilibra especificidad con "vibes"

Los agentes de IA rinden mejor cuando reciben una mezcla de requisitos rígidos y libertad creativa.

• Alta especificidad: Úsala para lógica de negocio, esquemas de datos y flujos de usuario.
• El prompt de "vibe": Para UI/UX, usa un lenguaje descriptivo en lugar de CSS específico.
  • Ejemplo: "Haz que se vea como un sitio de donaciones médicas de alta gama: limpio, profesional y confiable."
  • Ejemplo: "Hazlo más bonito y moderno."

3. Implementa depuración iterativa

Cuando la IA se atasque o produzca un error:

• Depuración con captura de pantalla: Sube una captura del problema de UI o del mensaje de error y pide: "Arregla esto para que coincida con el diseño previsto."
• El protocolo "desatascador": Si la IA falla después de 3 intentos en un problema lógico específico, pasa a un enfoque humano en el bucle. Consulta a un experto o a un desarrollador para arreglar ese "rincón específico" mientras mantienes a la IA a cargo del código más amplio.

Flujo de trabajo: De Figma al despliegue

Paso 1: Extracción de diseño

Usa el método de URL directa para convertir diseños estáticos en código:

• Toma la URL de tu diseño de Figma.
• Antepón la URL de la herramienta de IA (p. ej., bolt.new/[FIGMA_URL]).
• Permite que el agente "absorba" los activos y el diseño para crear el entorno inicial.

Paso 2: Prototipado en vivo

En lugar de arrastrar fotogramas en Figma, solicita cambios funcionales:

• "Añade una página de inicio de sesión usando Supabase Auth."
• "Crea un panel que obtenga datos de la tabla de usuarios."
• Prueba la aplicación en tiempo real en tu propio dispositivo usando vistas previas con código QR.

Paso 3: Despliegue con un solo clic

Lleva la aplicación inmediatamente a una URL de producción:

• Haz clic en "Desplegar".
• Conéctate a un proveedor de hosting (Netlify/Vercel).
• Adjunta un dominio personalizado para transformar el prototipo en un negocio en vivo.

Ejemplos

Ejemplo 1: El CRM de "cero a mercado"

• Contexto: Un emprendedor necesita un CRM personalizado con facturación de Stripe pero no tiene presupuesto para una agencia de $30.000.
• Entrada: "Construye un CRM para agentes inmobiliarios. Incluye seguimiento de clientes potenciales, una integración de Stripe para suscripciones mensuales y un redactor de correos con IA. Usa una interfaz limpia con temática azul."
• Aplicación: Usa Bolt para generar la aplicación base. Itera diciendo "Añade una columna para 'Fecha del último contacto'" e "Integra la clave de prueba de Stripe".
• Salida: Un producto SaaS funcional que genera ingresos, construido en 3 semanas por ~$300 en costos de inferencia.

Ejemplo 2: Página de aterrizaje rápida para marketing

• Contexto: Un PM necesita una página de aterrizaje para un experimento de nueva función.
• Entrada: [Pega la biografía de LinkedIn/Especificaciones de marca] + "Crea un sitio de portafolio personal. Usa un modo oscuro profesional. Añade una sección de 'Proyectos actuales' que pueda editar fácilmente."
• Aplicación: Genera el sitio, luego solicita: "Añade un formulario de contacto que envíe las entradas a mi correo electrónico."
• Salida: Una URL alojada y activa lista para recibir tráfico en menos de 10 minutos.

Errores comunes

• Migración de código heredado: No intentes mover una base de código de producción de 20 años y miles de archivos a un agente de IA basado en navegador. Usa estas herramientas para proyectos greenfield o "módulos" aislados como paneles de administración y sitios de marketing.
• Sobrecargar el primer borrador: Evita escribir un prompt de 5 páginas para la primera versión. Comienza con la base del "clon de Spotify" y añade funciones una por una para evitar que la IA se confunda.
• Ignorar el determinismo: Recuerda que el código es determinista: o funciona o no. Si la IA produce una aplicación rota, verifica si el entorno (WebContainer) ha terminado de iniciarse antes de asumir que el código está mal.
• Tratarlo solo como un diseñador: No lo uses solo para UI. Aprovecha su capacidad para construir "Full Stack" (bases de datos, autenticación, APIs) para asegurarte de que el prototipo sea realmente funcional, no solo un mockup de alta fidelidad.