Item logo image for Pawlish

Pawlish

Item media 1 (screenshot) for Pawlish

Overview

Visual CSS editor using Chrome DevTools Protocol. Inspect cross-origin styles, live-edit :hover states, export as an AI prompt.

Pawlish - The Visual CSS Editor & AI Prompt Generator for Any Web Page Pawlish is a powerful visual CSS editor that lets you inspect and modify the design of any website in real-time, right from your browser's side panel. Built with the Chrome DevTools Protocol, it goes beyond basic DOM inspection by allowing you to edit cross-origin styles, force pseudo-states, and instantly export your visual tweaks as AI-ready prompts. Whether you're a developer debugging UI components, a designer exploring style variations, or simply looking to generate accurate UI prompts for your AI coding assistant, Pawlish provides a seamless, live-editing experience. ✨ KEY FEATURES: • Visual Editing in the Side Panel: Tweak colors, spacing, typography, and more with an intuitive UI directly in the Chrome Side Panel. • Advanced State Editing: Force and edit pseudo-states (e.g., :hover, :focus, :active) live on the page without having to keep your mouse hovered over the element. • Cross-Origin Style Support: Read and edit the true computed styles of elements, including those normally hidden from standard content scripts. • Export to AI Prompt: Instantly convert all your visual design changes into a structured, AI-ready prompt to help you implement the changes in your actual codebase. • Tab-Scoped & Secure: Pawlish only runs on the specific tab you activate it on. Switching tabs safely pauses the editing session without cluttering your browser. 🚀 HOW TO USE: 1. Click the Pawlish icon in your toolbar to activate the editor on the current tab. 2. Select any element on the web page to inspect its styles. 3. Use the side panel to visually edit CSS properties or force hover states. 4. Click "Copy AI prompt" to export your precise design changes. 🔒 PRIVACY FIRST: Pawlish operates entirely locally on your machine. It does not use remote code, injects scripts only when explicitly activated by you, and never tracks your browsing history or personal data. All edits are temporary and scoped strictly to your current session.

Details

  • Version
    0.1.0
  • Updated
    April 30, 2026
  • Offered by
    chenxinlei9505
  • Size
    220KiB
  • Languages
    English (United States)
  • Developer
    Email
    chenxinlei9505@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

Website Customizer: Add Custom Style and CSS

5.0

This Chrome extension is designed to modify the visual presentation of websites by adding custom CSS.

CSS Scanly - Copy CSS | Tailwind & Bootstrap

5.0

Copy CSS properties from any web element with CSS Scanly. Supports Tailwind & Bootstrap, Helpful for developers and designers

Screen Ruler - Measure and Inspect the Web

4.4

Web inspector for designers & developers. Measure elements, extract CSS & colors, capture screenshots & more.

UI Builder with Gemini AI

5.0

Create HTML with Gemini AI and preview live

Web to MCP: Import any website components to Cursor or Claude Code

3.9

A Chrome extension that captures website components and sends them to AI coding assistants like Cursor, Claude Code, Codex, etc

CSS Pro Editor & Debugger

4.6

Visual CSS styling and debugging tool for developers.

Inspect Element

4.8

Use Inspect element – a CSS viewer with Chrome inspect element shortcut. Learn how to inspect element easily using this simple tool!

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Web Inspector

4.6

Use Web Inspector tool as a CSS viewer and website inspector for any page. It is a browser plugin for google chrome inspect element.

View CSS

4.7

A Chrome extension to view the CSS of any website.

CSS-WebStyler

5.0

AI powered Web Customizer. Customize the design of all websites with this Chrome extension.

CSS Viewer - Inspect & Copy Any Element's CSS

0.0

Inspect CSS on any page. View matched rules, computed styles, SCSS, Tailwind, and JSX.

Website Customizer: Add Custom Style and CSS

5.0

This Chrome extension is designed to modify the visual presentation of websites by adding custom CSS.

CSS Scanly - Copy CSS | Tailwind & Bootstrap

5.0

Copy CSS properties from any web element with CSS Scanly. Supports Tailwind & Bootstrap, Helpful for developers and designers

Screen Ruler - Measure and Inspect the Web

4.4

Web inspector for designers & developers. Measure elements, extract CSS & colors, capture screenshots & more.

UI Builder with Gemini AI

5.0

Create HTML with Gemini AI and preview live

Web to MCP: Import any website components to Cursor or Claude Code

3.9

A Chrome extension that captures website components and sends them to AI coding assistants like Cursor, Claude Code, Codex, etc

CSS Pro Editor & Debugger

4.6

Visual CSS styling and debugging tool for developers.

Inspect Element

4.8

Use Inspect element – a CSS viewer with Chrome inspect element shortcut. Learn how to inspect element easily using this simple tool!

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Google apps