Generador de DESIGN.md
Crea un DESIGN.md a partir de un sitio web en vivo. Escribe su URL y el generador crea el archivo que lee tu agente de programación: tokens de color, tipografía, espaciado y componentes, además de las reglas para usarlos. ¿Es tu primera vez con el formato? Lee qué es un DESIGN.md.
Cómo crea el generador un DESIGN.md
Escribe la URL de un sitio web
Sirve cualquier página pública: un sitio de marketing, un sitio de documentación o la página de inicio de una app web. Primero regístrate; cada extracción gasta créditos de un paquete prepago.
El generador lee el sitio
Abre el sitio en un navegador real y mide los colores, las fuentes, el espaciado, los radios de las esquinas y los componentes que de verdad usa. Una extracción Pro recorre unas cinco páginas del sitio. Cada extracción tarda al menos un minuto.
Recibes un DESIGN.md
Los tokens van al front matter en YAML y las reglas para usarlos, al Markdown: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components y Do's and Don'ts. Cópialo, descárgalo o edítalo en Mis extracciones.
Ejemplo de resultado: el DESIGN.md de Anthropic
Un fragmento del archivo que el generador creó a partir de anthropic.com, recortado a unos pocos tokens por grupo y al inicio del Overview. El archivo completo cubre también layout, elevación, formas, componentes y do’s and don’ts.
---
version: alpha
name: Anthropic
colors:
primary: "#141413"
on-primary: "#FAF9F5"
ink: "#141413"
body-muted: "#5E5D59"
surface: "#FAF9F5"
surface-alt: "#F0EEE6"
hairline: "#D1CFC5"
typography:
hero-display:
fontFamily: Anthropic Serif
fontSize: 68.3429px
fontWeight: 400
lineHeight: 1.1
body:
fontFamily: Anthropic Serif
fontSize: 15px
fontWeight: 400
lineHeight: 1.4
rounded:
sm: 8px
md: 12px
lg: 16px
spacing:
base: 4px
section-padding-y: 48px
---
## Overview
Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.Ver el DESIGN.md completo de AnthropicVer más ejemplos de DESIGN.md
Preguntas frecuentes
Preguntas sobre el generador de DESIGN.md
Qué crea el generador, cuánto cuesta y cómo usar el archivo con tu agente de programación.
Un archivo DESIGN.md que sigue la especificación DESIGN.md de Google. El front matter en YAML contiene los tokens de color, tipografía, espaciado, radio de esquinas y componentes del sitio. El cuerpo en Markdown explica cómo usarlos, sección por sección, para que un agente de programación pueda crear interfaces nuevas que encajen con el sitio.
Con el generador no: crea el archivo a partir de un sitio web público y en vivo. Si diseñas desde cero, escribe el DESIGN.md a mano siguiendo la especificación y comprueba su estructura y sus tokens con el validador gratuito de DESIGN.md.
Cualquier sitio web público accesible por HTTP o HTTPS, incluidos sitios estáticos, aplicaciones de una sola página y páginas renderizadas en el servidor. No se admiten páginas detrás de un inicio de sesión, en localhost o en una red privada, y algunos sitios bloquean los navegadores automatizados.
Te registras y compras un paquete de créditos prepago, desde 5 US$ por 50 créditos. No hay suscripción y los créditos no caducan. Cada extracción gasta créditos, y la página de precios muestra el coste actual por extracción. Si una extracción falla por un problema de nuestra parte, se devuelven los créditos.
Guárdalo como DESIGN.md en la raíz de tu proyecto o en tu carpeta de documentación y menciónalo en tu prompt. Claude Code, Cursor, GitHub Copilot, Windsurf y otros agentes con acceso a archivos lo leen como referencia de estilo. Los agentes también pueden usar el generador por su cuenta a través del servidor MCP de Design Extractor.
Sí. Cada DESIGN.md que generas se guarda en Mis extracciones, donde puedes editarlo, volver a descargarlo o volver a extraer el sitio más adelante. Es texto plano, así que también puedes editarlo en tu propio editor.