Media
5 items
Description
Smart UI consistency and alignment inspector Pikusu (ピクス) is a Chrome extension for QA testers, frontend engineers, and design reviewers who need to verify typography, spacing, alignment, component consistency, and basic accessibility on live webpages—without opening DevTools for every check. Unlike generic inspector tools, Pikusu focuses on read-only verification, smart snapping, and automated consistency auditing to help ship a pixel-perfect UI. FIVE TABS • Inspect — Live hover metrics, alignment gridlines, box model, font radar, distance measure (focus isolation, APCA labels), design-token baselines, token ghosting (Tailwind snap hints), Tailwind sandbox (live utility preview on locked elements), CSS deadweight, lock/copy, Copy Prompt Context for AI assistants, interaction freeze. • Audit — One-click DOM consistency scan, style variants and mismatches, Hard Standards, i18n text check, visual flaws heatmap, structure footprint, Markdown/JSON export. • A11y — WCAG smoke test (contrast, touch targets, alt text, labels, focus), gradient contrast analyzer with on-page fail zones. • Overlay — Design mockup compare (opacity, offset, scale, reveal, pixel diff), annotation pins, visual regression export, clean tab capture. • Utils — Form state simulator, device viewport width presets, visual time-travel (local region snapshots + compare slider), contrast checker, stacking / z-index scanner, optional Slow 3G network throttling. • Console Error Sentinel — Header badge for page JS errors, failed assets, and console warnings (no DevTools required). RECENT HIGHLIGHTS • Tailwind sandbox — Type utility classes on a locked element for live inline preview without editing page source. • Token ghosting — Suggests nearest Tailwind v4 default-theme utilities while you hover. • Focus isolation — Dim the page around a locked element for distraction-free review. • Visual time-travel — Save and compare local region snapshots with an on-page Past ↔ Present wipe slider. • Copy Prompt Context — Export HTML/CSS, structure, and fix hints for Cursor or Claude. KEYBOARD SHORTCUTS (defaults) • Alt+Shift+P — Toggle inspector • Alt+Shift+G — Toggle gridlines • Alt+Shift+F — Freeze hover/active states Assign more at chrome://extensions/shortcuts. HOW TO USE 1. Open any http:// or https:// page. 2. Click the Pikusu toolbar icon to open the side panel. 3. Turn on the Inspector switch for overlays and live metrics. SUMMARY - Pikusu does **not** require an account. - Pikusu does **not** send your browsing data, page content, or settings to Pikusu developer servers. - Processing happens **locally in your browser** on pages you open. - You control exports (JSON, Markdown, PNG) when you choose to download them.