Marta Ruiz
Diseñadora de producto en Lisboa
Pasa el cursor o usa las flechas
Blueprint element inspector
An inspect mode that covers the page with a blueprint grid and marks margin, padding and size of whatever you point at.
Settings
Code
<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>Inspect</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>Product designer in Lisbon</p><button type="button" class="fw" data-ins>Follow</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">Hover or use the arrow keys</p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Browser devtools draw boxes over elements, and this overlay turns that into a design piece. Switching it on lays a blueprint grid and rulers over the page, and pointing at an element slides orange hatched margins, green padding and a blue content box to it, plus a tag with its name and size. The rulers highlight its extent. It fits design system docs, tutorials and developer portfolios.
The main color is the blueprint and the second one the margins. Add data-ins to any element you want to inspect, move through them with the arrow keys and leave the mode with Escape or the same button.