Lizard Studio

Lizard Studio

**[Install from the Chrome Web Store →](https://chromewebstore.google.com/detail/kgbaeoalmkabpoglpjcdmppdmcipfdeh)**

**Claude Code in your browser's side panel — an AI coding agent that can see, measure, and fix the page you're building.**

A Chrome extension (Manifest V3) with two halves that feed each other:

• A real Claude Code chat in the side panel — it drives the actual claude CLI on your machine (your account, your folder, your permissions), wired into the browser so Claude can read the DOM, take screenshots, watch the console/network, and click and type into the live tab.
• A design overlay toolkit on the page: rulers, guides, grids, responsive preview, eyedropper, DevTools-style inspection, and an annotator whose screenshots drop straight into the chat.

The loop: notice something off → measure or circle it on the page → send it to Claude with the element and screenshot attached → Claude inspects the live tab, edits the code in your project folder, and you watch the page update.

Everything runs locally. The extension talks to a tiny native host that spawns `claude`. No servers of ours, no telemetry — the only network traffic is Claude itself.

Setup

1. The extension

Install it from the [Chrome Web Store](https://chromewebstore.google.com/detail/kgbaeoalmkabpoglpjcdmppdmcipfdeh), or load this folder yourself:

1. Open chrome://extensions, enable Developer mode.
2. Load unpacked → select this folder.
3. Pin it. Click the icon to toggle the toolbar; open the side panel for the chat. Set a toolbar shortcut at chrome://extensions/shortcuts if you want one.

Content scripts can't run on `chrome://` pages, the New Tab page, or the Chrome Web Store.

2. The Claude Code host (one-time)

The chat talks to the CLI through a small local native-messaging host (Node, zero deps). Install once — macOS, Linux, Windows:

npx @lizard-build/lizard-studio-host install

(`npx … uninstall` removes it. Hacking on t