Recrear el look de Apple, Stripe o Notion desde cero consume días de trabajo de diseño que la mayoría de founders no tienen. Awesome Design MD empaqueta los sistemas de diseño de 55 sitios famosos en archivos DESIGN.md listos para copiar al proyecto y pasarle a Claude como contexto. Ideal para indie hackers y equipos pequeños que quieren lanzar con una UI profesional sin contratar un diseñador.
Cuando lanzas un producto, el diseño importa más de lo que quieres admitir. No porque los usuarios sean superficiales, sino porque una UI que se siente profesional reduce la fricción cognitiva: el usuario confía más, explora más, convierte más. El problema es que construir un sistema de diseño coherente desde cero — colores, tipografías, espaciados, estados de botones, jerarquía visual — toma semanas. Semanas que un founder en modo lanzamiento no tiene.
Awesome Design MD resuelve esto de una forma elegante: extrae los sistemas de diseño de los 55 sitios web más reconocidos del mundo y los empaqueta en archivos de texto estructurados (DESIGN.md) que Claude puede leer e implementar directamente. El resultado es pasar de "quiero algo que se vea como Linear" a tener una landing page funcional con ese look en menos de una hora.
El repositorio contiene una carpeta design-md/ organizada por empresa. Cada empresa tiene tres archivos:
DESIGN.md — el sistema de diseño documentado: paleta de colores exacta, tipografías, tamaños, espaciados, estilos de botones, sombras, radios de bordepreview.html — previsualización del sistema en modo claropreview-dark.html — previsualización en modo oscuroEl flujo de trabajo es simple: elegís el sistema que querés usar, copiás el DESIGN.md a la raíz de tu proyecto, y le pedís a Claude que construya lo que necesitás usando ese sistema como referencia. Claude lee el archivo como contexto y genera código que respeta los tokens de diseño documentados.
Opción 1 — Clonar el repositorio:
git clone https://github.com/VoltAgent/awesome-design-md.git
Opción 2 — Descargar ZIP: disponible en GitHub para quienes no quieren clonar todo el repo.
Una vez descargado, navegar a design-md/[empresa]/ para explorar los archivos disponibles y abrir preview.html para ver cómo luce antes de decidir.
Los diseños cubren las categorías que más importan para productos digitales:
IA y Machine Learning: Claude, Cohere, OpenAI
Herramientas de desarrollo: Cursor, Linear, Vercel, Supabase
Infraestructura y pagos: Stripe, MongoDB, HashiCorp
Diseño y productividad: Figma, Notion, Webflow
Marcas de referencia visual: Apple, Uber, SpaceX, IBM
SaaS establecidos: Spotify, Slack, Twilio
La selección es estratégica: son los sistemas de diseño que más founders quieren imitar porque transmiten confianza, modernidad o autoridad en sus respectivos mercados.
El valor real no está solo en los archivos, sino en saber cómo instructarle a Claude que los use. Estos prompts funcionan directamente:
Landing page completa:
Lee el archivo DESIGN.md y crea una landing page responsive con secciones hero, features, pricing y footer usando exactamente ese sistema de diseño.
Página de pricing (estilo Stripe):
Usando DESIGN.md como referencia, construí una página de pricing con tres tiers, tabla de comparación de features y toggle mensual/anual.
Dashboard (estilo Notion):
Crea un dashboard con sidebar de navegación, cards de métricas, tabla de datos y header con búsqueda, siguiendo el sistema de diseño en DESIGN.md.
Rediseño de componente existente:
Tengo este componente: [pegar código]. Aplicá el sistema de diseño de DESIGN.md sin cambiar la funcionalidad.
Combinar sistemas: No hay ninguna regla que diga que tenés que usar un solo DESIGN.md. Podés tomar la paleta de colores de Stripe, la tipografía de Linear, y el sistema de espaciado de Apple. Le describís la combinación a Claude y él reconcilia los tokens. Funciona especialmente bien cuando querés un look que no sea genérico o que no se identifique inmediatamente con ninguna marca específica.
Personalizar después de aplicar: El flujo recomendado es aplicar primero el sistema base y después pedir los ajustes de marca: cambiar el color primario al tuyo, modificar el nombre de la empresa en los componentes, ajustar el tono del copy. Es mucho más rápido que construir desde cero con instrucciones parciales.
Usar como punto de referencia para auditar: Si ya tenés una UI construida y querés evaluar qué tan lejos está de un estándar profesional, podés pasarle a Claude tu código + un DESIGN.md de referencia y pedirle que identifique las discrepancias. Es una forma rápida de hacer un design review sin contratar a nadie.
Iteración rápida para demos y validación: Antes de comprometerte con un diseño propio, usar estos sistemas para prototipar diferentes looks en cuestión de horas te da información real sobre qué resuena con tus primeros usuarios. Un founder B2B puede probar el look de Linear vs. el de Notion en su dashboard antes de decidir cuál comunica mejor el posicionamiento del producto.
El sistema es tan bueno como el contexto que le das a Claude. Si tu proyecto tiene componentes complejos con lógica de estado específica, el DESIGN.md por sí solo no le va a decir a Claude cómo manejar esos casos. Tenés que complementarlo con descripciones de comportamiento.
Además, estos sistemas capturan el look estático de los sitios en un momento dado. Los sitios evolucionan, y el repositorio puede no reflejar rediseños recientes de marcas que iteran frecuentemente como Linear o Notion.
Por último, aplicar el sistema de diseño de Apple a tu SaaS B2B puede crear una disonancia con tu audiencia si Apple no es la referencia que tu usuario reconoce como "confiable" en tu categoría. La elección del sistema de diseño a imitar es también una decisión de posicionamiento.
Lo que no reemplaza es el diseño estratégico: la decisión sobre qué comunica tu marca, cómo se diferencia visualmente de la competencia, y qué sistema va a escalar cuando tengas un equipo de producto. Para eso todavía necesitás a alguien que piense, no solo que implemente.