Visual Front-End Calibration, Right on the Page
UI Calibrator is a Chrome/Edge extension that lets you select page elements, adjust geometry, preview changes live, and export CSS or JSON — without reading source code or uploading any data.
How It Works
Select
Click any visible element on the page. UI Calibrator discovers it, reads its geometry, and adds it as a calibration target.
Adjust
Drag, resize, or type precise values for X, Y, W, H. Lock aspect ratio, undo/redo, and reset at target, group, or all levels.
Preview
See changes live on the real page. Toggle bounds and positioning markers. No guesswork, no round-trips.
Export
Copy or download CSS patches and structured JSON. Deterministic output, ready to hand off or apply.
Privacy by Design
No Source Code Access
UI Calibrator works on the rendered page. It never reads your project source files.
No Data Upload
All calibration data stays in your browser. No DOM, page content, or calibration results are ever sent anywhere.
No Telemetry
Zero analytics, tracking, or hidden data collection. What happens in your browser stays in your browser.
Built For
- Front-End Developers — Fix spacing, alignment, and positioning visually instead of editing CSS blind.
- Design Engineers — Bridge the gap between design specs and implementation with pixel-level precision.
- AI-Assisted Workflows — When describing a visual tweak to an AI takes longer than dragging it yourself.
Start Calibrating
8 free exports to try the full workflow. One-time purchase unlocks unlimited exports — no feature tiers, no subscriptions.
FAQ
- Does UI Calibrator read my source code?
- No. It only interacts with the rendered DOM in your browser. It never accesses your project files, repository, or build system.
- Does it upload any page data?
- No. All calibration state is stored locally in your browser. No DOM, page content, or calibration data is ever transmitted.
- What counts as a Trial export?
- Only successful Copy CSS, Copy JSON, Save CSS, or Save JSON actions consume a Trial credit. Selecting, adjusting, previewing, undo/redo, reset, and saving calibration states are all free.
- Which browsers are supported?
- UI Calibrator is a Chrome/Edge extension built on the Chromium MV3 platform. Store listings will be available once review is complete.
- What do I get when I pay?
- A one-time license that removes the export limit. Every feature remains available — there is no Free/Pro split. You pay to keep using the full tool without counting exports.