Raykit

One tool at a time — precision design tools in your browser. Press Cmd+Shift+K (customizable) to open.

Raykit brings a Figma-like command palette to every website so you can inspect, measure, and capture without leaving the page. Toggle the palette with Cmd+Shift+K (Ctrl+Shift+K on Windows/Linux) to open focused tools built for product designers and front-end engineers. Key tools: • Spacing: snap distances between elements with pixel-accurate overlays. • Ruler: horizontal/vertical rulers with draggable guides. • Typography: read font stacks, weights, sizes, and line-height inline. • Contrast: WCAG contrast checker on hover with pass/fail badges. • Style Guide: extract colors, text styles, and assets from the current page. • Image Extractor: grab inline/background images and download in one click. • Element Shot: capture selected elements or full pages; auto-names files. • Breakpoint Snapshots: batch screenshots at custom widths for responsive QA. Why teams use it: fast keyboard workflow, zero sign-up, runs entirely in the browser, and cleans itself up with Esc.