Generador de DESIGN.md: convierte cualquier web en un DESIGN.md

Un DESIGN.md es una guía de estilo en texto plano que las herramientas de programación con IA leen antes de construir una pantalla. Stylasso escribe uno a partir de cualquier web que abras: los colores que pinta de verdad, sus niveles tipográficos, radios, espaciado y estilos de botón, en el formato abierto DESIGN.md de Google Labs.

Qué es un DESIGN.md

DESIGN.md es un formato abierto publicado por Google Labs (google-labs-code/design.md). El principio del archivo es un front matter YAML con los tokens normativos: colors, typography, rounded, spacing y components. Debajo vienen ocho secciones en un orden fijo, de Overview a Do's and Don'ts, que explican cómo se deben usar esos tokens. Un agente de IA que lee el archivo obtiene valores exactos en lugar de adivinarlos a partir de una captura o del nombre de una web.

Por qué funciona mejor que «hazlo como esta web»

Si le pides a Cursor, Claude Code, v0 o Lovable una página «al estilo de» una web, trabajan de memoria: la paleta se parece más o menos, y la tipografía y los botones quedan genéricos. Con un DESIGN.md en el proyecto pueden usar los códigos hex reales, la escala tipográfica con sus pesos y su espaciado entre letras, el radio y el relleno de los botones, y una línea que describe el carácter de la web (por ejemplo, «clara, titulares ligeros, botones suavemente redondeados, superficies planas separadas por bordes»).

Cómo crear uno con Stylasso

Instala Stylasso para Chrome o Edge.
Abre la web cuyo estilo quieres seguir y pulsa el icono de Stylasso.
Elige DESIGN.md en la barra de exportación y pulsa Copy DESIGN.md, o descarga el archivo.
Pon DESIGN.md en la raíz del proyecto y pídele a tu herramienta: Build a pricing page that follows @DESIGN.md.

Stylasso toma muestras de la página tal como la muestra tu navegador, así que las funciones salen de lo que se pinta de verdad: el color de los botones principales pasa a ser primary, el color de texto más usado pasa a ser on-surface, y así con el resto. Las fuentes comerciales llevan una nota con la fuente gratuita de Google más parecida, porque lo normal es que tu proyecto no tenga licencia de la original.

Un ejemplo real

Este es el archivo completo que Stylasso escribió para Northwind Roasters, una cafetería ficticia que creamos para las demos. El linter oficial (npx @google/design.md lint) da 0 errores y 0 avisos: 7 colores, 6 niveles tipográficos, 5 radios, 13 pasos de espaciado y 7 componentes. El archivo va en inglés, como lo genera la extensión.

---
version: alpha
name: "Northwind Roasters"
description: "Visual style of https://northwind-roasters.test/, extracted 2026-11-07."
colors:
  primary: "#c2410c"
  secondary: "#4d7c5a"
  neutral: "#fffaf3"
  surface: "#f6eadb"
  on-surface: "#2b1d14"
  on-surface-variant: "#7a6656"
  outline: "#ead8c3"
typography:
  headline-display:
    fontFamily: "Fraunces"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -1.28px
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.4px
  body-lg:
    fontFamily: "Fraunces"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "Hanken Grotesk"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
  button-label:
    fontFamily: "Hanken Grotesk"
    fontSize: 17px
    fontWeight: 600
rounded:
  md: 6px
  lg: 10px
  r16: 16px
  r18: 18px
  full: 9999px
spacing:
  base: 4px
  s4: 4px
  s6: 6px
  s11: 11px
  s12: 12px
  s16: 16px
  s18: 18px
  s20: 20px
  s24: 24px
  s28: 28px
  s32: 32px
  s56: 56px
  s72: 72px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.button-label}"
    rounded: "{rounded.lg}"
    padding: "11px 20px"
  button-secondary:
    backgroundColor: "#4d7c5a"
    textColor: "#ffffff"
    typography: "{typography.button-label}"
    padding: "11px 20px"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "#ffffff"
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  caption:
    textColor: "{colors.on-surface-variant}"
  divider:
    backgroundColor: "{colors.outline}"
---
# Northwind Roasters

## Overview

Visual style extracted from https://northwind-roasters.test/ on 2026-11-07 by sampling the rendered page. It is a light interface with #c2410c as the brand color, set in Fraunces.

Character: medium-weight headlines, tight letter-spacing on large type, softly rounded buttons, soft shadows for depth.

## Colors

- **primary (#c2410c):** Brand color for main buttons, links and active states.
- **secondary (#4d7c5a):** Second brand color for highlights and badges.
- **neutral (#fffaf3):** Page background.
- **surface (#f6eadb):** Cards, panels and sections.
- **on-surface (#2b1d14):** Body text and headings.
- **on-surface-variant (#7a6656):** Secondary text and captions.
- **outline (#ead8c3):** Borders and dividers.

Other colors on the page, by painted area: #f59e0b (2.9%), #9a3412 (0.8%).

Body text on the background has a contrast of 15.6:1. The brand color has 4.9:1 against the background.

## Typography

- **heading:** Fraunces (Google Fonts, weights 600). CSS stack: `Fraunces, ui-sans-serif, system-ui, sans-serif`. Load it from Google Fonts as Fraunces.
- **body:** Hanken Grotesk (Google Fonts, weights 400, 500, 600). CSS stack: `"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif`. Load it from Google Fonts as Hanken Grotesk.
- **mono:** JetBrains Mono (Google Fonts, weights 400). CSS stack: `"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace`. Load it from Google Fonts as JetBrains Mono.

The base size is 17px and the scale grows by about 1.556 per step.

## Layout

Spacing follows a 4px grid; the common steps are 4px, 6px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 56px, 72px.

## Elevation & Depth

Shadows in use, smallest first: `rgba(43, 29, 20, 0.12) 0px 1px 2px 0px`; `rgba(43, 29, 20, 0.08) 0px 1px 3px 0px`; `rgba(43, 29, 20, 0.35) 0px 24px 48px -16px`.

Gradients used for hero and feature backgrounds: `linear-gradient(135deg, rgb(194, 65, 12), rgb(245, 158, 11))`.

## Shapes

Corner radii: md 6px, lg 10px, r16 16px, r18 18px, full 9999px.

## Components

Primary buttons use #c2410c with #ffffff text, 49px tall, padded 11px 20px, bold 17px text, radius 10px, with a shadow. Secondary buttons on the first screen are #4d7c5a with #ffffff text, 49px tall, padded 11px 20px, bold 17px text, radius 10px, with a shadow.

## Do's and Don'ts

- Do use only the tokens above; do not invent new colors, sizes or radii.
- Do reserve the primary color for the main action on a screen.
- Do keep body text at or above the contrast stated in Colors.
- Don't copy the source site's logos, images, illustrations or text.

Qué incluye Stylasso en el archivo

Colores con su función: primary, secondary (acento), neutral (fondo), surface, on-surface (texto), on-surface-variant (texto secundario) y outline (borde), cada uno con su contraste sobre el fondo.
Tipografía: niveles de titular, cuerpo y etiqueta con familia, tamaño, peso, interlineado y espaciado entre letras, más la pila de fuentes CSS.
Formas y espaciado: radios de esquina con los nombres de la escala de Tailwind y la cuadrícula de espaciado.
Componentes: botones principales y secundarios tal como se dibujan en la página (altura, relleno, radio, peso, mayúsculas o no), tarjetas, insignias, pies de texto y separadores.
Indicaciones: degradados usados en los fondos de cabecera, sombras, «construye todas las pantallas en oscuro» para webs oscuras y un recordatorio de no copiar logotipos, imágenes ni textos.

Preguntas

¿El formato DESIGN.md es estable?

La especificación está marcada como alfa. Stylasso la sigue y comprueba su salida con el linter oficial en sus pruebas.

¿Es gratis?

Sí. Las exportaciones a DESIGN.md, variables CSS, Tailwind v4 y JSON son gratis y sin límite diario. Pro (9,99 USD, pago único) añade un tema de shadcn/ui, tokens de Figma, un ZIP de SVG y 100 kits guardados.

¿Copia la web?

No. Registra valores de estilo (colores, tamaños, espaciado, radios) y nombra las fuentes. Nunca exporta textos, imágenes ni logotipos de la página, y el archivo le pide a tu herramienta de IA que tampoco los copie.