Design Extractor: extensión de Chrome
La extensión de Chrome de Design Extractor convierte el sitio web de tu pestaña actual en un DESIGN.md: un archivo de sistema de diseño con los colores, la tipografía, el espaciado, las formas y las reglas de componentes del sitio, escrito para agentes de programación como Claude Code, Cursor y Copilot. Un clic en la barra de herramientas, sin URL que pegar.
Se instala gratis. Cada extracción gasta créditos de tu saldo prepago, al mismo precio que en el sitio.
Qué hace
Un DESIGN.md de la pestaña en la que estás
Extrae la página de tu pestaña
Con un clic, la dirección de tu pestaña pasa por la misma extracción que el formulario de la página de inicio. Pro también recorre las páginas clave del sitio, así que el resultado refleja el sitio, no una sola pantalla.
Escribe un sistema de diseño completo
Tokens en YAML para colores, tipografía, espaciado y formas, más las ocho secciones del formato DESIGN.md: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components y Do's and Don'ts.
Una receta para cada componente
Los componentes que toma de la página, como la cabecera, los botones, los campos y las tarjetas, se entregan como HTML y CSS depurados, cada uno comprobado con el sitio en vivo o marcado con el motivo.
La misma cuenta, los mismos créditos
La extensión reutiliza la sesión que tienes en design-extractor.com. Sin un segundo inicio de sesión, y la ventana muestra tu saldo de créditos.
Cómo funciona
Tres pasos de la pestaña al DESIGN.md
Añádela a Chrome y fíjala
Instálala desde Chrome Web Store y fíjala desde el icono de la pieza de puzle. Pide acceso a design-extractor.com y a la pestaña activa, nada más. Inicia sesión en el sitio una vez; la ventana de la extensión usa esa sesión.
Abre una página pública y haz clic en Extract this page
Elige un modo en la ventana de la extensión e inicia la extracción. El progreso se muestra en la ventana mientras avanza, y puedes seguir navegando.
Abre el DESIGN.md
Open result te lleva al DESIGN.md en el sitio. También se guarda en Mis extracciones, donde puedes copiarlo, descargarlo o editarlo antes de ponerlo en tu repositorio.
Los detalles de instalación, el inicio de sesión, los créditos y los límites actuales están en la guía de configuración de la extensión. ¿Prefieres pegar una URL? La misma extracción funciona desde la página de inicio.
Comparativa
Qué aporta frente a DESIGN.md Style Extractor de TypeUI
DESIGN.md Style Extractor de TypeUI es una extensión gratuita y de código abierto que rellena la plantilla propia de TypeUI con los estilos de la página de tu pestaña. La extensión de Design Extractor añade:
Un DESIGN.md que sigue la especificación de Google
Tokens en el front matter en YAML y las secciones canónicas en el orden de la especificación. Comprueba cualquier archivo con el validador de DESIGN.md gratuito.
Una receta para cada componente que toma
HTML y CSS depurados para la cabecera, los botones, los campos, las tarjetas y más, cada uno comprobado con el sitio en vivo mediante una coincidencia estructural y una comparación de píxeles, o marcado con el motivo.
Sitios con restricción regional
Cuando un sitio bloquea a visitantes de algunos países, la extracción puede pasar por un navegador en otro país. 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).
La misma cuenta y los mismos créditos que en el sitio
Cada extracción se guarda en Mis extracciones, donde puedes editarla, copiarla o descargarla, y tu agente puede leerla por MCP.
Comprobado el con su versión 0.4.0, su README y código fuente y su ficha en Chrome Web Store.
| Aspecto | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| Cómo lee el sitio | Nuestros servidores abren la dirección de la página en un navegador y analizan la página renderizada. Pro también recorre las páginas clave del sitio. | Lee los estilos calculados de hasta 280 elementos visibles de la página abierta en tu pestaña, dentro de tu navegador. |
| Qué sigue el resultado | 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. | La plantilla DESIGN.md propia de TypeUI (Mission, Brand, Style Foundations, Rules y más), sin front matter en YAML, o un SKILL.md. |
| Componentes | Una receta de HTML y CSS depurados para cada componente que toma de la página, comprobada con el sitio en vivo mediante una coincidencia estructural y una comparación de píxeles, o marcada con el motivo. | Un recuento por tipo de componente bajo unas pautas generales de componentes. El resultado no se compara con la página renderizada. |
| Dónde va el resultado | Se guarda en Mis extracciones en el sitio, donde puedes editarlo, copiarlo o descargarlo. | Se muestra en la ventana de la extensión, donde lo copias o lo descargas como archivo. |
| Páginas que puede leer | 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. | La página abierta en tu pestaña, incluidas páginas en las que has iniciado sesión, ya que lee esa página directamente. |
| Precio | Se instala gratis. Las extracciones gastan créditos prepago. | Gratis y de código abierto (MIT). |
Elige la extensión de Design Extractor si necesitas un DESIGN.md que siga la especificación de Google, con una receta para cada componente comprobada con el sitio en vivo, guardado en tu cuenta. La comparativa completa está en TypeUI vs Design Extractor.
Preguntas frecuentes
Preguntas sobre la extensión de Chrome
Respuestas breves sobre cómo instalar la extensión, qué envía y cuánto cuesta.
Instalarla es gratis. Cada extracción gasta créditos de tu saldo prepago al mismo precio que en el sitio. Los paquetes empiezan en 5 US$ por 50 créditos, no hay suscripción y los créditos no caducan. Si una extracción falla por un problema de nuestra parte, se devuelven los créditos.
Solo la dirección de la pestaña actual y el modo que elegiste, cuando haces clic en Extract this page. Nunca lee el contenido de la página, no se ejecuta en segundo plano en las páginas que visitas y no contiene analítica.
Todavía no. Nuestros servidores capturan la página a partir de su dirección, así que la página tiene que ser pública. No se admiten páginas detrás de un inicio de sesión, en localhost o en una red privada. La extensión solo está disponible para Chrome.
No. La ventana de la extensión reutiliza la sesión que iniciaste en design-extractor.com. Si no has iniciado sesión, muestra un botón Sign in que abre el sitio. Cerrar sesión en la extensión también cierra tu sesión en el sitio.
Cualquier agente que lea archivos de tu repositorio. Guarda el DESIGN.md junto a tu código e indícaselo a Claude Code, Cursor, GitHub Copilot, Codex, Windsurf o Google Stitch como referencia de estilo para interfaces nuevas.
Extensiones como DESIGN.md Style Extractor de TypeUI leen los estilos calculados en tu navegador y rellenan su propia plantilla con los valores. Design Extractor escribe un DESIGN.md que sigue la especificación de Google, con una receta de HTML y CSS para cada componente que toma de la página, comprobada con el sitio en vivo o marcada con el motivo, y lo guarda en tu cuenta.
Obtén un DESIGN.md de la pestaña en la que estás
Se instala gratis. Cada extracción gasta créditos de tu saldo prepago, al mismo precio que en el sitio.