Extraer tokens de diseño visual en archivos DESIGN.md listos para IA
Extrator de DESIGN.md, creado por Vitor M. M. en colaboración con ibe.IA, es una extensión de Chrome que convierte la identidad visual de un sitio en una referencia estandarizada de DESIGN.md para código de interfaz de usuario asistido por IA. Inspecciona páginas y captura color, tipografía, espaciado y otras reglas tokenizadas para formar un documento legible por máquina. La extensión utiliza un panel lateral compacto para una extracción rápida y está dirigida a desarrolladores frontend, diseñadores de UI/UX e ingenieros de prompts que necesitan una guía visual consistente para interfaces impulsadas por LLM.
Convierte los estilos en página en un archivo de token de diseño estructurado
La extensión extrae datos de estilo concretos de cualquier pestaña activa y los escribe en un archivo DESIGN.md. El extractor identifica colores, escalas tipográficas, unidades de espaciado, estilos de borde y sombras y los formatea como una referencia de token. La salida sigue la especificación del Grupo de Trabajo de Tokens de Diseño de W3C (DTCG) para que los equipos reciban un modelo de token estandarizado en lugar de una lista de colores ad-hoc. Esto ayuda a las herramientas posteriores a interpretar los tokens de manera confiable.
Se integra en la navegación sin salir de la página
La extracción se realiza desde un panel lateral construido sobre la API del Panel Lateral de Chrome, permitiendo a los usuarios iniciar la captura con un clic mientras ven el sitio en vivo. El diseño del panel mantiene el flujo de trabajo compacto y no intrusivo, de modo que los diseñadores pueden inspeccionar componentes y activar extracciones sin abrir una ventana separada. Las capturas de varias páginas consolidan tokens a través de las páginas navegadas en un solo archivo de referencia para la consistencia a nivel de proyecto.
Mantiene el procesamiento local al navegador por privacidad
Todo el análisis ocurre en el navegador del usuario; la extensión documenta que no transmite ni almacena datos externamente y no requiere una cuenta. Ese procesamiento solo local se adapta a entornos profesionales con estrictas reglas de privacidad, ya que los tokens extraídos y el DESIGN.md generado permanecen en el entorno del cliente y pueden ser exportados directamente para uso interno.
Prepara archivos de tokens para editores de IA y uso programático
La herramienta produce artefactos listos para IA incluyendo un Prompt de Consolidación de IA y un archivo Markdown exportable con frontmatter YAML adecuado para la ingestión programática. El prompt se presenta para ayudar a LLMs como Claude y Cursor a aplicar el conjunto de tokens, mientras que la salida Markdown está formateada para su integración en pipelines de desarrolladores. La extensión funciona en Chrome y otros navegadores basados en Chromium debido a su dependencia de API.
Mejor adaptado a equipos que desean orientación de diseño reproducible para código asistido por IA
La extensión es una opción práctica para equipos de frontend e ingenieros de prompts que necesitan una referencia de diseño repetible y legible por máquina para reducir la deriva visual en la interfaz de usuario generada por LLM. Un compromiso es que adoptarlo requiere un pequeño cambio en el flujo de trabajo para importar y versionar archivos de tokens dentro de los procesos de construcción o revisión existentes. Para proyectos que imponen fidelidad de diseño, la extensión ofrece una forma enfocada y consciente de la privacidad para codificar reglas visuales.
