Cómo crear un CRM con IA

Un CRM simple es más fácil de hacer bien si evitas intentar modelar todos los procesos de ventas a la vez. Empieza con lo mínimo que permita a un equipo seguir relaciones y próximos pasos.

Para una primera versión, define:

• Usuarios: solo tú, o un pequeño equipo interno
• Registros principales: contactos, empresas, oportunidades
• Acciones: crear, editar, buscar, filtrar, añadir notas
• Vistas: panel, contactos, empresas, oportunidades, detalle de contacto

Escribe qué debe hacer cada pantalla.

Un primer conjunto práctico de pantallas se ve así:

• Panel: totales de contactos, oportunidades abiertas, oportunidades que cierran este mes
• Contactos: tabla con nombre, empresa, email, teléfono, estado, fecha del próximo seguimiento
• Empresas: lista de empresas con sector y responsable
• Oportunidades: lista tipo pipeline o tabla simple con etapa y valor
• Detalle del registro: notas, actividad reciente, empresa u oportunidad relacionada

Decide también qué no necesita estar en la versión uno. Ejemplos comunes son la sincronización de correo, la sincronización del calendario, los permisos por rol, las herramientas de importación y los informes más allá de unas pocas tarjetas de resumen.

La IA puede escribir una primera versión decente de la interfaz, pero la app será más fácil de mejorar si la estructura de datos está clara desde el principio.

Para un CRM ligero, mantén el esquema simple:

• contacts: id, first_name, last_name, email, phone, company_id, status, next_follow_up, notes
• companies: id, name, industry, website, owner, notes
• deals: id, name, company_id, contact_id, stage, value, expected_close_date, notes

Si más de una persona va a usar el CRM, añade inicio de sesión y piensa en campos de propiedad como created_by o assigned_to.

Si el CRM es solo para uso interno y no cobra a clientes, probablemente no necesitas pagos. Stripe solo importa si tu propio CRM necesita acceso de pago, facturas o un flujo de compra.

Este también es el momento de elegir entre web o móvil primero. La mayoría del trabajo en un CRM es más fácil de revisar en escritorio, así que un sitio web es el punto de partida sensato. En Moremade, los sitios se generan como código real en React + Tailwind.

El primer prompt debe describir el producto, las pantallas principales, el estilo y el comportamiento. Sé lo bastante específico como para que la app generada tenga estructura, pero no tanto como para tardar más escribiendo el prompt que probando el resultado.

Un buen primer prompt nombra:

• el tipo de app
• quién la usa
• las entidades principales
• las pantallas
• los campos que deben mostrarse
• el estilo visual
• si usar datos simulados primero o conectar datos reales ahora

Ejemplo de primer prompt:

Crea una app web de CRM interno simple para un pequeño equipo de ventas. Usa un diseño limpio y profesional con una barra lateral izquierda y una barra superior de búsqueda. Crea pantallas para Panel, Contactos, Empresas, Oportunidades y una vista de Detalle de Contacto. Usa datos simulados primero. Los contactos deben incluir nombre, empresa, email, teléfono, estado y fecha del próximo seguimiento. Las empresas deben incluir nombre, sector, sitio web y responsable. Las oportunidades deben incluir nombre, empresa, contacto, etapa, valor y fecha prevista de cierre. Añade formularios para crear y editar registros, además de controles de búsqueda y filtro. Usa React y Tailwind con una interfaz empresarial práctica.

En Moremade, describes la app en lenguaje natural, el agente de IA escribe el código fuente y puedes revisar una vista previa en vivo de inmediato.

La primera versión suele ser un borrador, no la forma final. El hábito útil es cambiar una sola área a la vez: diseño, columnas de la tabla, formularios, navegación o detalle del registro.

Moremade ofrece una vista previa en vivo, un inspector visual para señalar elementos y cambiarlos, y una vista de código. Eso facilita ajustar la UI sin reescribir todo el briefing.

Usa prompts de seguimiento cortos y específicos. Por ejemplo:

• "Cambia la pantalla de Contactos a un diseño de tabla más denso con columnas ordenables para nombre, empresa, estado y fecha del próximo seguimiento. Mantén acciones por fila para editar y ver."
• "Añade un panel lateral de detalle al hacer clic en una fila de contacto. Muestra notas, empresa relacionada, oportunidades relacionadas y una cronología de actividad reciente con entradas simuladas."
• "Convierte la página de Oportunidades en un tablero kanban con columnas para Lead, Calificado, Propuesta, Negociación y Ganado. Mantén un conmutador a tabla para los usuarios que prefieren la vista en lista."

Algunas comprobaciones prácticas en esta fase:

• ¿Las etiquetas son coherentes entre pantallas?
• ¿Los formularios de crear y editar usan los mismos nombres de campos?
• ¿Se puede buscar por persona y empresa?
• ¿La información importante es visible sin abrir cada registro?
• ¿La app parece una herramienta interna y no un sitio de marketing?

Si algo falla en un componente, pide esa corrección concreta en lugar de solicitar una reconstrucción completa.

Una vez que la versión con datos simulados se sienta bien, conecta datos reales. Moremade tiene un conector integrado para Supabase, que cubre base de datos, inicio de sesión y almacenamiento de archivos.

Para la mayoría de los CRM, Supabase es el siguiente paso lógico porque necesitas registros persistentes y normalmente alguna forma de autenticación.

En esta etapa, pide:

• tablas de Supabase para contactos, empresas y oportunidades
• formularios conectados para crear y actualizar registros
• páginas de lista conectadas para obtener datos
• inicio de sesión básico si más de una persona va a usarlo
• relaciones entre registros, como que un contacto pertenezca a una empresa

Mantén sencilla la primera configuración de auth. Email y contraseña suele ser suficiente para un CRM interno.

Añade Stripe solo si tu app realmente necesita pagos. Un CRM interno normalmente no los necesita. Si estás creando un CRM orientado a clientes o un portal de pago, Moremade puede conectar Stripe checkout con los precios que definas, pero no debería formar parte de la versión por defecto salvo que haya un requisito claro.

Aunque la experiencia principal sea de escritorio, la gente seguirá abriendo un CRM en el teléfono para consultar un número, actualizar una oportunidad o añadir una nota después de una reunión.

Haz algunas tareas realistas en la vista previa:

• añadir un nuevo contacto
• buscar una empresa
• actualizar la etapa de una oportunidad
• editar la fecha del próximo seguimiento
• abrir una página de detalle de registro y añadir notas

En móvil, céntrate en lo básico:

• la navegación se puede alcanzar fácilmente
• las tablas no se vuelven ilegibles
• las acciones clave son visibles sin desplazamiento horizontal cuando sea posible
• los formularios son utilizables con toques
• los campos de fecha y los desplegables son fáciles de pulsar

Si el móvil importa mucho, pide a la IA que adapte el diseño para pantallas pequeñas. Si más adelante necesitas una app móvil dedicada, Moremade puede generar apps en React Native (Expo), pero muchas equipos deberían validar primero el CRM como app web.

Cuando la app sea usable, publícala. Moremade puede publicar con un clic en un subdominio gratuito yourname.moremade.ai. En los planes de pago, puedes conectar un dominio personalizado, y también se pueden comprar dominios dentro de Moremade.

Antes de publicar, comprueba:

• títulos de página y etiquetas de navegación
• estados vacíos cuando no hay contactos o oportunidades
• estados de error en formularios
• si los datos de prueba siguen visibles
• si el inicio de sesión es obligatorio para datos privados

Errores comunes que conviene evitar:

• Empezar demasiado grande: los equipos suelen pedir pipelines, informes, permisos, importaciones y automatización en el primer intento. Construye primero un núcleo limpio.
• Saltarse el modelo de datos: si contactos y empresas no están definidos con claridad, la UI se vuelve inconsistente rápidamente.
• Usar prompts vagos: frases como "hazlo mejor" producen resultados más débiles que nombrar exactamente la pantalla y el cambio.
• Añadir pagos sin motivo: Stripe es útil cuando hace falta, pero muchos CRM no lo necesitan.
• Publicar datos simulados por accidente: cambia a datos reales de Supabase antes de compartir la app internamente.

Puedes exportar el código fuente completo como un ZIP en cualquier momento o enviarlo a GitHub, así que no quedas atado a alojar la app solo dentro de Moremade.