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. Calibration stays local by default; UI Calibrator only sends data when you explicitly activate or validate a License or submit a Feedback report, as described in the Privacy Policy.
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.
Local by Default
Calibration data stays in your browser by default. UI Calibrator only sends data when you explicitly activate or validate a License or submit a Feedback report, as described in the Privacy Policy.
No Telemetry
Zero analytics, tracking, or hidden data collection. By default, your calibration data 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?
Calibration state is stored locally in your browser by default. UI Calibrator only sends data when you explicitly activate or validate a License or submit a Feedback report, as described in the Privacy Policy.
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.