Marta Ruiz
Diseñadora de producto en Lisboa
Pasa el cursor o usa las flechas
Inspecteur d'éléments sur plan
Un mode inspection qui couvre la page d'une grille de plan et marque marges, padding et dimensions de ce que tu pointes.
Réglages
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>Inspecter</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>Designer produit à Lisbonne</p><button type="button" class="fw" data-ins>Suivre</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">Survole ou utilise les flèches</p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Overlays
Voir tout : OverlaysOù l’utiliser
Les outils de développement dessinent des boîtes sur les éléments, cet overlay en fait du design. Une fois activé, il pose une grille de plan et des règles sur la page, et pointer un élément y fait glisser des marges hachurées orange, un padding vert et une boîte de contenu bleue, avec une étiquette de nom et de taille. Pour une doc de design system ou un tutoriel.
La couleur principale est celle du plan, la seconde celle des marges. Ajoute data-ins à chaque élément à inspecter, parcours-les avec les flèches et quitte le mode avec Échap ou le même bouton.