Marta Ruiz
Diseñadora de producto en Lisboa
Pasa el cursor o usa las flechas
Element-Inspektor auf Blaupause
Ein Inspektionsmodus, der die Seite mit einem Blaupausenraster überzieht und Außenabstand, Innenabstand und Maße markiert.
Einstellungen
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>Untersuchen</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>Produktdesignerin in Lissabon</p><button type="button" class="fw" data-ins>Folgen</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">Mit dem Zeiger darüberfahren oder Pfeiltasten nutzen</p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Overlays
Alle ansehen: OverlaysWofür du ihn nutzen kannst
Die Entwicklertools im Browser zeichnen Kästen über Elemente, und dieses Overlay macht daraus ein Gestaltungselement. Eingeschaltet legt es ein Blaupausenraster mit Linealen über die Seite, und zeigst du auf ein Element, gleiten orange schraffierte Außenabstände, grüner Innenabstand und ein blauer Inhaltskasten dorthin, dazu ein Schild mit Name und Größe. Die Lineale markieren die Ausdehnung. Passt zu Designsystem-Dokus, Tutorials und Entwicklerportfolios.
Die Hauptfarbe ist die Blaupause, die zweite der Außenabstand. Gib jedem Element, das prüfbar sein soll, ein data-ins, wechsle mit den Pfeiltasten und verlasse den Modus mit Escape oder demselben Button.