La especificación del sistema de diseño de Vercel es realmente 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 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 todavía no sabe cómo estos colores se corresponden con diferentes estados de interacción.
Por ejemplo, para un botón, ¿de qué color debe ser el estado predeterminado? ¿Cuánto más oscuro debe volverse al pasar el ratón? ¿De qué color debe 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 completamente este problema.
En su sistema de diseño, cada serie de colores se divide en 10 gradientes del 100 al 1000, y cada número corresponde a un estado de interfaz fijo.
100 es el fondo predeterminado de los elementos, 200 es el fondo al pasar el ratón y 300 es el fondo al hacer clic. Subiendo, 400 es el borde predeterminado, 500 es el borde al pasar el ratón y 600 es el borde al hacer clic.
700 se usa para bloques de color sólido, como etiquetas o el propio botón; 800 es el estado al pasar el ratón para estos bloques. 900 se usa para texto secundario e iconos, y 1000 para texto principal 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 en realidad 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 volverse un botón al pasar el ratón, ni necesita adivinar cómo debe cambiar el borde. El estado predeterminado corresponde a 100, el de pasar el ratón a 200 y el de hacer clic a 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 hexadecimal 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. ¿Y si necesito 20px? ¿Y 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 desordenados. 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 de 32 a 40px entre secciones. Esto es, sin duda, 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 conjunto 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 podí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.
Pasar 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 al máximo el juego libre durante la fase de ejecución, con reglas determinadas de antemano, de modo que la ejecución solo requiera 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 los botones debe ser una acción más un objeto. Como "Desplegar Proyecto" o "Eliminar Miembro". No puedes escribir palabras vagas como "Desplegar", "Aceptar" o "Eliminar".
La razón es simple. Al ver "Eliminar", el usuario todavía tiene que 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 frases, el usuario sabe inmediatamente dónde está el problema y qué hacer a continuación.
Los avisos de error en muchos productos son "Operación fallida, inténtelo de nuevo más tarde". El contenido informativo de tal aviso es casi cero. La única información que el usuario obtiene después de leerlo es que falló. En cuanto a por qué falló y qué hacer a continuación, todavía tienen que adivinarlo.
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 con éxito".
Porque el hecho de que el cuadro de aviso pueda aparecer ya indica que la operación está completa. La palabra "con éxito" 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 al pasar el ratón sobre un botón o a la aparición de un menú parece hacer que se vea de alta gama. Muchos productos de Vibe Coding ahora parecen ir 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 al instante.
Si un botón cambia de un estado predeterminado a un estado de pasar el ratón, este cambio ya es lo suficientemente claro. La mejor retroalimentación es que ocurra inmediatamente; agregar una capa extra de animación hará que la interfaz se sienta lenta.
Por supuesto, algunos escenarios sí requieren movimiento.
Por ejemplo, una ventana emergente que aparece de repente. Si no hay transición, 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 unos 150 milisegundos, los popovers de unos 200 milisegundos y los modales de unos 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 con moderación.
La última parte que me dejó una profunda impresión es la accesibilidad.
Para ser honesto, rara vez prestaba 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 solo del color; deben ir acompañados de 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 el teclado y las que miran sus teléfonos con 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.
