Guía
Combina dos sitios de referencia en un solo diseño para un prototipo
“Que se sienta como Notion con un toque de Stripe.” Los clientes piden prototipos así todo el tiempo. Con un DESIGN.md de cada sitio puedes convertir esa frase en una especificación concreta: compara los tokens lado a lado, decide qué archivo manda y combínalos.
Design Extractor te da los dos archivos. La combinación la haces tú, a mano o con tu agente de programación, y esta guía muestra las dos formas.
Escrita para diseñadores y agencias que hacen prototipos. Actualizada el .
Qué vas a conseguir
- Dos archivos DESIGN.md comparados token a token, para que las diferencias sean concretas.
- Un plan de combinación: un archivo como base y grupos de tokens concretos del otro.
- El DESIGN.md combinado, hecho a mano o por tu agente con el prompt de abajo.
- Una comprobación de contraste, para que la mezcla siga leyéndose bien.
Cómo funciona la combinación
Una mezcla no es una media. Combinar media paleta de uno con media del otro da un sitio que no se parece a ninguno. Lo que funciona es un archivo base más unas pocas partes concretas del otro:
- La base aporta la estructura: escala tipográfica, espaciado, radios y recetas de componentes.
- El acento presta grupos enteros, como su familia de color primario o su fuente display, nunca valores sueltos.
Los dos archivos siguen la especificación DESIGN.md de Google, así que los grupos coinciden: colors, typography, rounded, spacing y components. Consulta qué contiene un DESIGN.md para ver la estructura completa.
Pasos
Consigue los dos archivos
Cópialos de la galería si están ahí, o pega cada URL en la página de inicio de Design Extractor y haz una extracción Pro de cada uno.
Ponlos lado a lado
Compara los colores primarios, los fondos, las fuentes, los tamaños de texto y los radios, como en la tabla de abajo.
Elige la base
Elige el sitio cuyo layout y densidad encajen con el prototipo.
Define qué presta el acento
Anótalo como grupos de tokens, por ejemplo “su familia de color primario”.
Combínalos a mano o con tu agente
Las dos formas están abajo. Guarda el resultado como DESIGN.md en el repositorio del prototipo.
Comprueba el contraste y la estructura
Pega el archivo combinado en el validador de DESIGN.md gratuito.
Ejemplo práctico: Notion con un toque de Stripe
Dos archivos reales de la galería: el DESIGN.md de Notion y el DESIGN.md de Stripe. Los dos se extrajeron de los sitios web públicos de las marcas y no son guías de marca oficiales.
| Notion | Stripe | |
|---|---|---|
| Primario | #0075DE | #533AFD |
| Fondo | #FFFFFF | #FFFFFF |
| Texto | #000000 | #061B31 |
| Fuentes | Notion Inter, Lyon Text | Sohne |
| Texto más grande | hero-display, 96px, peso 600 | hero-display, 56px, peso 500 |
| Texto principal | body, 16px, peso 400 | body-lg, 18px, peso 300 |
| Radio de los botones | 8px | 4px |
| Tokens de color | 20 | 21 |
| Recetas de componentes | 14 | 71 |
Una forma de combinarlos
Toma Notion como base por su tipografía, espaciado, radios y componentes, y deja que Stripe preste su familia de color primario (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft). Es el clásico encargo de “nuestro layout, su energía”.
Revisa los números antes de decidirte. El primario de Stripe sobre el fondo de Notion tiene un contraste de 6.1:1. El texto on-primary de Notion sobre el nuevo primario llega a 6.1:1. El texto principal necesita al menos 4.5:1 según WCAG AA; el texto grande y los iconos necesitan 3:1.
Una trampa: el primario propio de Notion, #0075DE, aparece 65 veces en su archivo, sobre todo dentro de las recetas de componentes. Sustituir el token de arriba no basta; hay que cambiar cada copia.
---
name: Notion and Stripe prototype
colors:
primary: "#533AFD"
primary-focus: "#5452FB"
primary-bright: "#635BFF"
primary-pressed: "#4032C8"
primary-deep: "#2E2B8C"
primary-soft: "#D6D9FC"
on-primary: "#FFFFFF"
ink: "#000000"
typography:
hero-display:
fontFamily: Notion Inter
fontSize: 96px
fontWeight: 600
lineHeight: 1.05
letterSpacing: -4.6px
body:
fontFamily: Notion Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: normal
rounded:
xs: 4px
sm: 8px
md: 12px
full: 9999px
---Combinarlos a mano
- Copia el archivo base a DESIGN.md y cambia su
name. - En
colors, sustituye la familia primaria de la base por los valores del acento. - Busca cada valor hex antiguo en todo el archivo y sustitúyelo. Las recetas de componentes repiten los colores en su CSS, así que la lista de tokens no basta.
- Reescribe el texto de Overview y Colors para que describa la mezcla, no una de las dos marcas.
- Comprueba el archivo en el validador y corrige los avisos de contraste.
Combinarlos con tu agente
Guarda los dos archivos en el repositorio del prototipo, por ejemplo en design/, y dale a tu agente un prompt que indique la base, los grupos que tomar y las comprobaciones que hacer. Este se escribió para esta guía con los nombres reales de los archivos y los tokens.
Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.Revisa lo que te devuelva como cualquier otro cambio: lee el diff y luego pega el archivo en el validador. El agente escribe; las decisiones del prompt siguen siendo tuyas.
Archivos usados en esta guía
Cada página de la galería tiene el DESIGN.md completo para descargar, con su paleta y su muestra tipográfica.
Software y SaaS · Productivity & NotesNotion
La página de inicio de marketing de Notion combina una sección principal en azul marino profundo (#02093a) con un cuerpo de fondo claro (#f6f5f4), y usa una tipografía personalizada (NotionInter) en todos los roles de texto. El diseño emplea una cuadrícula de 12 columnas con canaletas de 28px y un lenguaje de radios doble: 8px para las tarjetas y 9999px para las píldoras. Para los elementos flotantes de la interfaz, utiliza un sistema de sombras progresivas de varias capas. El azul de marca (#2537b1) impulsa los CTA y los destacados de acento, mientras que una escala de grises semántica (de gray-200 a gray-900) estructura toda la jerarquía de texto y superficies.
Finanzas y fintechStripe
Stripe, el sitio de marketing de la página principal, usa un sistema de diseño muy controlado (HDS, Stripe Design System) basado en la fuente variable "sohne-var" en pesos ligeros (300–400), una paleta de marca que va del azul marino profundo al índigo, anclada en #533afd (Stripe Indigo), y un característico degradado espectral a sangre completa en el encabezado. Los componentes tienen radios bajos (4–6 px), sombras planas o mínimas y se estructuran en torno a una cuadrícula base de 8 px. El tono general es autoritario pero cercano: infraestructura financiera comunicada mediante una tipografía segura de sí misma y un uso contenido del color.
Viajes, transporte y logísticaAirbnb
El sistema de diseño de Airbnb se basa en una única fuente variable propietaria (Airbnb Cereal VF), una paleta de neutros casi monocromática anclada en el carbón profundo (#222222) y en grises claros, con el rosa coral distintivo de la marca, "Rausch" (#ff385c), reservado exclusivamente para los CTA principales y el logotipo. El diseño es una cuadrícula responsiva de tarjetas con fotografía, con proporciones generosas de imagen y texto, esquinas redondeadas de 20px en las tarjetas y un sistema de sombras ambientales de varias capas que crea una profundidad sutil sin contrastes marcados. La barra de búsqueda es un contenedor destacado con forma de píldora que unifica la acción principal del usuario.
Preguntas frecuentes
Combina el diseño de dos sitios web en uno: preguntas
Respuestas breves a lo que la gente pregunta antes de probarlo.
No, no hay ninguna función para combinarlos. Cada extracción devuelve el DESIGN.md de un sitio. Combinas dos archivos a mano, o pides a tu agente de programación que lo haga con un prompt como el de esta guía, y luego revisas el resultado.
Dos, a veces tres. Un archivo es la base y aporta la estructura: escala tipográfica, espaciado, radios y componentes. Los demás prestan una parte concreta, como una familia de color o una fuente display. Mezclar valores de más archivos hace que el resultado parezca hecho a parches.
El que tenga un layout y una densidad que encajen con el prototipo. Si el cliente quiere un producto tranquilo, tipo documento, con los colores de otro sitio, el sitio tranquilo es la base y el otro presta sus colores, no al revés.
Pega el archivo combinado en el validador de DESIGN.md gratuito. Comprueba la estructura y señala los colores de texto con poco contraste. Después crea una pantalla real con él antes de enseñárselo al cliente.
Consigue los dos archivos para tu encargo
Pega la URL de cada sitio de referencia y obtén su DESIGN.md, listo para comparar y combinar.
Guías relacionadas
Haz que Claude Code y Cursor creen interfaces iguales a una web
Extrae un sitio que te guste, pon su DESIGN.md en tu repositorio y apunta a él a tu agente, con los prompts exactos para Claude Code y Cursor.
¿Sin diseñador? Toma prestado un sistema de diseño probado para tu app
Cómo elegir un sitio de referencia, qué conservar de su DESIGN.md y qué cambiar para que el resultado sea tuyo y no una copia.
¿Vas a rehacer tu sitio? Extrae primero su sistema de diseño
Captura tu sitio actual como DESIGN.md antes de rehacerlo, cambiar de marca o de framework, y sabe qué revisar a mano.
Dale a tu agente de programación especificaciones de diseño bajo demanda con MCP
Conecta el servidor MCP para que tu agente pueda extraer el DESIGN.md de un sitio por su cuenta, esperar a que termine y trabajar a partir de él.