Volver a inicio
Vista previa de Riffims

Lo difícil no fue construirlo. Fue decidir lo que no era.

Riffims. Coach de lanzamiento para músicos independientes. Producto, diseño, ingeniería y deploy, sola, en producción en menos de tres meses.

Design EngineerProyecto propio2026

Cinco herramientas, cero proceso. Ninguna te enseña.

Un artista independiente que quiere lanzar música hoy necesita una DAW para grabar, una distribuidora para subir, una herramienta de diseño para la portada, una hoja de cálculo para planificar fechas y un buscador para averiguar qué significa ISRC o splits. Cinco herramientas que no se hablan entre sí, y ninguna que le diga por dónde empezar.

El problema no es que falten herramientas. La mayoría de artistas independientes ya tiene acceso a todo lo que necesita y aun así no sabe en qué orden usarlo. No conocen los procesos de la industria ni su vocabulario, y no tienen un equipo a quien preguntar. Las distribuidoras reciben la canción y callan sobre el resto. Los tutoriales responden una pregunta cada vez y dan por hecho que ya sabes cuál preguntar.

Esto no lo investigué desde fuera. Soy artista independiente, y las personas más importantes de mi vida también lo son. El desorden que describe este proyecto es el que llevo años viendo de cerca.

Lo que falta es un orden. Esa es la premisa de Riffims, y también la hipótesis que este proyecto todavía tiene que validar.

Un coach, no una distribuidora

La primera decisión de verdad fue por sustracción. Riffims no es una distribuidora, no es una DAW, no es un gestor de redes. No recibe la canción y no la publica en ningún sitio. Es un coach que acompaña el lanzamiento completo y enseña la industria mientras lo hace.

Esa restricción hizo la mayor parte del trabajo durante los tres meses siguientes. Cada idea que se me ocurrió para el producto se midió contra ella, y las que habrían convertido a Riffims en una quinta herramienta desconectada se cayeron antes de diseñarlas.

Pantalla de login de Riffims y home con el path de misiones en móvil
Login y path de misiones en móvil.

Diez niveles, tres fases.

Diez niveles organizados en tres fases. Producción cubre la preparación de la canción y la identidad visual; lanzamiento cubre propiedad intelectual, distribuidora, campaña y prensa; post-lanzamiento cubre mantener el impulso y leer métricas. Cada nivel tiene subtareas, tips contextuales, preguntas de reflexión y acceso directo al asistente IA. El progreso se trackea por lanzamiento, así que un artista puede tener un single en el Nivel 8 y un EP en el Nivel 2 al mismo tiempo, con cuatro badges que se desbloquean en umbrales del recorrido.

Badges diseñados en Figma.

Por qué ese orden.

La secuencia es el producto. Un artista que no sabe dónde está su proyecto hoy no debería estar eligiendo distribuidora. Hacer inevitables las preguntas fundamentales es lo que evita los tres fallos que hunden la mayoría de lanzamientos independientes, que son salir sin portada, sin registro de propiedad intelectual o sin plan de comunicación. Eso también convierte al orden en lo más arriesgado del producto. Codifica mis suposiciones sobre cómo trabajan los artistas de verdad, y es la parte con más probabilidades de estar equivocada. Vuelvo a esto al final, porque es donde está el trabajo que queda.

Tres roles, tres entradas.

Artista solo, banda y manager tienen entradas distintas. Solo y banda pasan por seis pasos. Un manager pasa por tres, porque un manager no necesita elegir sus propios géneros ni un emoji de artista. Después gestiona hasta tres perfiles de artista, cada uno con lanzamientos y progreso de misiones independientes, aislados a nivel de base de datos y no escondidos en la interfaz.

Enseñar en vez de explicar.

El Nivel 3 le pide al artista su identidad visual, y es donde más gente se atasca. Una portada se aprueba mirándola grande en el ordenador y se juzga diminuta en una lista de reproducción. Cover Preview la enseña dentro de un reproductor real, con hasta cuatro versiones en paralelo y el título y el nombre editables en vivo. La decisión es la misma que rige el resto del producto. En lugar de explicarle al artista que su portada tiene que funcionar pequeña, se la enseño pequeña. Riffims enseña haciendo, no dando consejos.

168 tokens, 12 componentes, cero librerías de UI

Angular Material y PrimeNG eran opciones razonables y descarté las dos. Adoptar una librería significa heredar una identidad visual y después pelearte con ella, que para un producto construido alrededor de un tono concreto es un mal trato aunque el primer día vayas más rápido.

Así que el sistema es propio. 168 tokens en SCSS, con escala de espaciado de 4px, 16 tamaños tipográficos sobre nueve pesos, una rampa neutral de 50 a 950, cuatro escalas semánticas de nueve tonos cada una, color de marca en #FF5E2D, más sombras, radios, z-index, transiciones y cinco breakpoints. Encima, 12 componentes compartidos, 7 base y 5 especializados, y 43 iconos SVG dibujados para este producto.

Mobile-first de verdad, no solo en los breakpoints. La navegación inferior en móvil pasa a sidebar fija en escritorio, y Riffi cambia de página completa a panel lateral. La misma información, ordenada para el dispositivo desde el que se sostiene.

Aquí sí está bien resuelto lo que en las misiones se quedó a medias, porque las decisiones visuales viven en la capa de tokens y cambiar la marca es una edición en un archivo y no en 55 hojas de estilo.

La API key nunca llega al cliente

Riffi es el asistente IA, y no es una ventana de chat pegada a un lado. Está integrado en el flujo de misiones con tres modos fijos, un consejo práctico de industria, una definición de terminología y una idea de promoción para redes.

La arquitectura pone la frontera donde toca. El componente Angular llama a una Edge Function de Supabase sobre Deno, y esa función llama a Gemini desde el servidor. La API key no existe nunca en el navegador. El contexto se limita a los últimos 20 mensajes, suficiente para mantener coherencia sin gastar tokens en historial que nadie necesita.

El Riffionario reutiliza esa misma frontera para otra cosa. Es un diccionario curado de 53 términos de industria en cinco categorías, con búsqueda con debounce, historial reciente y ranking por popularidad. Cuando un término no está, un botón de "preguntarle a Riffi" genera la definición a través de la misma Edge Function, y cada búsqueda se registra en los dos casos. Los huecos del diccionario me dicen qué escribir después, lo que convierte un fallback en una hoja de ruta de contenido.

Por debajo hay siete tablas PostgreSQL con Row Level Security en todas, guards encadenados que hacen imposible entrar a la app sin terminar el onboarding o volver a él una vez completado, y borrados en cascada para que eliminar un perfil de artista no deje lanzamientos huérfanos.

La documentación como línea base

Trabajé sin equipo de diseño, sin product manager y sin nadie que discutiera una decisión antes de que llegara al código. La validación fueron conversaciones con músicos independientes a los que conozco, no testing de usabilidad. Con tres meses por delante, escribir el razonamiento fue lo que evitó que cada semana empezara replanteándome la anterior.

Quedaron más de 30 documentos de especificación. No son entregables académicos, son el punto de partida del producto, porque cuando vuelva a tocar el orden de las misiones o el onboarding no arranco de cero, arranco de por qué lo dejé así. Nació como TFM del máster en la UOC y lo construí como producto igualmente. Esa base es la razón de que hoy tenga hacia dónde seguir y no solo una entrega cumplida.

Lo que recorté y lo que no

Lo más difícil no fueron las Edge Functions ni el RLS. Fue recortar. La visión original tenía calendario de lanzamientos, notificaciones push, streaming de respuestas de IA, persistencia de conversaciones y analytics avanzados. Todas habrían mejorado la experiencia del artista, y todas se cayeron. Lo que salió a producción es el sistema de misiones, el asistente y las dos herramientas que quitan fricción de forma inmediata.

Herramienta Cover Preview con cuatro versiones de portada en paralelo, y el panel del asistente IA Ask Riffi
Cover Preview y el asistente IA.

La regla fue simple, recorta lo que haga falta pero no recortes la secuencia. Un calendario de lanzamientos es una buena feature dentro de un producto que ya te enseña qué fechas importan. Sin las misiones, es una hoja de cálculo con mejor tipografía.

Hubo un recorte que no fue de alcance sino de arquitectura, y es el que más peso tiene hoy. Las diez misiones viven como constantes tipadas en TypeScript. Fue lo que me permitió salir en tres meses con contenido consistente y tipado de punta a punta. También es la decisión que más limita al producto ahora mismo, y de ahí sale el trabajo que viene.

Ninguno de estos recortes se convirtió en deuda escondida. Se convirtieron en un roadmap escrito, que es otra cosa.

Impacto cuantificable

3

meses de cero a producción, en 10 sprints

168

tokens de diseño, más 12 componentes compartidos y 43 iconos

7

tablas PostgreSQL, con Row Level Security en todas

0

librerías de UI externas

Hacer que el producto pueda iterar

Riffims está en producción, pero el orden de los diez niveles sigue siendo una hipótesis mía. Lo diseñé desde conversaciones con músicos y desde cómo funciona la industria, no desde datos de uso. Puede que diez niveles sean demasiados para un single y se queden cortos para un álbum. Puede que seis pasos de onboarding sean demasiados antes de dejar ver nada. No lo sé todavía, y hoy el producto no puede averiguarlo rápido. El contenido de las misiones vive en constantes tipadas, así que cambiar una palabra de un tip es un deploy y probar dos versiones del recorrido con dos grupos de artistas es imposible.

El siguiente paso es llevar ese contenido a la base de datos, con versiones. Que un tip, una subtarea o el orden de dos niveles dejen de ser algo que se despliega y pasen a ser algo que se edita, se mide y se prueba. Entonces empiezan los números, tasa de completitud por nivel, en qué punto se cae la gente, con qué frecuencia el Riffionario tiene que recurrir a Riffi. Esos datos me dicen cuáles de estas decisiones acerté y cuáles adiviné. El resto ya está escrito, del streaming de respuestas al cumplimiento WCAG AAA.

Riffims es un MVP y lo trato como tal. Lo que viene es seguir investigando, diseñando y desarrollando hasta que sea una herramienta que le quite ruido a crear música y le explique la industria a quien quiere dedicarse a ella. Ese camino lo he recorrido y se lo veo recorrer cada día a la gente que más quiero. Por eso este proyecto no se acaba con la entrega.