Aller au contenu
SpecMiru
EN

Extension Chrome pour développeurs et designers

Chaque interface, cotée au pixel près.

Pointe n’importe quel élément sur n’importe quelle page. SpecMiru affiche ses styles, sa mise en page, ses mesures, ses couleurs et ses assets, puis les prépare en contexte propre pour Claude, Codex ou Cursor.

BientôtVoir comment ça marche

Illustration avec des valeurs d’exemple : SpecMiru ancré à côté d’une boutique de démonstration, un bouton sélectionné.

Ancré · button 48 × 48 · kilnhouse.shopTourne en localSans compteAncré ou superposé

Comment ça s’intègre à ton travail

Inspecter. Comprendre. Transmettre.

Trois gestes, un seul panneau. Tu ne quittes jamais la page que tu regardes.

  1. 01

    Inspecter

    Survole pour prévisualiser, clique pour figer. S’ouvre au clavier depuis n’importe quelle page.

  2. 02

    Comprendre

    Les valeurs calculées, rangées comme tu réfléchis : taille, typo, couleur, espacement, layout.

  3. 03

    Préparer pour l’IA

    Choisis Markdown, JSON, CSS ou Specs. Relis, ajoute une consigne, copie.

01Inspecteur

Comprends n’importe quel élément.

Styles, structure, mesures et contexte, lus dans les valeurs calculées par le navigateur au lieu d’être devinés depuis le code source.

  • Quatre onglets ciblés

    Essentiel, Layout, Style et Structure. Les valeurs dont tu as besoin d’abord sont en haut.

  • Le vrai modèle de boîte

    Marge, bordure, padding et contenu, au pixel près.

  • Le DOM en contexte

    Parent et enfants de la sélection, avec leurs tailles et positions.

  • Survol ou clic

    Prévisualise en bougeant, fige d’un clic.

Onglet Layout · modèle de boîte et propriétés flex

02Transmission à l’IA

Un contexte vraiment exploitable par ton assistant.

SpecMiru rédige une description compacte et structurée de l’élément : styles calculés, hiérarchie, une capture facultative et ta consigne. Les données de la page sont marquées comme non fiables, pour qu’elles ne puissent pas passer pour des instructions.

Aucun modèle d’IA ne tourne dans l’extension et rien ne lui est envoyé : c’est toi qui choisis où coller le contexte.

À coller dans

  • Claude
  • Codex
  • Cursor
  • N’importe quel chat ou IDE

Formats

  • Markdown
  • JSON
  • CSS
  • Specs

03Design

Le design system de la page, extrait.

Les couleurs avec leur nombre d’utilisations, la typo utilisée, les distances sur les deux axes et le contraste WCAG. Export des tokens en variables CSS, SCSS, Tailwind ou JSON.

Export Figma : bientôt.

  • Couleurs

    Chaque couleur, comptée

    Rangées par rôle : fond, texte, bordure, SVG. Choisis-en une pour la mettre en évidence sur la page.

  • Contraste

    Le ratio WCAG de n’importe quelle paire

    Choisis une couleur de texte et une de fond. AA, AA grand texte et AAA vérifiés aussitôt.

  • Mesure

    Les distances en X et en Y

    Choisis un élément de référence, puis survole-en un autre : l’écart s’affiche sur la page, en px ou en rem.

Captures

Quatre modes de capture, en PNG, JPEG, WebP ou PDF. Les images restent sur ton appareil.

  • Élément

    L’élément sélectionné, avec une marge de 0, 8 ou 16 px.

  • Zone libre

    Trace un cadre où tu veux. Maj garde les proportions.

  • Écran visible

    Exactement ce que tu vois, en 1× ou 2×.

  • Page entière

    Défile, assemble, ne garde les en-têtes fixes qu’une fois.

04Assets

Chaque image, SVG et vidéo de la page.

Trouvés dans le DOM, les fonds CSS et les SVG intégrés. Prévisualise un asset, copie sa source, ou exporte une sélection en ZIP, dans la limite des règles CORS de la page.

05Superposé et Ancré

Ancré quand tu construis.
Superposé quand tu relis.

Ancré

Dans le panneau latéral de Chrome. La page se réorganise à côté.

Superposé

Flotte au-dessus de la page sans changer sa largeur. Déplace-le à gauche ou à droite, réduis-le, redimensionne-le de 320 à 720 px.

Ouvre SpecMiru avec . Appuie de nouveau pour lancer l’inspection.

Confidentialité · local-first

Ce que tu inspectes reste sur ta machine.

SpecMiru lit la page dans ton navigateur. Rien de ce que tu inspectes n’est envoyé et aucun compte n’est nécessaire. Copier le contexte le met dans ton presse-papiers : c’est toi qui décides où il va.

Permissions minimales : activeTab, scripting, sidePanel et storage. Aucun accès à tous les sites à l’installation.

Lire la politique de confidentialité

  • Reste sur ton appareil

    Styles inspectés, DOM, captures, assets et contexte généré.

  • Exclu par défaut

    Valeurs des champs de formulaire, mots de passe, et e-mails ou tokens détectés sur la page.

  • Désactivé tant que tu ne l’actives pas

    Statistiques d’usage anonymes. URL, capture ou diagnostic joints à un signalement de bug.

  • Jamais

    Vente de données, pistage publicitaire, lecture des pages que tu n’inspectes pas.

Partager des statistiques d’usage anonymes

Uniquement des compteurs de fonctionnalités. Ni URL, ni contenu de page. Désactivé par défaut.

Désactivé

Comment ça marche

Prêt en moins d’une minute.

  1. Étape 1

    Ajouter à Chrome

    Depuis le Chrome Web Store. Sans inscription.

  2. Étape 2

    L’épingler

    Icône puzzle dans la barre d’outils, puis l’épingle à côté de SpecMiru.

  3. Étape 3

    L’ouvrir sur une page

    ou clic sur l’icône de la barre d’outils.

  4. Étape 4

    Cliquer, puis copier

    Fige un élément et appuie sur Copier pour l’IA.

Pour qui

Pensé pour celles et ceux qui livrent des interfaces.

  • Développeurs front-end

    Lis le CSS calculé, le modèle de boîte et le DOM sans fouiller les panneaux des DevTools.

    • Code
    • Layout
    • Structure

  • Product designers

    Vérifie espacements, typo et contraste sur le site en ligne, face à la maquette.

    • Mesure
    • Typographie
    • Contraste

  • Product managers

    Fais des captures exactes et décris les problèmes avec de vraies valeurs.

    • Capture
    • Specs

  • Builders assistés par l’IA

    Donne à Claude, Codex ou Cursor un contexte précis plutôt qu’une capture vague.

    • Copier pour l’IA
    • Markdown

FAQ

Questions

Contacter le support
SpecMiru envoie-t-il les pages que j’inspecte quelque part ?

Non. L’inspection se fait dans ton navigateur et le contenu inspecté ne quitte jamais ton appareil. Le seul trafic réseau possible de l’extension, ce sont des statistiques d’usage anonymes facultatives, désactivées tant que tu ne les acceptes pas, et qui ne contiennent jamais de contenu de page ni d’URL.

De quelles permissions a-t-il besoin ?

activeTab (accès à l’onglet uniquement quand tu invoques SpecMiru), scripting (pour injecter son inspecteur local après ta demande), sidePanel (mode Ancré) et storage (tes préférences et la sélection en cours). Une permission d’hôte existe pour le point d’envoi des statistiques facultatives. Aucun accès à tous les sites à l’installation.

Peut-il inspecter n’importe quelle page ?

La plupart des pages web, oui. Chrome n’autorise aucune extension sur ses pages internes (chrome://), ses réglages ou le Chrome Web Store. Le contenu d’une iframe d’une autre origine n’est pas accessible.

Utilise-t-il de l’IA ?

Aucun modèle ne tourne dans SpecMiru et il n’appelle aucun service d’IA. Il produit un contexte déterministe que tu colles où tu veux.

Comment l’ouvrir ?

Clique sur l’icône SpecMiru dans la barre d’outils, ou appuie sur Alt+Maj+S. Appuie de nouveau pour lancer l’inspection. Le raccourci se modifie dans les raccourcis clavier de Chrome.

Y a-t-il une intégration Figma ?

Pas encore. L’envoi des tokens vers Figma est marqué « Bientôt » dans l’extension.

Inspecte ton premier élément.

Chrome sur ordinateur, version 116 ou plus récente.

BientôtLire la doc