¿Vas a rehacer tu sitio? Extrae primero su sistema de diseño

Cuándo hacerlo#

• Un cambio de framework. El mismo aspecto, otro stack. El DESIGN.md permite a tu agente de programación reconstruir los componentes con los valores exactos en lugar de leer hojas de estilo antiguas.
• Un cambio de marca. Captura primero el sistema antiguo para saber exactamente qué colores, fuentes y radios cambian y cuáles se quedan.
• Un traspaso. Una agencia nueva o un equipo nuevo recibe un archivo que describe cómo se ve el sitio hoy, en lugar de un recorrido por el código.

Pasos#

1. 1

   Extrae el sitio en vivo antes de cambiar nada

   Pega la URL de producción en la página de inicio de Design Extractor y haz una extracción Pro. Tiene que ser una página pública: la extracción la carga como un visitante, así que localhost y las páginas detrás de un inicio de sesión no funcionan.

2. 2

   Haz commit como base

   Guárdalo como DESIGN.md en el repositorio nuevo y haz commit antes de empezar a rehacer el sitio. A partir de ahí registra cómo se veía el sitio ese día.

3. 3

   Lee la sección Known Gaps

   El final del archivo enumera lo que la extracción no pudo capturar. Cada punto de esa lista es algo que revisar a mano.

4. 4

   Revisa lo que un DESIGN.md no puede contener

   Recursos, pantallas con sesión iniciada, movimiento y los demás puntos de abajo. Añade notas al archivo sobre la marcha.

5. 5

   Construye a partir de él

   Apunta a tu agente de programación al archivo, como muestra la guía de Claude Code y Cursor, y revisa cada pantalla nueva con él.

Lo que capturó el archivo de Stripe#

Lo que dice que no captó

El archivo es honesto sobre sus límites. Los primeros 5 de 11 puntos de su sección Known Gaps:

## Known Gaps

- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.

Tu propio archivo tendrá su propia lista. Úsala como lista de tareas para las comprobaciones de abajo.

Qué revisar a mano#

Después de rehacer el sitio#

Archivos usados en esta guía#

Abre uno para ver un DESIGN.md completo, desde los tokens del principio hasta los Known Gaps del final.

• 
  Finanzas y fintech

  Stripe

  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.

• 
  Servicios profesionales y empresariales

  Shopify

  La página de inicio de marketing de Shopify utiliza un vídeo de cabecera a pantalla completa de gran dramatismo, con un fondo casi negro (#02090a) que contrasta con fuerza con la barra de navegación blanca situada encima. El color de acento principal es un verde menta vibrante (#36f4a4), empleado con moderación para destacados y estados interactivos. La tipografía se reparte entre NeueHaasGrotesk, para los títulos de impacto y editoriales, e Inter-Variable, para el texto de interfaz y el cuerpo. Los botones de llamada a la acción tienen forma de píldora totalmente redondeada (border-radius: 9999px). En conjunto, el sistema transmite seguridad, alto contraste y aspiración, y está pensado para convertir a los visitantes en comerciantes.

• 
  Desarrollo e infraestructura · Developer Tools & IDEs

  Supabase

  Supabase utiliza un sistema de diseño con prioridad al modo oscuro, anclado en un fondo casi negro y profundo (oklch ~0.19) con un acento verde vivo de marca (#3ecf8e / #3fcf8e). La disposición se organiza en una cuadrícula responsiva de tarjetas de funciones. Manrope se usa para los títulos de presentación e Inter para el texto de cuerpo y la interfaz, mientras que Source Code Pro se encarga de todos los contextos monoespaciados y de código. El sistema de color se basa en propiedades personalizadas de oklch con nombres semánticos. Las tarjetas tienen un radio de 12px con un tratamiento de borde sutil, los botones usan un radio de 6–8px, y la densidad general es moderada, con una cuadrícula base de espaciado de 8px.

Ver todos los ejemplos de DESIGN.md