Repolode
Enviar
VoltAgent

VoltAgent/awesome-design-md

Colección seleccionada de archivos DESIGN.md extraídos de sitios de marcas para que los agentes de programación con IA generen interfaces que se ajusten a esos sistemas de diseño.

Ver en GitHubSitio web
Estrellas
125,762
Forks
13,930
Issues abiertos
311
Último commit
hace 9 días

¿Qué es?

Awesome DESIGN.md es una colección de archivos DESIGN.md de texto sin formato, cada uno de los cuales describe el sistema de diseño visual de un sitio web o una marca específicos, incluidos colores, tipografía, componentes, diseño, profundidad y comportamiento adaptable. Cada entrada es un archivo Markdown que se puede colocar en la raíz de un proyecto para que un agente de programación con IA lo lea y cree una interfaz con el mismo lenguaje visual.

La colección abarca aproximadamente 84 sitios de categorías como plataformas de IA, herramientas para desarrolladores, productos de backend y DevOps, fintech, comercio electrónico, medios y automoción. También incluye una pequeña selección de diseños web retro de las décadas de 1990 y 2000. Cada sitio incluye un DESIGN.md y páginas HTML de vista previa con muestras de color, escalas tipográficas, botones y tarjetas, en variantes claras y oscuras.

El formato DESIGN.md tiene su origen en Google Stitch. Los archivos cuentan con licencia MIT como parte del repositorio, y los mantenedores indican que los tokens extraídos son valores CSS visibles públicamente y que no reclaman la propiedad de la identidad visual de ningún sitio.

Funciones clave

  • 01Ofrece archivos DESIGN.md listos para usar para decenas de sitios de marcas.
  • 02Cada archivo abarca colores, tipografía, componentes, diseño, elevación y reglas de adaptación.
  • 03Incluye páginas HTML de vista previa con muestras de color, escalas tipográficas, botones y tarjetas.
  • 04Ofrece variantes claras y oscuras de la vista previa para cada sitio.
  • 05Sigue el formato DESIGN.md de Stitch, que consiste en Markdown sin herramientas especiales.

Casos de uso

  • Copiar el DESIGN.md de una marca en un proyecto y pedirle a un agente de IA que cree una página con ese estilo.
  • Estudiar cómo estructuran sus tokens de diseño y reglas de componentes sitios conocidos.
  • Generar interfaces de estilo retro a partir de la colección de las décadas de 1990 y 2000.
  • Mantener la coherencia visual de las interfaces generadas por IA en todo un proyecto.

Inicio rápido

  1. 1

    Elige un DESIGN.md de la colección de getdesign.md

  2. 2

    Copia el archivo DESIGN.md en la raíz de tu proyecto y pídele a tu agente de IA que cree una página que siga ese diseño

En colecciones

Asistentes y agentes de programación con IA

Temas

#design-system#design-tokens#ai-coding#ui-generation#awesome-list#css#vibe-coding#design-md#figma#landing-page

Preguntas frecuentes

¿Qué es awesome-design-md?
Colección seleccionada de archivos DESIGN.md extraídos de sitios de marcas para que los agentes de programación con IA generen interfaces que se ajusten a esos sistemas de diseño. Awesome DESIGN.md es una colección de archivos DESIGN.md de texto sin formato, cada uno de los cuales describe el sistema de diseño visual de un sitio web o una marca específicos, incluidos colores, tipografía, componentes, diseño, profundidad y comportamiento adaptable. Cada entrada es un archivo Markdown que se puede colocar en la raíz de un proyecto para que un agente de programación con IA lo lea y cree una interfaz con el mismo lenguaje visual.
¿awesome-design-md es gratuito? ¿Qué licencia tiene?
awesome-design-md es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿awesome-design-md sigue mantenido?
Mantenimiento activo. El último commit de awesome-design-md fue el 28 oct 2026.
¿Para qué puedo usar awesome-design-md?
Copiar el DESIGN.md de una marca en un proyecto y pedirle a un agente de IA que cree una página con ese estilo. Estudiar cómo estructuran sus tokens de diseño y reglas de componentes sitios conocidos. Generar interfaces de estilo retro a partir de la colección de las décadas de 1990 y 2000. Mantener la coherencia visual de las interfaces generadas por IA en todo un proyecto.
¿Cómo se instala awesome-design-md?
Elige un DESIGN.md de la colección de getdesign.md Copia el archivo DESIGN.md en la raíz de tu proyecto y pídele a tu agente de IA que cree una página que siga ese diseño
¿Dónde consigo awesome-design-md?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/VoltAgent/awesome-design-md

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados