Documentación
Cómo funciona Design Extractor
Pega una URL y obtén una especificación de diseño estructurada. Colores, tipografía, espaciado y componentes en un DESIGN.md que puedes poner en un repositorio.
¿Qué es un DESIGN.md?
Un DESIGN.md es un documento de sistema de diseño en texto plano que pueden leer tanto personas como agentes de IA. Piensa en él como el equivalente de AGENTS.md para el diseño. Mientras AGENTS.md les dice a los agentes cómo construir el proyecto, DESIGN.md les dice qué aspecto y qué sensación debe transmitir.
Por dentro, todo DESIGN.md tiene dos capas: front matter en YAML con tokens de diseño legibles por máquina y un cuerpo en Markdown que explica la lógica del diseño. Los tokens dan a los agentes valores precisos. El texto les dice por qué existen esos valores.
Secciones canónicas
- Overview
- Colors
- Typography
- Layout
- Elevation & Depth
- Shapes
- Components
- Do's and Don'ts
Cómo funciona
Entrada
Pega una URL pública (por ejemplo,
design-extractor.com).Extracción
El sistema recorre la página y analiza sus propiedades visuales: colores, tipografía, espaciado, patrones de componentes y lenguaje de diseño general.
Resultado
Un DESIGN.md que contiene:
- Resumen y pautas de estilo de la marca
- Paletas de colores con tokens con nombre
- Niveles tipográficos y propiedades de las fuentes
- Tokens de layout, espaciado y formas
- Pautas de componentes y referencias a tokens
- Qué hacer y qué no hacer, como barreras de diseño
Resultado
Cada extracción genera un DESIGN.md.
Markdown
- DESIGN.md. El formato canónico DESIGN.md lo presentó Google Stitch. Ponlo en cualquier repositorio para que lo usen los agentes de IA.
Extensión de Chrome
Extrae la página de tu pestaña actual sin volver aquí. La extensión reutiliza la sesión del sitio y gasta los mismos créditos. Lee cómo funciona la extensión ->
La idea clave
Los agentes de IA generan mejores diseños cuando reciben tanto tokens precisos como una explicación legible para personas. El front matter en YAML da los valores exactos. El cuerpo en Markdown explica cómo deben usarse esos valores en la práctica.
¿Listo para probarlo?
Obtén un DESIGN.md de cualquier URL pública. Una extracción tarda al menos un minuto.