CSS Inspector

Inspect CSS properties and design tokens on any web page

▎ English: ▎ CSS Inspector is a Chrome extension for designers and developers who need to quickly verify CSS implementation against design specs. ▎ Why install CSS Inspector? ▎ - Instantly inspect any element's CSS properties with a visual box model overlay showing margin, padding, border, and content areas ▎ - Match CSS values to your team's design tokens — import your design system JSON and see token names like "color.primary" instead of raw hex codes ▎ - Take QA notes directly on the page — click any element, leave feedback, and export all notes as Markdown for easy handoff ▎ - Supports light and dark themes, resizable and draggable panel, keyboard shortcuts for fast navigation ▎ - No developer tools knowledge required — designed for designers to perform design QA independently ▎ Perfect for design QA workflows where designers need to verify that implemented UI matches the intended design system tokens and spacing. ▎ 한국어: ▎ CSS Inspector는 디자이너와 개발자가 CSS 구현을 디자인 스펙과 빠르게 비교 검증할 수 있는 Chrome 확장 프로그램입니다. ▎ 왜 CSS Inspector를 설치해야 하나요? ▎ - 요소에 마우스를 올리면 margin, padding, border, content 영역이 즉시 시각화됩니다 ▎ - 팀의 디자인 토큰 JSON을 import하면, hex 코드 대신 "color.primary" 같은 토큰 이름으로 바로 확인할 수 있습니다 ▎ - 페이지 위에서 직접 QA 노트를 작성하고, Markdown으로 내보내 개발자에게 전달할 수 있습니다 ▎ - 라이트/다크 테마, 리사이즈, 드래그 이동, 키보드 단축키를 지원합니다 ▎ - 개발자 도구 지식 없이도 디자이너가 독립적으로 디자인 QA를 수행할 수 있습니다 ▎ 구현된 UI가 의도한 디자인 시스템 토큰과 간격에 맞는지 검증해야 하는 디자인 QA 워크플로우에 최적화되어 있습니다.