Refero Styles vs Design Extractor
Design Extractor crea un DESIGN.md a partir de cualquier URL pública que le des. 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.
Refero Styles es una biblioteca grande y gratuita de estilos de sitios web, cada uno con sus colores, tipografía, espaciado y componentes en varios formatos. ¿Es tu primera vez con el formato? Lee qué es un DESIGN.md.
Comprobado el consultando styles.refero.design, una de sus páginas de estilo y su sitemap de estilos. Las ofertas y los precios cambian, así que revisa su sitio antes de decidir.
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.
Cara a cara
| Refero Styles | Design Extractor | |
|---|---|---|
| Conformidad con la especificación | No se ofrece | Sigue la especificación DESIGN.md de Google: front matter solo con las propiedades de la especificación y sin claves de primer nivel personalizadas, las secciones canónicas en el orden de la especificación y entradas de componentes limitadas a las ocho propiedades de la especificación con valores literales. |
| Recetas de componentes | Cada componente se describe en prosa, con su rol y sus medidas, sin HTML. | Cada componente que toma de la página, como la cabecera, el pie de página, los botones, los campos y las tarjetas, se entrega como una receta: HTML y CSS depurados en la sección Components, para que tu agente de programación pueda reconstruirlo. |
| Verificado con el sitio en vivo | No se ofrece | Sí. Cada receta se renderiza por separado y se comprueba con el sitio en vivo: una coincidencia estructural de sus partes y una comparación de píxeles. Un componente que no pasa se marca con el motivo y nunca se entrega como verificado. |
| Sitios con restricción regional | No se ofrece | Sí. Cuando un sitio bloquea a visitantes de algunos países, la extracción fallida ofrece un selector de país, con los países desde los que carga la página en primer lugar, y hace la misma extracción a través de un navegador allí. 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). |
| Qué es | Una biblioteca gratuita de estilos de sitios web, en beta, de Refero, el producto de referencias de interfaz de refero.design. | Un generador: le das una URL pública y te devuelve el DESIGN.md de ese sitio. |
| Cualquier sitio web bajo demanda | No se ofrece | Sí. Pega cualquier URL pública y la extracción empieza enseguida. |
| Cobertura | 1342 páginas de estilo, las que lista su sitemap de estilos. | Cualquier sitio web público, más una galería de marcas ya extraídas. |
| Formatos por estilo | DESIGN.md (compact y extended), Tailwind v4, variables CSS y tokens de diseño. | Un DESIGN.md, con los tokens en el front matter y recetas de componentes en HTML y CSS. |
| Precio | Gratis para explorar y copiar. | Créditos prepago, sin suscripción. Los paquetes empiezan en 5 US$ por 50 créditos; una extracción Pro cuesta 10 créditos. |
| Actualidad | Instantáneas. El estilo de Apple se extrajo el 2026-09-20. | Se crea a partir del sitio en vivo en el momento en que lo ejecutas. |
| Acceso para agentes | Cada página de estilo enlaza al MCP de Refero para Claude, ChatGPT, Cursor, Codex y más. | Un servidor MCP remoto cuya herramienta de extracción acepta cualquier URL, desde Claude Code, claude.ai, ChatGPT, Codex, Cursor y otros clientes. |
| Extensión del navegador | No se ofrece | Una extensión de Chrome que extrae la pestaña en la que estás. |
Qué ofrece Refero Styles
- Una biblioteca gratuita de estilos de sitios web, que se puede explorar por ambiente, como SaaS en modo oscuro o diseños editoriales.
- Varios formatos por estilo: DESIGN.md (compact y extended), Tailwind v4, variables CSS y tokens de diseño.
- Enlaces al MCP de Refero para Claude, ChatGPT, Cursor, Codex y más.
Una biblioteca frente a cualquier URL bajo demanda
Una biblioteca cubre los sitios que alguien ya añadió. Design Extractor lee el sitio en vivo que indicas, así que cubre tu propio producto, un cliente, un competidor o una marca de nicho, tal como se ven hoy.
Pega la URL en la página de inicio, o deja que lo haga tu agente a través del servidor MCP. Mira archivos terminados, con sus recetas y los resultados de las comprobaciones, en la galería.
Cómo cambiarte desde Refero Styles
- Pega la URL del sitio en la página de inicio de Design Extractor y haz una extracción Pro.
- Guarda el resultado como DESIGN.md en la raíz de tu repositorio y mantén la referencia en AGENTS.md o CLAUDE.md. Comprueba las ediciones a mano con el validador de DESIGN.md gratuito.
- O deja que lo haga tu agente: conecta el servidor MCP y pídele que extraiga el sitio.
Veredicto
Elige Design Extractor si necesitas un DESIGN.md de cualquier sitio público, no solo de los sitios de una biblioteca, con recetas de componentes comprobadas con el sitio en vivo. Lee el sitio tal como se ve ahora y sigue la especificación de Google, con una receta para cada componente que toma de la página, marcada con el motivo cuando no pasa. Llega a sitios con restricción regional. Tu agente puede usarlo por MCP.
Otras 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.
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.
Preguntas frecuentes
Refero Styles vs Design Extractor: preguntas
Respuestas breves sobre Refero Styles y Design Extractor, comprobadas el 2026-10-20.
Sí. El 2026-10-20, explorar y copiar estilos en styles.refero.design era gratis. Sus páginas enlazan al MCP de Refero en refero.design.
No. Refero Styles no ofrece ninguna forma de enviar tu propia URL: eliges de su biblioteca. Design Extractor crea un DESIGN.md a partir de cualquier URL pública cuando lo ejecutas.
No. Design Extractor genera un solo archivo: un DESIGN.md que sigue la especificación de Google, con los tokens en el front matter y cada componente que toma de la página como una receta de HTML y CSS depurados. Tu agente de programación lo lee y escribe los estilos que usa tu proyecto.
Cada receta de componente se renderiza por separado y se compara con el sitio en vivo: una coincidencia estructural de sus partes 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 no pasa se marca con el motivo y nunca se entrega como verificada.
Su sitemap de estilos mostraba 1342 páginas de estilo el 2026-10-20.
Design Extractor puede hacer la extracción desde otro país. 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 carga la página en primer lugar, y hace la misma extracción a través de un navegador allí. 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.
Obtén un DESIGN.md del sitio que necesitas
Pega cualquier URL pública. Pro recorre las páginas clave del sitio y devuelve un DESIGN.md conforme a la especificación, con recetas de componentes comprobadas con el sitio en vivo.