Lizard Studio is an innovative developer and design tool that acts as Claude Code directly inside your Google Chrome side panel. By looking at the exact same web page you are building, it bridges the gap between front-end visual inspection and code generation.

The extension allows Claude to see your text, code, console logs, and network calls in real-time. It has active capabilities to click, type, pick colors, and precisely measure gaps between layout elements. When you encounter a bug or notice an element looks incorrect, you can simply point directly to the issue, and Lizard Studio will fix the underlying code.

Completely 100% open source, Lizard Studio operates using your own personal Claude subscription, giving developers ultimate control and transparency over their AI-powered web development workflow.

Pros of Lizard Studio

Integrates Claude Code directly into the Google Chrome side panel
Inspects live web pages, including text, code, console logs, and network calls
Interactive capabilities like clicking, typing, picking colors, and measuring element gaps
100% open source and works directly with your own Claude subscription

Cons of Lizard Studio

Requires a personal Claude subscription to operate
Limited to the Google Chrome browser ecosystem
Dependency on browser-based extension performance

Frequently Asked Questions

What is Lizard Studio?

Lizard Studio is a Chrome extension that embeds Claude Code directly into your browser's side panel, allowing it to view your live web page, inspect code, check console logs, and fix visual bugs.

Is Lizard Studio open source?

Yes, Lizard Studio is 100% open source and is designed to be used with your own Claude subscription.

What capabilities does Lizard Studio have on a web page?

It can view text, code, console logs, and network calls. Additionally, it can click, type, pick colors, measure gaps between elements, and help fix code where visual bugs occur.