La especificación del sistema de diseño de Vercel es, sin duda, un ejemplo de manual de lo que he visto.
Hoy, estudié a fondo su DESIGN.md. Con temas claro y oscuro, describe completamente colores, fuentes, espaciado, componentes, movimiento y reglas de redacción, convirtiéndolo en una metodología de diseño ejecutable.
Siento que puedo seguir este camino para el design.md de todos mis productos futuros.
Los detalles están aquí:
Algunos amigos quizás no tengan claro qué es DESIGN.md. En pocas palabras, es una especificación de diseño para que la IA la lea. Cuando la IA nos ayuda a escribir código, necesita saber qué colores usar, qué tamaños de fuente aplicar y el espaciado entre elementos.
Sin este archivo, las interfaces que produce la IA se ven diferentes cada vez, con un estilo inconsistente.
Después de leer el DESIGN.md de Vercel, me di cuenta de que un buen DESIGN.md es mucho más que solo decirle a la IA qué códigos hex o tamaños de fuente usar. Representa un conjunto completo de pensamiento de diseño. Realmente cambió mi percepción.
Hoy, desglosaré por qué este archivo es tan bueno.
1
Primero, hablemos del color.
Cuando empecé a escribir DESIGN.md, la sección de color era muy simple. Listaba algunos valores de color, le decía a la IA cuál era el color primario, secundario y de acento, y eso era básicamente todo.
Pero escribiéndolo así, la IA aún no sabe cómo estos colores se corresponden con diferentes estados de interacción.
Por ejemplo, para un botón, ¿de qué color debería ser el estado predeterminado? ¿Cuánto más oscuro debería ponerse al pasar el ratón? ¿De qué color debería ser en el momento en que se hace clic? Si estos detalles no están definidos explícitamente, los resultados generados por la IA pueden diferir cada vez.
El enfoque de Vercel resuelve este problema por completo.
En su sistema de diseño, cada serie de colores se divide en 10 degradados del 100 al 1000, y cada número corresponde a un estado de interfaz fijo.
El 100 es el fondo predeterminado para los elementos, el 200 es el fondo al pasar el ratón, y el 300 es el fondo al hacer clic. Subiendo, el 400 es el borde predeterminado, el 500 es el borde al pasar el ratón, y el 600 es el borde al hacer clic.
El 700 se usa para bloques de color sólido, como etiquetas o el botón en sí; el 800 es el estado al pasar el ratón para estos bloques. El 900 se usa para texto secundario e iconos, y el 1000 se usa para texto primario e iconos.
Parece solo una numeración, pero detrás hay una lógica de interacción completa.
Del 100 al 300 gestionan los estados de fondo. Del 400 al 600 gestionan los estados de borde. El 700 y 800 gestionan los estados de bloque de color sólido. El 900 y 1000 gestionan la jerarquía de la información.
En otras palabras, Vercel le está diciendo a la IA que hay varios estados aquí. El color es solo la manifestación de estos estados.
Los beneficios de esto son muy directos.
Cuando la IA escribe código, no necesita adivinar cuánto más oscuro debe ponerse un botón al pasar el ratón, ni necesita adivinar cómo debe cambiar el borde. El estado predeterminado corresponde al 100, el de pasar el ratón al 200, y el de clic al 300; las reglas están predefinidas.
Además, sobre esta base, Vercel proporciona temas claro y oscuro, pero usa exactamente los mismos nombres de Token.
Por ejemplo, gray-1000. En el tema claro, es #171717, cercano al negro puro. En el tema oscuro, se convierte en #ededed, cercano al blanco puro.
Para un sistema de diseño, estos dos colores son en realidad la misma cosa.
Ambos representan la información más importante en la página. Los desarrolladores y la IA, al generar interfaces, se centran en el significado semántico de gray-1000, no en el valor hex específico detrás de él. Cuando el tema cambia, el sistema mapea automáticamente este significado semántico al color correspondiente.
2
Después de resolver el problema del color, otra restricción más importante es el ritmo de la página.
El sistema de espaciado de Vercel se basa en múltiplos de 4px, proporcionando solo 9 valores en total: 4, 8, 12, 16, 24, 32, 40, 64, 96. Todo el espaciado en todo el producto se elige de estos números.
Mi primera reacción fue que parecía un poco limitado. ¿Qué pasa si necesito 20px? ¿Qué pasa si necesito 28px?
Le pregunté a un amigo diseñador, y dijo que para la gran mayoría de los productos, 9 estilos de espaciado son básicamente suficientes.
Si hay demasiadas opciones de espaciado, se pierde el ritmo de la página. Muchos sitios web terribles tienen diseños de espaciado muy caóticos. Esto es en realidad un gran tabú en el diseño de productos.
Los sistemas de diseño excelentes no dan opciones infinitas; limitan activamente las opciones.
Vercel proporciona directamente un conjunto claro de sugerencias de ritmo: mantener 8px entre elementos dentro de un grupo, 16px entre grupos, y 32 a 40px entre secciones. Esto es, de hecho, definir el ritmo de respiración de la página.
Los usuarios quizás no noten estos espacios, pero sentirán naturalmente qué partes pertenecen al mismo todo y dónde comienza una nueva área de contenido.
A menudo, una página se ve cómoda no porque el diseñador haya usado alguna técnica avanzada, sino porque este ritmo se mantiene consistente en toda la página.
La tipografía sigue la misma lógica.
El sistema de fuentes de Vercel es idéntico a la lógica del color y el espaciado.
Todo el texto se categoriza en varios roles fijos: encabezado, etiqueta, cuerpo y botón.
Bajo cada rol, se proporcionan Tokens de diferentes tamaños, y cada Token tiene fuente, tamaño, peso, altura de línea y espaciado entre letras predefinidos.
Anteriormente, al enfrentarse a un texto, un diseñador podría pensar si usar 14px o 15px y qué altura de línea era apropiada.
Con un sistema de diseño, la forma de pensar cambia. La IA primero determina qué rol juega este texto. ¿Es un encabezado, texto del cuerpo o información secundaria? Una vez que se determina el rol, el estilo correspondiente también se determina.
Pasando de una mentalidad de tamaño de fuente a una mentalidad basada en roles. De la toma de decisiones visual a la toma de decisiones semántica. Aquí es donde reside el verdadero valor de un sistema de diseño. Brillante.
Al ver esto, te das cuenta de que, ya sea espaciado o fuentes, Vercel está haciendo lo mismo: reducir el juego libre durante la fase de ejecución tanto como sea posible, con reglas determinadas de antemano, por lo que la ejecución solo requiere elegir un rol.
Esto es cierto para los diseñadores, para los desarrolladores y para la IA.
3
Además, la redacción también se trata como una parte importante de la especificación de diseño de Vercel. Esta es la parte que más fácilmente falta en la mayoría de los archivos DESIGN.md.
Vercel define estos detalles de manera muy específica.
Por ejemplo, el texto de un botón debe ser una acción más un objeto. Como "Desplegar Proyecto" o "Eliminar Miembro". No puedes simplemente escribir palabras vagas como "Desplegar", "Aceptar" o "Eliminar".
La razón es simple. Al ver "Eliminar", el usuario aún necesita pensar qué se está eliminando exactamente. Con una acción y un objeto, el usuario puede formarse inmediatamente una comprensión completa.
Los mensajes de error son similares. Las reglas de Vercel son claras. Primero, dile al usuario qué pasó. Luego, dile al usuario qué hacer a continuación.
Por ejemplo, si una compilación falla porque el archivo del paquete excede el límite de tamaño, la solución es reducir el tamaño o ajustar el límite. Después de leer tres oraciones, el usuario sabe inmediatamente dónde está el problema y qué hacer a continuación.
Las indicaciones de error en muchos productos son "Operación fallida, intente de nuevo más tarde". El contenido informativo de tal indicación es casi cero. La única información que el usuario obtiene después de leerla es que falló. En cuanto a por qué falló y qué hacer a continuación, todavía tienen que adivinar.
Las especificaciones de redacción en un sistema de diseño esencialmente reducen esta adivinanza.
Vercel también estandarizó los mensajes de notificación después de que se completa una operación, que solo necesitan indicar qué cambio ocurrió. Por ejemplo, "Proyecto eliminado", no "Proyecto eliminado exitosamente".
Porque el hecho de que el cuadro de aviso pueda aparecer ya indica que la operación está completa. La palabra "exitosamente" es información redundante.
A continuación, el movimiento.
Esta parte es particularmente interesante porque es exactamente lo opuesto a mi intuición. Pensaría que cuanta más animación, más refinado es el producto.
Por lo tanto, agregar un poco de animación a un botón al pasar el ratón o a un menú emergente parece hacerlo ver de alta gama. Muchos productos de Vibe Coding ahora parecen estar yendo en esta dirección.
Pero la actitud de Vercel es completamente diferente. Incluso escribieron explícitamente que en muchos escenarios de interacción, 0 milisegundos es a menudo la mejor opción. En otras palabras, sin animación, completado instantáneamente.
Si un botón cambia de un estado predeterminado a un estado al pasar el ratón, este cambio ya es lo suficientemente claro. La mejor retroalimentación es que ocurra de inmediato; agregar una capa extra de animación hará que la interfaz se sienta lenta.
Por supuesto, algunos escenarios requieren movimiento.
Por ejemplo, una ventana emergente que aparece de repente. Si no hay transición en absoluto, la gente no sabrá de dónde vino. Aquí es donde la animación tiene valor.
Vercel incluso especifica la duración para diferentes escenarios. Los cambios de estado normales son de aproximadamente 150 milisegundos, los popovers de aproximadamente 200 milisegundos y los modales de aproximadamente 300 milisegundos.
Cuanto mayor es el cambio, más tiempo de reacción se da. Cuanto menor es el cambio, más directa es la retroalimentación.
La lógica detrás es siempre la misma: no te muevas si no es necesario, y cuando debas moverte, hazlo rápido, ligero y contenido.
La última parte que me dejó una profunda impresión es la accesibilidad.
Para ser honesto, rara vez presté especial atención a esta parte antes. Porque la mayoría de las veces, mientras la interfaz de un producto se vea bien y las funciones funcionen, parece suficiente. Pero Vercel escribió esta parte muy en serio.
Requieren suficiente contraste entre el texto y el fondo. Los cambios de estado no pueden depender únicamente del color; deben combinarse con iconos o descripciones de texto.
Todos los elementos interactivos deben tener un estado de enfoque claro y no se pueden eliminar por el bien de la limpieza visual.
Estas reglas significan que el sistema de diseño sirve a todos, incluyendo a personas con baja sensibilidad al color, aquellas que navegan con un teclado y aquellas que miran sus teléfonos bajo luz brillante.
Este DESIGN.md es demasiado profesional. Creo que cuando todos hagan nuevos productos en el futuro, pueden escribir su propio DESIGN.md basándose en las ideas de estos dos archivos MD.
