Chrome extension for developers & designers
Every interface, read like a spec.
Point at any element on any page. SpecMiru shows its styles, layout, measurements, colors and assets, then packages them as clean context for Claude, Codex or Cursor.
Illustration with example values: SpecMiru docked next to a demo shop page, a button selected.
How it fits your work
Inspect. Understand. Hand off.
Three moves, one panel. You never leave the page you are looking at.
- 01
Inspect
Hover to preview, click to lock. Open from any page with the keyboard.
- 02
Understand
Computed values grouped the way you think: size, type, color, spacing, layout.
- 03
Prepare for AI
Pick Markdown, JSON, CSS or Specs. Review, add an instruction, copy.
01Inspector
Understand any element.
Styles, structure, measurements and context, read from the browser’s computed values instead of guessed from source.
Four focused tabs
Overview, Layout, Style and Structure. The values you need first are on top.
Real box model
Margin, border, padding and content with the exact pixels.
DOM in context
Parent and children of the selection, with their sizes and positions.
Hover or click
Preview while you move, lock with a click.
Layout tab · box model and flex properties
02AI handoff
Context your assistant can actually use.
SpecMiru writes a compact, structured description of the element: computed styles, hierarchy, an optional screenshot and your instruction. Page data is labelled as untrusted so it can’t pass for instructions.
No AI model runs inside the extension and nothing is sent to one: you choose where to paste it.
Paste into
- Claude
- Codex
- Cursor
- Any chat or IDE
Formats
- Markdown
- JSON
- CSS
- Specs
03Design
The page’s design system, extracted.
Colors with usage counts, type in use, distances on both axes and WCAG contrast. Export tokens as CSS variables, SCSS, Tailwind or JSON.
Figma export: coming soon.
Colors
Every color, counted
Grouped by role: background, text, border, SVG. Pick one to highlight it on the page.
Contrast
WCAG ratio for any pair
Pick text and background colors. AA, AA large and AAA checked instantly.
Measure
Distances on X and Y
Pick a reference element, then hover another: the gap shows on the page, in px or rem.
Screenshots
Four capture modes, as PNG, JPEG, WebP or PDF. Images stay on your device.
Element
The selected element, with a 0, 8 or 16 px margin.
Free region
Drag a frame anywhere. Shift keeps proportions.
Visible screen
Exactly what you see, at 1× or 2×.
Full page
Scrolls, stitches, keeps sticky headers once.
04Assets
Every image, SVG and video on the page.
Discovered from the DOM, CSS backgrounds and inline SVG. Preview any asset, copy its source, or export a selection as a ZIP — within the page’s own CORS rules.
05Overlay & Docked
Docked when you build.
Overlay when you review.
Docked
Lives in Chrome’s side panel. The page reflows next to it.
Overlay
Floats over the page without changing its width. Move it left or right, collapse it, resize it from 320 to 720 px.
Open SpecMiru with Alt⇧S. Press again to start inspecting.
Privacy · local-first
What you inspect stays on your machine.
SpecMiru reads the page inside your browser. Nothing you inspect is uploaded and no account is needed. Copying context puts it on your clipboard; you decide where it goes.
Minimal permissions: activeTab, scripting, sidePanel and storage. No access to all websites at install.
Read the privacy policyStays on your device
Inspected styles, DOM, screenshots, assets and generated context.
Excluded by default
Form field values, password inputs, and emails or tokens detected on the page.
Off until you turn it on
Anonymous usage statistics. Page URL, screenshot or diagnostic attached to a bug report.
Never
Selling data, ad tracking, reading pages you are not inspecting.
Share anonymous usage statistics
Feature counts only. No URLs, no page content. Off by default.
How it works
Set up in under a minute.
Step 1
Add to Chrome
From the Chrome Web Store. No sign-up.
Step 2
Pin it
Puzzle icon in the toolbar, then the pin next to SpecMiru.
Step 3
Open on any page
Alt⇧S or click the toolbar icon.
Step 4
Click, then copy
Lock an element and press Copy for AI.
Who it’s for
Built for people who ship interfaces.
Frontend developers
Read computed CSS, the box model and the DOM without digging through DevTools panes.
- Code
- Layout
- Structure
Product designers
Check spacing, type and contrast on the live build against the spec.
- Measure
- Typography
- Contrast
Product managers
Capture exact screenshots and describe issues with real values.
- Capture
- Specs
AI-assisted builders
Give Claude, Codex or Cursor precise context instead of a vague screenshot.
- Copy for AI
- Markdown
Does SpecMiru send the pages I inspect anywhere?
No. Inspection happens in your browser and the inspected content never leaves your device. The only network traffic the extension can make is optional, anonymous usage statistics, off until you explicitly opt in, which never include page content or URLs.
Which permissions does it need?
activeTab (access to the tab only when you invoke SpecMiru), scripting (to inject its local inspector after you ask), sidePanel (Docked mode) and storage (your preferences and the current selection). One host permission exists for the opt-in statistics endpoint. There is no access to all websites at install.
Can it inspect any page?
Most web pages, yes. Chrome does not allow extensions on its internal pages (chrome://), its settings or the Chrome Web Store. Content inside cross-origin frames cannot be entered.
Does it use AI?
No model runs inside SpecMiru and it does not call any AI service. It produces a deterministic context that you paste wherever you want.
How do I open it?
Click the SpecMiru icon in the toolbar, or press Alt+Shift+S. Press again to start inspecting. The shortcut can be changed in Chrome’s keyboard shortcuts settings.
Is there a Figma integration?
Not yet. Sending design tokens to Figma is marked “Coming soon” in the extension.
Inspect your first element.
Desktop Chrome 116 or later.