designdotmd.directory

designdotmd.directory: El directorio de identidades visuales para agentes de IA

La nueva plataforma que está redefiniendo cómo los agentes de código acceden y aplican sistemas de diseño.

¿Qué es designdotmd.directory?

designdotmd.directory es un directorio comunitario de archivos DESIGN.md, un formato de identidad visual diseñado específicamente para que los agentes de inteligencia artificial lo puedan leer e interpretar. La plataforma —actualmente en su versión v0.alpha— alberga más de 216 diseños catalogados y listos para instalar, convirtiéndose en el recurso central para cualquier developer o equipo que trabaje con agentes de código como Cursor, Copilot, Claude o similares.

La especificación DESIGN.md fue creada por Google y define un formato estándar basado en Markdown para describir la identidad visual de un proyecto: tipografías, paletas de color, espaciados, radios de bordes, componentes y más. Todo en un único archivo que cualquier agente de IA puede interpretar directamente.

Características principales

Un directorio amplio y bien categorizado

La plataforma organiza sus más de 200 identidades visuales en categorías muy diversas que van desde lo editorial, minimalista o técnico, hasta temáticas específicas como Gameplay, Fashion, Finance, Healthcare, Food, Travel, Music, Architecture o Wellness. Además, dispone de etiquetas estéticas cruzadas como Dark, Warm, Cool, Organic, Brutalist, Retro, Soft o Bold, lo que permite encontrar exactamente el tono visual que necesita cada proyecto.

Sección "Known Brand"

Uno de los aspectos más destacados es la colección de diseños inspirados en marcas conocidas del mundo real. La plataforma incluye identidades para marcas como Apple, Nike, Spotify, Stripe, Figma, Tesla, Ferrari, Lamborghini, Airbnb, NVIDIA, Starbucks o PlayStation, entre muchas otras. Cada una está adaptada al formato DESIGN.md para que cualquier agente pueda implementar el estilo visual de referencia directamente en un proyecto.

Vista previa interactiva de cada diseño

Cada entrada del directorio ofrece una vista previa en tiempo real del diseño aplicado a distintos tipos de interfaz: una pantalla de "Kitchen sink" (componentes base), Landing Page, Ecommerce y Event, tanto en resolución de escritorio (1440×900) como en móvil (390×844). Esto permite evaluar visualmente el sistema antes de instalarlo.

El archivo DESIGN.md visible y copiable

En la página de detalle de cada diseño, la plataforma muestra el archivo DESIGN.md en formato raw, con todos sus tokens: colores (primary, secondary, tertiary, neutral, surface), tipografía (display, h1, body, label), espaciados, radios de borde y estilos de componentes como botones o tarjetas. El archivo puede copiarse directamente desde la interfaz web.

Búsqueda y filtrado avanzado

La plataforma incluye una barra de búsqueda por nombre de diseño y un sistema de filtros por categorías horizontales, lo que permite navegar de forma rápida e intuitiva entre los cientos de opciones disponibles.

Sección "Featured"

Cada semana, la plataforma destaca los diseños más relevantes o interesantes en una sección especial llamada "This week's standouts", facilitando el descubrimiento de nuevas identidades visuales.

Favoritos y cuenta de usuario

Los usuarios registrados pueden guardar sus diseños preferidos en una sección de favoritos, y la plataforma ofrece inicio de sesión para gestionar el historial personal.

La CLI: instalación en un solo comando

Una de las ventajas más poderosas de designdotmd.directory es su herramienta de línea de comandos (CLI), diseñada tanto para desarrolladores humanos como para agentes de IA.

Con un solo comando es posible añadir cualquier DESIGN.md a un proyecto:

npx designdotmd add <id>

La CLI, llamada designdotmd, puede usarse sin instalación previa (npx) o instalarse globalmente con npm install -g designdotmd. Entre sus comandos principales están --help para explorar las opciones disponibles, category para listar y filtrar por categoría, list para ver el catálogo completo con descripciones, y add <id> para escribir el archivo DESIGN.md directamente en el directorio de trabajo. Admite flags como --out para especificar la ruta de salida y --force para sobrescribir archivos existentes.

Ventajas de la plataforma

Pensada para el desarrollo moderno con IA. El formato DESIGN.md nació para que los agentes de código entiendan el sistema visual de un proyecto sin necesidad de leer código fuente, Figma o documentación dispersa. Centraliza en un archivo lo que antes requería horas de onboarding visual.

Instalación instantánea. Pasar de "ningún sistema de diseño" a "identidad visual completa en el proyecto" es cuestión de segundos. Un comando de terminal deposita el archivo en el repositorio y cualquier agente comienza a aplicar los tokens de forma consistente.

Cero fricción de adopción. No requiere plugins, extensiones ni integraciones complejas. Al ser un archivo Markdown plano, funciona con cualquier editor, agente o flujo de trabajo existente.

Amplia variedad estética. Con más de 216 diseños que cubren desde estilos corporativos serios hasta identidades brutalists, retro, lúdicas u orgánicas, la plataforma tiene opciones para prácticamente cualquier tipo de proyecto.

Comunidad y crecimiento continuo. Aunque está en alpha, la plataforma ya acumula miles de instalaciones por diseño (algunos superan las 40.000), lo que refleja una adopción significativa. Además, permite que cualquier usuario cree y comparta su propia identidad visual mediante la función "Create custom DESIGN.md".

Basada en un estándar abierto de Google. Al apoyarse en la especificación pública de Google (google-labs-code/design.md), garantiza compatibilidad y longevidad frente a formatos propietarios.