Sistema de diseño para fundadores:no necesitas diseñador

Un sistema de diseño para fundadores es lo que permite que un producto construido con IA parezca profesional sin diseñador: design tokens, una biblioteca de componentes que es tuya y reglas que la IA puede seguir. He construido 1.480 componentes de producción y no he diseñado ni uno desde cero.

Paneles, formularios, tablas, modales, gráficos, asistentes de varios pasos. Todos parecen pertenecer al mismo producto. Todos funcionan en modo oscuro. Y nada de eso salió de talento para el diseño. Salió de tomar cada decisión de diseño exactamente una vez, y luego hacer que la IA la reutilice 1.480 veces.

Por qué importa un sistema de diseño para fundadores: las apps hechas con IA derivan hacia la incoherencia

Esta es la parte más difícil de construir con IA, y no es el código. Es la coherencia. La IA puede construirte una pantalla preciosa. Pero ¿encajará con las cien pantallas anteriores? ¿Los mismos colores, el mismo espaciado, las mismas formas de botón?

Sin un sistema, no. Pide tres botones en tres días distintos y obtienes tres azules distintos, tres rellenos distintos, tres radios de esquina distintos. Cada uno se ve bien solo. Juntos gritan «prototipo». Esto es deuda de diseño, y se acumula exactamente como la deuda técnica: cada pantalla nueva es una decisión de diseño nueva, y cada decisión nueva es una nueva oportunidad de derivar.

Un diseñador lo arreglaría imponiendo su gusto. Un sistema de diseño lo arregla eliminando la decisión por completo.

Design tokens: decide una vez, reutiliza en todas partes

Los design tokens son las constantes del aspecto de tu producto: una lista corta de valores aprobados que toda pantalla debe usar. En lugar de «algún azul», existe el color de marca. En lugar de huecos arbitrarios, una escala de espaciado. En lugar de tamaños de texto improvisados, una escala tipográfica.

El objetivo no es la estética: es que los tokens convierten el diseño de una cuestión de criterio en una consulta. Y la IA es espectacular con las consultas. Una vez que existen tus tokens, «hazlo bonito» pasa a ser «usa los tokens», una instrucción que la IA sí puede seguir.

shadcn/ui: componentes profesionales que son tuyos

Los tokens te dan los ingredientes. Para los componentes en sí uso shadcn/ui, y el motivo es específico del desarrollo con IA. No es una biblioteca de componentes tradicional que instalas como una caja negra sellada. Te da el código real de 77 componentes bellamente diseñados, totalmente accesibles y listos para producción (botones, formularios, diálogos, tablas, pestañas, avisos) que copias a tu propio proyecto. Son tuyos. Puedes cambiarlos.

Por qué importa: cuando un componente es una caja negra, la IA no puede ver dentro, así que inventa sus propios estilos a su alrededor. Cuando el código del componente vive en tu proyecto, la IA lo lee, aprende el patrón y construye componentes nuevos que encajan: la misma estructura, los mismos tokens, el mismo comportamiento. Configurarlo me llevó 15 minutos. Esas 77 primitivas se convirtieron en la base de los 1.480 componentes de funcionalidades, con la accesibilidad y el modo oscuro resueltos desde el primer día.

12 semanasTu carrera corporativa nunca fue el planSolicita plaza en el Solopreneur Accelerator.Solicitar ahora →

Variantes: enseña tus reglas a la IA

La última pieza son las variantes: versiones con nombre de cada componente para cada situación. Un botón no se estiliza a su aire; viene en un menú fijo: default, secondary, outline, ghost, danger. Pequeño, mediano, grande. Y ya está.

La recompensa es que el lenguaje sustituye al estilizado. Cuando le digo a la IA «crea un botón de borrar», sabe que debe usar la variante danger. Nadie elige un tono de rojo. Nadie elige un relleno. La decisión se tomó una vez, al definir la variante, y todos los botones de borrar del producto son idénticos para siempre.

El mismo principio de «decidir una vez» recorre toda la base de código, no solo la interfaz: es cómo un patrón escaló a 633 servicios en el lado de los datos. Y se combina con la otra mitad del pulido visual: gestionar los estados de carga, error y vacío que necesita toda pantalla. Sistema más estados es lo que hace que una app construida con IA se sienta como un producto.

Cómo darle instrucciones a la IA sobre tu sistema de diseño

Una vez que existe el sistema, toda petición de componente sigue la misma forma: nombra el patrón que copiar, nombra los tokens que usar, nombra los estados que gestionar. Algo así:

Crea una tarjeta de caso de éxito. Sigue el patrón de la tarjeta de métricas existente. Usa los tokens estándar de tarjeta, los tamaños estándar de texto de título y cuerpo y el color de marca para el fondo del icono. Incluye modo oscuro y accesibilidad por teclado, como el componente de referencia.

La IA genera un componente que encaja con tu producto a la primera, porque no le pediste que diseñara, le pediste que cumpliera. Tú eres el arquitecto; el sistema es tu código de edificación.

Para mantenerlo ajustado, hago una auditoría corta cada mes: busco colores fijos en el código que deberían ser tokens, espaciado aleatorio que debería estar en la escala, estilos de modo claro sin su pareja de modo oscuro y estilos puntuales repetidos que deberían convertirse en una variante. Treinta minutos al mes mantienen 1.480 componentes pareciendo un solo sistema.

Y hay un efecto acumulativo que nadie te cuenta: tu biblioteca de componentes son datos de entrenamiento para tu IA. Cada componente bien construido le enseña tus patrones. Tras 100 componentes, construye como tú. Tras 1.000, la deriva desaparece del todo.

El libroThe Solopreneur RevolutionLuis Gonçalves sobre cómo crear un negocio de solopreneur con IA sin dejar tu empleo.Consigue el libro →

Preguntas frecuentes

¿Necesito contratar a un diseñador para mi SaaS?

No para un producto construido en solitario. Un sistema de diseño (tokens, componentes propios, variantes con nombre) te da una interfaz profesional y coherente sin saber de diseño. Un diseñador compensa más adelante, para marca y marketing, no para mantener tus botones en el mismo tono de azul.

¿Qué son los design tokens, en lenguaje llano?

Una lista corta de valores de diseño aprobados: tus colores, tus tamaños de espaciado, tus tamaños de texto, lo redondeadas que son tus esquinas. Toda pantalla debe elegir de la lista en lugar de inventar valores. Convierte «hazlo bonito» en una regla que la IA puede seguir mecánicamente.

¿Qué es shadcn/ui y por qué es bueno para el desarrollo con IA?

Es una colección de 77 componentes de interfaz listos para producción cuyo código copias a tu propio proyecto en lugar de instalarlo como biblioteca sellada. Como el código es visible, la IA puede leerlo y replicar los patrones, de modo que los componentes nuevos encajan con los antiguos en lugar de inventar estilos nuevos.

¿Cómo evito que la IA invente estilos nuevos?

Referencia, no describas. Cada petición nombra un componente existente como patrón y los tokens que usar: «sigue el patrón de la tarjeta de métricas» vale más que cualquier adjetivo. Luego audita cada mes los colores fijos en el código y el espaciado fuera de escala, e incorpora los estilos repetidos a variantes con nombre.