Diseñar con IA y datos reales: cuándo y cómo entra Supabase en mi flujo

Conectar Supabase con Cursor, Google Antigravity y Google AI Studio no es un truco avanzado ni un paso final que se añade cuando todo está hecho. Es una decisión que condiciona cómo diseñas, cómo piensas la lógica y cómo validas un producto desde el principio.

Si te interesa el contexto completo y el porqué de este enfoque, aquí lo explico con más calma en este post sobre Vibe coding y Supabase.

En otro post hablo a fondo sobre vibe coding y creación de MVPs con IA.

Hoy quiero centrarme en una idea muy concreta: cómo unir el mundo del diseño con datos de verdad, no con mocks que solo sirven para salir del paso.

Puede que estés siguiendo “la moda” o puede que te haya llegado de refilón, pero el vibe coding no es algo puntual ni pasajero. El otro día comenté que Cursor y Google Antigravity ya son mis aplicaciones principales y no estaba exagerando. La forma de trabajar ha cambiado, y bastante.

Como ya te conté, cuando hablo de procesos con IA separo muy bien las fases: primero diseño, luego lógica y después refinado. Ese orden sigue siendo clave y, por ahora, no lo quiero cambiar.
Lo que sí ha cambiado es cómo preparo el terreno para que, cuando llegue el momento de usar datos reales, no tenga que rehacer trabajo.

Si, como yo, eres UX o Product Designer y estás cambiando tu forma de trabajar incorporando estas herramientas para escribir código en tu día a día, sigue leyendo.

Preparar la capa de datos desde el inicio

Durante bastante tiempo no preparé la capa de datos desde el inicio. Dejaba la conexión con la base de datos para el final del proceso y la trataba como algo secundario, algo que ya se resolvería cuando llegara el momento.

Con la práctica, y sobre todo a base de repetir errores, entendí que ese enfoque me hacía perder tiempo y rehacer trabajo que ya daba por cerrado. Por eso ahora hago justo lo contrario. No conecto Supabase (o Firebase) al principio para diseñar, pero sí lo preparo desde el minuto uno para no tener que rediseñar después.

Esto no cambia el orden del proceso. El diseño y la lógica siguen viniendo primero. La diferencia es que la estructura de datos ya está pensada desde el inicio, aunque no se active hasta más adelante.

Acercarme un poco al código fue parte del aprendizaje. No pasó nada por hacerlo; al contrario, en cierto modo estoy volviendo a mis inicios de carrera.

A partir de ahí, lo que hago es definir desde el inicio la configuración y la estrategia de conexión. No es nada mágico, pero sí conviene seguir un orden claro.

Conectar la base de datos con el diseño

El flujo que sigo para conectar Supabase con los diseños es bastante directo.

Primero creo el proyecto en Supabase y localizo los datos:

Project ID (Project Settings/General)
Api keys (Project Settings/API Keys/Legacy anon, service_role API keys)
Project URL (Project Settings/Data API)

Después, en el prompt inicial, no pego las claves directamente en el chat. Le pido a la IA que cree un archivo .env para guardarlas como toca.

A continuación solicito que instale el cliente de Supabase para JavaScript o TypeScript, según el stack que estemos usando.

Luego viene la inicialización, la IA genera el archivo para la conexión utilizando esas variables de entorno.

Y por último hago una comprobación simple: le pido una función para leer una tabla y verificar que los datos llegan al componente que he diseñado, ya sea en Figma, en CSS o donde toque.

Diseño UX con datos reales y lógica de producto

Personalmente, este es el punto que más me interesa de todo el proceso.

El vibe coding no va solo de estética. Diseñar ahora, más que nunca, también implica entender cómo fluyen los datos por las venas de tu aplicación o de tu sitio web.

Cuando le das acceso a Supabase a la IA en el momento adecuado, permites que construya componentes que ya nacen con lógica real dentro.

Esto te ahorra bucles de correcciones técnicas más adelante y te permite trabajar con más control sobre todo el flujo. No porque estés escribiendo más código, sino porque estás pensando el producto como un sistema completo desde el principio.

En fin…

Te animo a conectar tus diseños con Supabase u otras bases de datos. Es un proceso apasionante, al menos para mí.

Cuando das ese paso empiezas a controlar todo el flujo, de principio a fin, y dejas de ser “el que solo pinta pantallas”.