Resolviendo la deuda de diseño de las herramientas de IA con un solo archivo Design.md
makedream2026년 5월 8일
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
Con un par de prompts en una herramienta de codificación por IA, se puede obtener una página con una apariencia decente. El problema viene después. La curvatura de un botón recién generado es diferente a la de la página de al lado, y el color de la marca tiene una saturación ligeramente distorsionada. La velocidad de desarrollo es rápida, pero el resultado es tosco. Esto sucede porque, si la IA no conoce el contexto, ofrece el valor promedio más común. Para solucionar este problema, hay que insertar un archivo Design.md en la raíz del proyecto y forzar restricciones estrictas a la IA.
Pedirle a la IA que use un “azul sofisticado” es una pérdida de tiempo. La IA no se alimenta de adjetivos, sino de datos normalizados. Especifique el sistema de diseño dividiéndolo en tres capas: Primitiva (Primitive), Semántica (Semantic) y de Componente (Component).
blue-500: #3B82F6.bg-primary: var(--blue-500).[category]-[property]-[modifier] para que utilice nombres como $color-background-hover.Según un estudio de caso de colaboración en UI de 2025, los equipos que utilizaron estos tokens estructurados redujeron la tasa de errores de UI de 14 a 4 casos por sprint. Cuando la IA comienza a seleccionar clases basándose en la función en lugar de códigos de color, el 70% del tiempo de corrección de diseño desaparece. Si utiliza Tailwind CSS, ordene a la IA que mapee estos tokens uno a uno con tailwind.config.js.
Cuanto mayor es la libertad, más decisiones absurdas toma la IA. Para mantener márgenes consistentes en cada página, es necesario introducir los valores en forma de tabla dentro de la especificación.
| Propiedad | Valor | Regla de aplicación |
|---|---|---|
| Curvatura del botón | 8px | Fijo en rounded-lg, prohibido cambios arbitrarios |
| Espaciado de sección | 64px | Espaciado vertical entre todas las secciones principales |
| Ancho máximo | 1280px | Límite de alineación central para el contenido principal |
Limite las unidades de espaciado a múltiplos de 8px y fije el padding de las tarjetas en 24px. Es especialmente efectivo crear una sección de antipatrones. Si incluye prohibiciones como “No incluir más de 3 botones CTA en una pantalla” o “Usar un borde de 1px en lugar de sombras”, la IA descartará primero las opciones incorrectas antes de empezar a trabajar. Esta simple tabla reduce a más de la mitad el número de correcciones manuales.
Si el tono de voz varía según la función y los estilos de los iconos se mezclan, la aplicación parece de baja calidad. Especifique la personalidad de la marca en Design.md. Debe decidir de antemano si el mensaje de éxito será “Actualización completada” o “¡Todo listo!”.
Los iconos deben seguir el siguiente protocolo:
stroke-width de todos los iconos en 1.5px.Lo mismo ocurre con el modo oscuro. Invertir los colores simplemente arruina la legibilidad. Tal como recomiendan las guías de Material Design de Google, especifique el uso de un gris oscuro (#121212) en lugar de negro puro para el fondo, e incluya la fórmula para mantener la relación de contraste en para evitar automáticamente errores de accesibilidad.
De nada sirve escribir bien la especificación si la IA no la lee. Cree reglas específicas para la UI en el directorio .cursor/rules/ y obligue a la IA a consultar siempre Design.md antes de cualquier tarea. Según datos de desarrollo de 2025, los equipos que implementaron esta rutina redujeron el tiempo de desarrollo de funciones de un promedio de 12.5 horas a 8.1 horas.
Ahora, el desarrollador no corrige el código, sino que cambia la impresión general del servicio ajustando solo los valores del documento. El diseño no debe ser un área de intuición, sino de ingeniería de precisión para ganar velocidad. 30 minutos de documentación inicial evitan decenas de horas de trabajo infructuoso después.