SARGEL - Style And Rendering Graphical Element Lens

Visual debugging for pixel-perfect web development.

Whether you're implementing designs or debugging CSS issues, this tool gives AI agents the ability to see and fix UI problems visually - just like using browser DevTools. Inspect elements, test CSS changes instantly, and iterate until perfect.

The Problem

Getting CSS exactly right is hard. Designs don't match implementation, layouts break across browsers, spacing is off by a few pixels. The usual fix: back-and-forth screenshots, trial and error, and "close enough" compromises.

The solution: AI agents that can see your UI, understand what's wrong visually, test fixes instantly, and iterate until pixel-perfect.

Related MCP server: agnt

How It Works

1. Inspect - AI sees current state: styles, layout, visual issues

2. Test - Apply CSS edits and see results immediately

3. Verify - Get screenshot with changes applied

4. Iterate - Refine until perfect

5. Apply - Copy working CSS to your code

The key: Test changes visually before touching your source code.

Example: Fixing Button Spacing

Problem: "The submit button is too close to the form fields"

// Step 1: Inspect current state
{
  "tool": "inspect_element",
  "arguments": {
    "css_selector": ".submit-btn",
    "url": "https://myapp.com/form"
  }
}
// Returns: Screenshot + computed styles showing margin-top: 4px

// Step 2: Test a fix
{
  "tool": "inspect_element",
  "arguments": {
    "css_selector": ".submit-btn",
    "url": "https://myapp.com/form",
    "css_edits": {
      "margin-top": "16px"
    }
  }
}
// Returns: Updated screenshot showing improved spacing

// Step 3: Perfect it
{
  "css_edits": {
    "margin-top": "20px"
  }
}
// Returns: Perfect spacing

// Result: Add margin-top: 20px to your CSS

Before and after: Visual iteration until pixel-perfect

API Reference

inspect_element

Response Format

{
  screenshot: string;          // Base64 PNG with visual highlights
  computed_styles: object;     // Actual CSS property values
  cascade_rules: array;        // CSS rules in cascade order
  box_model: object;          // Margin, padding, border, content dimensions
  applied_edits?: object;     // CSS edits that were tested (if any)
}

Technical Details

Architecture: MCP (Model Context Protocol) server using Chrome DevTools Protocol for DOM inspection and screenshot capture.

Requirements:

• Node.js 18+

• Chrome/Chromium browser

• AI agent with MCP support (Claude Desktop, Continue, etc.)

License

MIT License - see LICENSE for details.

Made for anyone who believes getting CSS right shouldn't be guesswork