Herramientas DESIGN.md comparadas
Design Extractor crea un DESIGN.md a partir de cualquier URL pública. El archivo sigue la especificación DESIGN.md de Google e incluye cada componente que toma de la página como una receta de HTML y CSS que tu agente de programación puede reconstruir. Cada receta se comprueba con el sitio en vivo o se marca con el motivo. También funciona en sitios que solo responden a visitantes de ciertos países.
Otras herramientas siguen caminos distintos. Colecciones como getdesign.md y Refero Styles ofrecen archivos ya hechos de sitios que ya han analizado; designmd.me genera uno a partir de una URL; la extensión de Chrome de TypeUI rellena su propia plantilla con los estilos de tu pestaña. Cada comparativa indica qué comprobamos y cuándo. ¿Es tu primera vez con el formato? Lee qué es un DESIGN.md.
Por qué Design Extractor
Sigue la especificación DESIGN.md de Google
El front matter en YAML usa solo las propiedades que define la especificación, sin claves de primer nivel personalizadas. Las secciones canónicas van en el orden de la especificación, de Overview a Do's and Don'ts. Las entradas de componentes del front matter usan solo las ocho propiedades de la especificación, con valores literales. Comprueba cualquier archivo con el validador de DESIGN.md gratuito.
Una receta para cada componente que toma de la página
La cabecera, el pie de página, los botones, los campos, las tarjetas y otros componentes tomados de la página se entregan cada uno como una receta: HTML y CSS depurados con valores literales, dentro de la sección Components del DESIGN.md. Cada receta indica sus partes y los estados hover y focus vistos en el sitio, para que tu agente de programación pueda reconstruir el componente en lugar de adivinarlo.
Verificado con el sitio en vivo
Cada receta se renderiza por separado y se comprueba con el sitio en vivo: una coincidencia estructural de las partes renderizadas con lo que se midió en la página y una comparación de píxeles con una captura nueva del elemento real. Una receta que falla se reconstruye y se vuelve a comprobar. La que sigue sin pasar se marca con el motivo y nunca se entrega como verificada. La página de resultado muestra cuánto se parecen los componentes y qué parte de los colores y estilos de texto del sitio está cubierta: mira Stripe en la galería.
Funciona en sitios con restricción regional
Algunos sitios solo responden a visitantes de ciertos países. Cuando una extracción falla por eso, la página de resultado ofrece un selector de país, con los países desde los que se comprobó que carga la página en primer lugar, y hace la misma extracción a través de un navegador en el país que elijas. Una extracción desde otro país cuesta el precio Pro más un recargo de 6 en créditos (16 créditos en total). Si la extracción falla, te devolvemos los créditos.
Comparativas
getdesign.md vs Design Extractor
Una colección curada de archivos DESIGN.md ya hechos frente a un DESIGN.md conforme a la especificación, con recetas de componentes comprobadas con el sitio en vivo, a partir de cualquier URL.
designmd.me vs Design Extractor
Dos generadores de DESIGN.md a partir de una URL comparados en conformidad con la especificación, recetas de componentes, comprobaciones con el sitio en vivo y precio.
Refero Styles vs Design Extractor
Una gran biblioteca gratuita de estilos de sitios web frente a un DESIGN.md conforme a la especificación, con recetas de componentes comprobadas con el sitio en vivo, a partir de cualquier URL.
TypeUI vs Design Extractor
La extensión de Chrome gratuita de TypeUI, que rellena su propia plantilla con los estilos de tu pestaña, frente a un DESIGN.md conforme a la especificación con recetas de componentes comprobadas con el sitio en vivo.