| name | comprehensive-visual-extraction-v5 |
| description | Habilidad SOTA V5 2026 para Resonancia Pixel-Semántica: extracción exhaustiva y sin alucinaciones de WebGL 3D, paneles de IA y diseños adaptativos en planos ejecutables para agentes. |
| category | visual-extraction |
| version | 1.0.0 |
| lang | es |
| direction | ltr |
| source_version | 1.0.0 |
| translated_at | 2026-06-29T00:00:00.000Z |
Habilidad de Extracción Visual Integral (CVE) — Paradigma V5 (Edición 2026)
Resumen
Esta habilidad equipa al agente autónomo con la metodología de vanguardia V5 (SOTA) para Resonancia Pixel-Semántica. Yendo mucho más allá del mapeo de coordenadas 2D estático del protocolo V4 heredado, V5 trata la perfección visual y la corrección semántica/estructural como una dimensión híbrida única y unificada.
El objetivo es la reconstrucción agentiva absoluta: la salida debe servir como un plano ejecutable impecable que permita a un agente "ciego" secundario generar código nativo del navegador (HTML/CSS/JS/WebGL) que logre tanto un renderizado visual perfecto al píxel como una equivalencia funcional impecable en todos los dispositivos. V5 maneja de forma nativa las complejidades de los flujos de datos nativos de IA, el raycasting WebGL 3D y los diseños fluidos adaptativos entre dispositivos.
Capacidades Principales y el Cambio de Paradigma V5
- Resonancia Pixel-Semántica: No te limitas a "ver" píxeles; percibes la intención funcional detrás de ellos. Una sombra no es solo un código hexadecimal; es un
box-shadow CSS que indica elevación y estado interactivo. Una esfera 3D no es solo un círculo; es una malla WebGL con propiedades de material y escuchadores de eventos de raycast.
- Razonamiento Espacial Unificado (Abstracción de Capas): Debes clasificar la tubería de renderizado. Distinguir entre capas
DOM/UI, WebGL/Escena 3D y Canvas/SVG. Utilizar Coordenadas de Dispositivo Normalizadas (NDC) y estimar Parámetros de Cámara 3D (perspectiva, campo de visión) para mapear clics en pantalla 2D a intersecciones espaciales 3D (Raycasting).
- Modelado de Estado y Dinámica: Las interfaces son sistemas vivos. Debes extraer Escuchadores de Eventos Accionables (
onClick, onHover, onDrag), inferir Lógica de Transición de Estado (ej., estados de carga, alternancia de modales) e identificar Semántica de Enlace de Datos (cómo los componentes UI se mapean a flujos de datos JSON/API subyacentes).
- Conciencia Arquitectónica (Adaptación entre Dispositivos): Rechaza la dependencia absoluta de píxeles. Debes inferir la topología subyacente de CSS Grid/Flexbox, unidades fluidas (
vw, vh, rem, %) y puntos de ruptura condicionales de Media Query para asegurar que la recreación del agente ciego sea nativamente responsiva.
El Protocolo de Extracción
Cuando se te invoque, debes ejecutar estrictamente este protocolo de múltiples capas impulsado por resonancia.
Fase 1: Topología Global y Análisis de la Tubería de Renderizado
- Definir el Viewport y NDC: Mapea el espacio de la imagen conceptualmente desde
[0, 0] a [100, 100] (escala porcentual NDC), pero establece inmediatamente el viewport base asumido (ej., 1440x900) para calcular relaciones de unidades fluidas.
- Clasificación de Capas de Renderizado: Escanea la imagen y segmenta en contextos de renderizado:
[DOM]: Elementos HTML/CSS estándar.[WebGL/3D]: Escenas renderizadas por GPU, búferes de profundidad, iluminación.[Overlay/HUD]: Elementos DOM nativos flotando sobre un lienzo 3D.
- Hipótesis de Máquina de Estados: Proporciona un resumen de 3 oraciones del propósito funcional principal de la aplicación, estado interactivo actual (ej., "Panel en 'Modo Oscuro' con sondeo activo de flujo de datos") y flujo de usuario principal.
Fase 2: El Proceso de Extracción Profunda GCoT Resonante
Genera la salida usando un formato fuertemente estructurado. Para cada componente distinto, ejecuta el Bucle GCoT V5.
El Bucle GCoT V5 (Obligatorio para cada elemento)
- Anclar y Capa: Indica el cuadro delimitador NDC
[x1, y1, x2, y2], el Z-Index/Profundidad estimado y la [Capa de Renderizado].
- Identificar y Abstract: Clasifica el elemento semánticamente (ej., "React Data Grid", "Three.js Interactive Mesh", "ARIA Navigation Landmark").
- Reenganchar (Zoom y Raycast): Indica explícitamente: (Acercando a RoI / Lanzando Rayo desde Cámara). Si es 3D, estima el ángulo de cámara y la normal de la malla en el punto de interacción.
- Extraer Atributos Pixel-Semánticos:
- Visual (Píxel): Hex/RGB exacto, propiedades de material (metálico/rugosidad para 3D), ángulos/paradas de gradiente, física de sombra.
- Estructural (CSS/Caja): Alineación Flexbox/Grid, estimaciones de relleno/espacio, traducciones de unidades fluidas (ej.,
width: 35% en lugar de 504px).
- Funcional (Estado/Eventos): Escuchadores de eventos inferidos, roles ARIA, claves de enlace de datos (ej.,
v-for="item in apiResponse").
- Relación Espacial y Lógica: Describe la alineación geométrica y la jerarquía lógica (ej., "Hijo DOM de
[Ancla Padre], actúa como disparador de raycast para [Ancla WebGL]").
Desglose Categórico (Aplicando el Bucle GCoT V5)
Debes aplicar el bucle de manera integral en estas cuatro dimensiones:
- Diseño Estructural Adaptativo: Mapea la arquitectura macroscópica de CSS Grid/Flexbox. Extrae Wrappers de Ancho Máximo Global, container queries y lógica explícita de puntos de ruptura
@media basada en el comportamiento de ajuste de elementos.
- Grafo de Escena 3D y WebGL: Reconstruye el mundo 3D. Define Cámaras, Fuentes de Luz (direccional/ambiente), Geometrías de Malla, Texturas y zonas de interacción de Raycast.
- Datos Dinámicos y Paneles de IA: Extrae topologías de gráficos. Mapea puntos de datos visuales a valores semánticos. Infiere la estructura de carga útil API requerida para poblar los widgets.
- Texto Total y Jerarquía Semántica: Extrae todo el texto jerárquicamente. Reconstruye tablas en Markdown perfecto. Asegura el orden lógico del DOM para lectores de pantalla, independiente del diseño visual.
Fase 3: El Plano de Reconstrucción Agentiva (Validación)
- Verificación de Topología y Física: Verifica la lógica de profundidad/oclusión 3D. Asegura que las reglas de anidamiento DOM sean matemáticamente sólidas (las coordenadas hijas deben encajar lógicamente dentro de los contenedores fluidos padres).
- Verificación de Fluidez Responsiva: Confirma que las mediciones visuales absolutas se hayan traducido exitosamente a lógica CSS escalable (unidades
%, vw, fr).
- La Prueba de Ejecución del Agente Ciego: Simula mentalmente a un agente ciego leyendo tu salida. ¿Podría escribir un
index.html, styles.css, app.js y scene.jsx funcional que pase la validación de criterio dual (renderizado perfecto al píxel + equivalencia funcional)? Si no, itera y refina el plano.
Especificación del Formato de Salida
La salida final debe formatearse en Markdown limpio y altamente estructurado.
- Resumen Ejecutivo del Plano: Una visión arquitectónica de alto nivel (inferencia de stack tecnológico, patrón de gestión de estado, requisitos del motor 3D).
- Arquitectura CSS y Responsiva: Bloques de código definiendo los diseños CSS Grid/Flexbox inferidos, Variables CSS (Tokens de Diseño) y Media Queries.
- El Grafo de Escena V5 (JSON): Usa bloques de código para generar un array JSON unificado que represente el árbol DOM y el Grafo de Escena 3D, incluyendo cuadros delimitadores, etiquetas semánticas y escuchadores de eventos.
- Inventario de Elementos GCoT Resonante: Encabezados Markdown estándar para cada componente principal, estrictamente precedidos por su ancla espacial
[x1, y1, x2, y2] | [Capa].
- Reglas de Comportamiento y Estado: Una lista declarativa que mapea interacciones de usuario a respuestas de la aplicación (ej.,
ON_CLICK [Botón Enviar] -> DISPARAR API_POST -> MUTAR ESTADO [Cargando]).
Fin de la Definición de la Habilidad
