PRISM (Proactive Remediation & Intelligent Software Monitor)

Role: Solo, end-to-end. architecture, analysis pipeline, compression engine, CLI, reporting
Tech Stack: Python 3.10+, Playwright, AsyncIO, Pydantic, OpenAI/Anthropic/Gemini/Ollama, Pytest
Repository: Private. Demo available on request

Overview

PRISM is a modular, AI-powered web quality analysis platform. The name is literal: just as a glass prism refracts white light into a visible spectrum, PRISM takes the raw state of a web app and splits it through specialized Spectral Modules, each analyzing a different ā€œwavelengthā€ of software quality.

Most web analysis tools do one thing. Lighthouse checks performance. axe-core checks accessibility. Visual regression tools compare screenshots. PRISM runs a unified pipeline where responsive design, accessibility, performance, security, SEO, and localization all go through the same capture-compress-analyze architecture, and each module produces copy-paste-ready artifacts (CSS fixes, HTML snippets, config files) rather than vague recommendations.

The system captures pages across multiple device viewports in parallel, runs a compression pipeline that cuts token costs by 70-90%, sends compressed data to specialist LLM agents for analysis, and then synthesizes findings across viewports into actionable output.

System Architecture

PRISM uses a capture-compress-analyze pipeline: Playwright captures raw page state, a compression engine strips it down to what matters, and parallel LLM agents analyze each viewport before a synthesis step resolves cross-viewport conflicts.

graph TD
    subgraph "Capture Layer"
    A[Target URL] --> B[Playwright Browser Manager]
    B -->|Parallel Viewports| C[Mobile Capture]
    B -->|Parallel Viewports| D[Tablet Capture]
    B -->|Parallel Viewports| E[Desktop Capture]
    end

    subgraph "Compression Layer"
    C --> F{Smart Compressor}
    D --> F
    E --> F
    F -->|PII Scrubbing| G[Violet Hook]
    F -->|DOM Skeleton| H[HTML Compression]
    F -->|Style Summary| I[CSS Compression]
    F -->|Screenshot Chunks| J[Image Optimization]
    end

    subgraph "Analysis Pipeline"
    H --> K[ViewportAgent - Mobile]
    H --> L[ViewportAgent - Tablet]
    H --> M[ViewportAgent - Desktop]
    K --> N[InterpreterAgent]
    L --> N
    M --> N
    N --> O[Unified Report + CSS Artifacts]
    end

    K -.-> P[OpenAI GPT]
    K -.-> Q[Anthropic Claude]
    K -.-> R[Google Gemini]
    K -.-> S[Local via Ollama]

Components

The Spectral Module System

Each analysis dimension maps to a color in the visible light spectrum. This isnā€™t branding, itā€™s the architecture. Test directories, documentation, and the plugin system are all organized by color.

ColorModulePersonaFocusArtifact
WhiteCoreOrchestratorThe prism itself: capture, compression, LLM gateway, pipeline coordination(none)
RedRegressionQA EngineerVisual stability via pixel diffing (Pillow), stable test locator generation from DOM analysisregression_diff.png
OrangeDiscoveryMarketerSEO and social: meta tags, Open Graph, JSON-LD, keyword densityhead_tags_snippet.html
YellowVelocitySREPerformance: Core Web Vitals (LCP, CLS), asset optimization, bottleneck analysisoptimize_assets.sh, aspect-ratios.css
GreenAccessAdvocateWCAG 2.1 AA/AAA via axe-core, semantic HTML, keyboard nav, color contrast, screen reader simulationa11y_remediation.md
BlueViewportDesignerResponsive design: multi-viewport capture, DOM skeleton extraction, CSS analysis, cross-viewport synthesiscss_recommendations.css
IndigoGlobalTranslatorLocalization: i18n, RTL layout, pseudo-localization, hardcoded string detectioni18n_strings.json, logical_props.css
VioletFortressSecOpsSecurity: PII scrubbing before data reaches any LLM, HTTP security header analysissecurity_headers.conf, redacted_dom.html

Every module follows a ā€œPipelines, Not Enginesā€ philosophy: wrap proven tools (Pillow for pixel diffs, BeautifulSoup for DOM parsing, axe-core for accessibility, regex/presidio for PII detection) rather than rebuilding from scratch. The LLMā€™s job is reasoning about why things broke and synthesizing findings, not detection.

Engineering Details

1. Smart Compression (The Economic Enabler)

Sending full HTML, CSS, and high-res screenshots to LLM APIs is prohibitively expensive. Without optimization the whole concept is a non-starter. So I built a dedicated compression pipeline that cuts token volume by 70-90% while preserving the signal LLMs actually need.

This compression is what makes every other module economically viable. Without it, PRISM is an interesting prototype. With it, itā€™s a tool you can actually run on every deploy.

2. Multi-Agent Viewport Analysis

A single LLM call analyzing all viewports at once produces vague, unfocused output. But separate analyses contradict each other. So I built a two-stage agent pipeline: parallel specialist analysis followed by cross-viewport synthesis.

3. Privacy-First PII Scrubbing

Web pages contain sensitive data, emails, phone numbers, API keys, SSNs. Sending raw page content to external LLMs is a real privacy risk. So the Violet moduleā€™s PII scrubber runs deterministically before any data reaches an LLM.

4. Provider Abstraction with Production Pinning

Different LLM providers have different SDKs, payload formats, vision capabilities, and pricing. The system has to work with any provider without vendor lock-in. Abstract LLMProvider base class with concrete implementations that normalize inputs and outputs.

class LLMProvider(ABC):
    @abstractmethod
    async def chat(self, messages: list[dict], system: str = None) -> str:
        pass

    @abstractmethod
    async def analyze_image(self, image_b64: str, prompt: str) -> dict:
        pass

# Swap providers with a config change
class OpenAIProvider(LLMProvider): ...
class ClaudeProvider(LLMProvider): ...
class GeminiProvider(LLMProvider): ...
class OllamaProvider(LLMProvider): ...

Current State

PRISM is an active, evolving project. The core pipeline and Blue (Viewport/Design) module are production-complete. Other modules are at various stages:

Tech Stack