Inspect, map and document any interface with precision.

Analyze any webpage in seconds: inspect CSS properties, map typography and colors, browse assets, detect stack technologies, and export structured reports.

Download Source How to Install

Analysis mode ready

OverviewElement definitions and direct export
ColorsText and surface color roles
TypographyHierarchy summary and full audit
StackCategory mode and cloud mode

Core capabilities

Built for continuous site analysis

Kaes Keid combines design inspection and technology detection in one workflow, so you can move from visual details to stack evidence without switching tools.

Deep Property Inspection

Inspect box model, spacing, borders and text styles from hovered elements without leaving the side panel.

Grid & Flexbox Analyzer

See grid and flex containers, track definitions, alignments, and spacing decisions to debug layout behavior quickly.

Color Palette Extraction

Separate color roles by function with compact summaries and downloadable variables for design systems.

Unified Reports

Generate JSON or Markdown reports with scopes per element, tab or full site in one consistent flow.

Stack Detection

Read frameworks and services in category mode or weighted cloud mode to compare confidence and frequency.

Core Web Vitals

Track key runtime metrics while inspecting page structure, connecting performance results to real UI decisions.

Setup

How to Install

Click each card header to open command examples. The modal occupies the full header for better readability.

Clone commands

git clone https://github.com/mafhper/kaes-keide-inspector.git
cd kaes-keid-inspector

1. Clone the Repository

Download or clone the project locally to start building and testing the extension.

Build commands

bun install
bun run build

# or using npm
npm install
npm run build

2. Build the Extension

Compile TypeScript and bundle all files into dist/ using Bun or npm.

Load unpacked

chrome://extensions
Enable "Developer mode"
Click "Load unpacked"
Select the dist/ folder

3. Load into Browser

Enable Developer Mode and load the compiled extension folder from the Chrome extensions page.

Run flow

How to Use

Follow this flow to inspect elements, capture design data, and generate reports with minimal interruption.

1. Open the Extension

Click the Kaes Keid icon in the toolbar. The default tab starts at Stack and scans technologies.

2. Select an Analyzer Tab

Switch to Overview, Colors, Typography or Assets to activate contextual inspection and outputs.

3. Export or Return to Stack

Export reports in JSON or Markdown. Returning to Stack stops inspection and clears focus.