Los Diseños de las 55 Páginas Web Más Famosas del Mundo — Gratis
Un archivo por cada página famosa. Lo copias, lo pegas en tu proyecto y le dices a Claude: “hazme una página que se vea así, pero con mi marca.” Claude agarra los colores, las letras, los botones — todo igualito. Lo que antes tomaba semanas, ahora es copiar y pegar.
01 qué es esto
Explicado Como Para un Niño de 5 Años
Imagina esto:
Quieres que tu página se vea como la de Apple — limpia, elegante, profesional. Antes tenías que contratar un diseñador, buscar inspiración durante semanas, sacar los colores uno por uno.
Ahora alguien ya hizo el trabajo por ti. Abrió la página de Apple, sacó todos los colores, las fuentes, los tamaños, los botones, el espaciado — y lo puso en un archivo de texto llamado DESIGN.md.
Tú copias ese archivo, lo pegas en tu proyecto, y Claude ya sabe exactamente cómo diseñar tu página con ese estilo.
55
diseños de páginas famosas
3
archivos por diseño (DESIGN.md + 2 previews)
0
costo — es gratis y open source
02 cómo instalarlo
Descarga el Proyecto en 1 Comando
Abre tu terminal y copia este comando. Se va a descargar toda la colección de diseños en tu computadora.
Clonar el repositorio
git clone https://github.com/VoltAgent/awesome-design-md.gitNo tienes git? Descárgalo directo:
Haz clic en el botón, descomprime el ZIP y ya tienes todos los diseños listos para usar.
Descargar ZIP03 cómo usarlo
3 Pasos y Listo
Elige un diseño
Abre la carpeta design-md/ y navega por las carpetas. Cada una tiene el nombre de la empresa (apple, stripe, notion, etc.). Abre el archivo preview.html en tu navegador para ver cómo se ve el diseño.
Copia el archivo DESIGN.md a tu proyecto
Copia el archivo DESIGN.md de la carpeta que elegiste y pégalo en la raíz de tu proyecto (donde está tu package.json).
Dile a Claude qué hacer
Abre Claude y dale una instrucción. Claude va a leer el DESIGN.md automáticamente y va a aplicar todos los estilos — colores, fuentes, botones, espaciado — a lo que le pidas.
Ejemplo: copiar el diseño de Apple a tu proyecto
cp awesome-design-md/design-md/apple/DESIGN.md ./DESIGN.md04 ejemplos prácticos
Prompts Listos Para Copiar y Pegar
Ya tienes el DESIGN.md en tu proyecto. Ahora copia cualquiera de estos prompts y pégalo en Claude.
Landing page con estilo Apple
Crea una landing page completa usando el diseño de Apple
Lee el archivo DESIGN.md que está en la raíz del proyecto. Quiero que me crees una landing page para mi producto usando exactamente ese sistema de diseño — los mismos colores, tipografía, espaciado y estilo de botones. El producto se llama [TU PRODUCTO] y es [DESCRIPCIÓN CORTA]. Hazlo responsive y con secciones de hero, features, pricing y footer.
Página de precios estilo Stripe
Diseña una página de pricing profesional
Tengo un DESIGN.md en la raíz del proyecto con el sistema de diseño de Stripe. Crea una página de precios con 3 planes (Básico, Pro, Enterprise) usando exactamente ese sistema de diseño. Incluye una tabla comparativa de features, toggle mensual/anual, y un CTA principal. Todo responsive.
Dashboard estilo Notion
Construye un dashboard limpio y minimalista
Lee el DESIGN.md del proyecto (sistema de diseño de Notion). Crea un dashboard con sidebar de navegación, área principal de contenido con cards de métricas, una tabla de datos recientes y un header con búsqueda. Usa exactamente los colores, tipografía y componentes del DESIGN.md.
Rediseñar tu página actual
Aplica un nuevo diseño a algo que ya tienes
Lee el archivo DESIGN.md en la raíz del proyecto. Ahora lee el archivo [RUTA DE TU COMPONENTE]. Quiero que rediseñes ese componente aplicando el sistema de diseño del DESIGN.md — actualiza los colores, la tipografía, el espaciado y los bordes para que se vea consistente con ese estilo. No cambies la funcionalidad, solo el diseño.
05 los 55 diseños
Explora las Categorías
El proyecto incluye diseños de las empresas más grandes del mundo, organizados por categoría.
IA y Machine Learning
Claude, Cohere, OpenAI
Herramientas de Desarrollo
Cursor, Linear, Vercel, Supabase
Infraestructura y Cloud
MongoDB, Stripe, HashiCorp
Diseño y Productividad
Figma, Notion, Webflow
Empresas y Marcas
Apple, Uber, SpaceX, IBM
SaaS y Startups
Spotify, Slack, Twilio
Cada diseño incluye:
- DESIGN.md — El archivo principal con todo el sistema de diseño
- preview.html — Vista previa visual (ábrelo en tu navegador)
- preview-dark.html — Vista previa en modo oscuro
06 tips pro
Sácale el Máximo Provecho
Combina diseños
Puedes tomar los colores de un diseño y la tipografía de otro. Copia los dos DESIGN.md y dile a Claude qué tomar de cada uno.
Personaliza los colores
Después de aplicar el diseño, dile a Claude que cambie los colores primarios por los de tu marca. El layout y la estructura se mantienen.
Usa el preview primero
Antes de copiar un DESIGN.md, abre el preview.html en tu navegador para ver exactamente cómo se ve cada componente.
Itera rápido
Si el resultado no queda perfecto, sigue iterando. Dile a Claude qué ajustar — el DESIGN.md da un punto de partida profesional, pero tú controlas el resultado final.