TypeUI vs Design Extractor
DESIGN.md Style Extractor de TypeUI es una extensión de Chrome gratuita que lee los estilos de la página de tu pestaña y rellena la plantilla DESIGN.md propia de TypeUI. El archivo de Design Extractor 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.
¿Es tu primera vez con el formato? Lee primero qué es un DESIGN.md.
Comprobado el consultando el README y el código fuente de la extensión, su ficha en Chrome Web Store y el README de TypeUI. 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
| TypeUI | 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 | Los componentes aparecen como un recuento por tipo (botones, enlaces, campos, tarjetas, navegación, listas, tablas) bajo unas pautas generales de componentes. | 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 | DESIGN.md Style Extractor, una extensión de Chrome gratuita de Bergside SRL, la empresa detrás de TypeUI. Versión 0.4.0, unos 40.000 usuarios en Chrome Web Store, de código abierto con licencia MIT. | Un generador: dale una URL pública en el sitio, por MCP o desde la extensión de Chrome, y obtén el DESIGN.md de ese sitio. |
| Qué sigue el resultado | La plantilla DESIGN.md propia de TypeUI: Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules y más, sin front matter en YAML. También puede escribir un SKILL.md. | La especificación DESIGN.md de Google: tokens en el front matter en YAML y las secciones canónicas en el orden de la especificación. |
| Cómo lee el sitio | Lee los estilos calculados de hasta 280 elementos visibles de la página de tu pestaña, dentro de tu navegador, sin solicitudes de red. | Nuestros servidores abren la URL en un navegador y analizan la página renderizada. Pro también recorre las páginas clave del sitio. |
| Páginas que puede leer | La página abierta en tu pestaña, incluidas páginas en las que has iniciado sesión. | Solo páginas públicas. Todavía no se admiten páginas detrás de un inicio de sesión, en localhost o en una red privada. |
| Dónde va el resultado | Se muestra en la ventana de la extensión, donde lo copias o lo descargas. Un botón Quick install escribe el SKILL.md en la carpeta de skills de Claude Code, Codex o Cursor del proyecto que elijas. | Se guarda en Mis extracciones en tu cuenta, donde puedes editarlo, copiarlo o descargarlo. Tu agente puede leerlo por MCP. |
| Precio | Gratis. Sin cuenta ni pago. | Créditos prepago, sin suscripción. Los paquetes empiezan en 5 US$ por 50 créditos; una extracción Pro cuesta 10 créditos. La galería y las herramientas gratuitas no cuestan nada. |
| Acceso para agentes | La extensión funciona desde su ventana. La CLI y el servidor MCP alojado de TypeUI, que son aparte, ofrecen sus skills de diseño curados y prompts de interfaz. | Un servidor MCP remoto cuya herramienta de extracción acepta cualquier URL, desde Claude Code, claude.ai, ChatGPT, Codex, Cursor y otros clientes. |
Qué ofrece TypeUI
- Una extensión de Chrome gratuita y de código abierto (MIT) con unos 40.000 usuarios en Chrome Web Store, sin cuenta ni pago.
- Funciona por completo en tu navegador sobre la página de tu pestaña, incluidas páginas en las que has iniciado sesión.
- Valores de tipografía, colores, espaciado, radios, sombras y movimiento en un DESIGN.md con el formato propio de TypeUI, o un SKILL.md.
- Copia o descarga el archivo desde la ventana de la extensión, o usa Quick install para poner el SKILL.md en un proyecto de Claude Code, Codex o Cursor.
- Además de la extensión, TypeUI ofrece skills de diseño curados, prompts de interfaz, una CLI de código abierto y un servidor MCP alojado, más una versión Pro con archivos de skills de diseño mejorados, prompts de interfaz para layouts y una comunidad privada en Discord.
En qué se diferencian
La extensión de TypeUI resume los valores de estilo que encuentra en una página y añade pautas generales de su plantilla. Design Extractor renderiza el sitio, elige sus componentes y escribe una receta para cada uno, y después comprueba cada receta con el sitio en vivo, para que tu agente sepa qué componentes puede reconstruir tal cual y cuáles se marcaron, con el motivo. Míralo en Stripe en la galería.
¿Prefieres empezar desde la pestaña en la que estás? La extensión de Chrome de Design Extractor la envía a la misma extracción, con la misma cuenta y los mismos créditos. Tu agente también puede iniciar una extracción y leer el resultado a través del servidor MCP. Mira más archivos terminados en la galería.
Cómo cambiarte desde TypeUI
- Pega la URL del sitio en la página de inicio de Design Extractor, o haz clic en Extract this page en la extensión de Chrome, y haz una extracción Pro.
- Guarda el resultado como DESIGN.md en la raíz de tu repositorio, en lugar del archivo anterior. Tu referencia en AGENTS.md o CLAUDE.md sigue funcionando.
- Si usaste Quick install, borra la carpeta del skill design-system que escribió TypeUI y mantén tu referencia a DESIGN.md.
- Para que tu agente haga extracciones por su cuenta, conecta el servidor MCP.
Veredicto
Elige Design Extractor si necesitas un DESIGN.md que siga la especificación de Google, con una receta para cada componente que toma de la página, cada una comprobada con el sitio en vivo o marcada con el motivo, guardado en tu cuenta. Llega a sitios con restricción regional. Tu agente puede usarlo por MCP. La extensión de TypeUI es gratuita y lee páginas en las que has iniciado sesión, como muestra la tabla.
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.
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.
Preguntas frecuentes
TypeUI vs Design Extractor: preguntas
Respuestas breves sobre TypeUI y Design Extractor, comprobadas el 2026-10-20.
Sí. El 2026-10-20, la extensión era gratuita y de código abierto con licencia MIT, sin cuenta ni pago. Design Extractor no es gratis: las extracciones gastan créditos prepago, con paquetes desde 5 US$ por 50 créditos y 10 créditos por una extracción Pro. La galería y las herramientas gratuitas no cuestan nada.
No. El archivo sigue el formato DESIGN.md de código abierto de TypeUI, con secciones como Mission, Brand, Style Foundations y Rules, y la versión 0.4.0 no escribe front matter en YAML, así que no sigue la especificación DESIGN.md de Google. Design Extractor sigue la especificación de Google, y el validador de DESIGN.md gratuito comprueba cualquier archivo con ella.
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 la cabecera, el pie de página, los botones, los campos y las tarjetas, como una receta de HTML y CSS depurados. Cada receta se comprueba con el sitio en vivo mediante una coincidencia estructural y una comparación de píxeles, y la que no pasa se marca con el motivo.
Sí. Lee la página de tu pestaña dentro de tu navegador, así que funciona en páginas en las que has iniciado sesión. Design Extractor solo lee páginas públicas: todavía no se admiten páginas detrás de un inicio de sesión, en localhost o en una red privada.
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.
Sí. Los dos generan un DESIGN.md que va en tu repositorio, así que la configuración de tu agente no cambia. Pasa el sitio por Design Extractor, en el sitio o con su extensión de Chrome, y sustituye el archivo. Si usaste Quick install, borra la carpeta del skill design-system que escribió TypeUI y mantén tu referencia a DESIGN.md.
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.