Marta Ruiz
Diseñadora de producto en Lisboa
Pasa el cursor o usa las flechas
Inspector de elementos sobre plano
Un modo inspección que cubre la página con una cuadrícula de plano y marca margen, relleno y medidas de lo que señalas.
Ajustes
Código
<div class="uvq13-bp"><button type="button" class="fire" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="7"/><path d="M12 2.5v5M12 16.5v5M2.5 12h5M16.5 12h5"/></svg><span>Inspeccionar</span></button><div class="cd" data-ins><span class="av" data-ins aria-hidden="true">MR</span><h4 data-ins>Marta Ruiz</h4><p data-ins>Diseñadora de producto en Lisboa</p><button type="button" class="fw" data-ins>Seguir</button></div><div class="bp" aria-hidden="true"><i class="rx"><b class="hx"></b></i><i class="ry"><b class="hy"></b></i><i class="mb"></i><i class="pb"></i><i class="cb"></i><span class="lbl"><b></b> <span></span></span></div><p class="hn">Pasa el cursor o usa las flechas</p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Overlays
Ver todos: OverlaysDónde usarlo
Las herramientas del navegador dibujan cajas sobre los elementos, y este overlay lo convierte en diseño. Al activarlo, la página se cubre con una cuadrícula de plano y reglas, y al señalar un elemento se deslizan hasta él el margen rayado en naranja, el relleno en verde y la caja de contenido en azul, con una etiqueta de nombre y tamaño. Encaja en documentación de diseño y tutoriales.
El color principal es el del plano y el secundario el de los márgenes. Añade data-ins a cualquier elemento que quieras inspeccionar, recórrelos con las flechas y sal del modo con Escape o con el mismo botón.