SARGEL - Style And Rendering Graphical Element Lens

![npm version](https://www.npmjs.com/package/sargel) ![License: MIT](https://opensource.org/licenses/MIT) ![Node.js](https://nodejs.org/)

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.

---

How It Works

Inspect - AI sees current state: styles, layout, visual issues
Test - Apply CSS edits and see results immediately
Verify - Get screenshot with changes applied
Iterate - Refine until perfect
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`

| Parameter | Type | Description | |-----------|------|-------------| | css_selector | string | CSS selector for target element(s) | | url | string | Webpage URL to inspect | | css_edits | object | Test CSS changes before applying to source | | property_groups | array | Focus on: "layout", "colors", "typography", "positioning" | | limit | number | Max elements when selector matches multiple (default: 10) |

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

sargel