Synthesia

Synthesia is an AI-Native Chrome Extension built on Manifest V3 that lives natively in the Chrome Side Panel and audits any live webpage for UX and accessibility violations in real time. By orchestrating multimodal LLM agents with DOM-level style extraction and viewport screenshot capture, the tool generates a confidence-scored audit report and interactively highlights offending elements on the page, helping designers establish trust with non-deterministic AI outputs inside the native browser paradigm.

Project Type

UX Designers & Design System Auditors

Timeline

5 Hrs

Skills & Methods

Manifest V3 Architecture

Chrome Side Panel API

DOM Analysis

Design Token Extraction

Desktop Browser Paradigms

Multimodal LLM Integration

LLM Persona Engineering

JSON Schema Design

Trust-by-Design UX

Vibe Coding

Frontend Prototyping

WCAG 2.1 Auditing

Knowledge Grounding

AI Orchestration

Prompt Engineering

Team

Prathamesh P | Claude Code

PROBLEM

Modern UX designers and design system owners lack a browser-native tool that can audit live webpages for both accessibility violations and heuristic UX flaws in real time. Existing solutions like Lighthouse and axe DevTools flag technical compliance issues, but cannot evaluate visual hierarchy, interaction trust, or design system drift. Meanwhile, multimodal AI models are now powerful enough to perform nuanced UX judgment, but designers have no native browser surface to integrate this intelligence into their inspection workflow, and no trust framework to handle the non-deterministic nature of AI outputs. This forces designers to leave their browser, juggle screenshot tools, chat interfaces, and inspector panels, breaking flow and losing DOM context at every step.

SOLUTION

I designed and built Synthesia, a Manifest V3 Chrome Extension that lives natively in the Chrome Side Panel and turns the browser into an AI-powered UX inspection surface. The extension uses content scripts to extract computed style tokens (colors, typography, spacing, border radii) and capture a viewport screenshot of the active tab. A background service worker orchestrates a multimodal LLM (Claude 3.5 Sonnet or Gemini 1.5 Pro), grounded by a curated Design_Expert.md knowledge layer, as a strict UX and Accessibility Auditor, returning a structured JSON contract containing the page's design system summary and a list of violations scored against WCAG 2.1 AA and core UX heuristics. The Side Panel renders interactive color swatches, typography chips, and a confidence-scored violation list that, on hover, draws a neon bounding box around the exact offending element on the live page.

VALUE DELIVERED

Synthesia collapses a multi-tool UX audit workflow into a single, in-browser experience that lives in the same panel paradigm as Gemini in Chrome and modern AI assistants. By surfacing confidence scores on every AI finding, designers can trust but verify non-deterministic outputs and avoid acting on AI hallucination. The one-click design token export turns any live website into a starting point for a new design system, accelerating competitive teardowns and client onboarding. Most importantly, Synthesia validates a new UX pattern for the AI-native browser era: AI as a persistent inspector grounded in DOM context, with reversible, transparent interactions, rather than a modal chat window bolted onto a page.

APPROACH

My approach focused on agentic orchestration and trust-by-design:

Architecture: I scoped the build to Manifest V3 with a flat file structure and vanilla JavaScript to maximize rendering performance and vibe-coding velocity without framework overhead.
Domain Knowledge Grounding: I authored a Design_Expert.md knowledge layer between the I/O pipeline and the LLM, conditioning the model with curated research on design systems, UX audit frameworks, and UX laws to reduce AI hallucination and ground findings in real-world expertise.
AI Contract Design: I authored a strict JSON schema that forces the LLM to return structured output only, separating design system data from audit findings tagged with severity, confidence score, and CSS selector target.
Trust-by-Design Interaction: I attached a confidence score out of 100 and reversible neon-highlight previews to every AI finding, giving designers a way to calibrate trust before acting.
Cross-Surface Messaging: I architected message passing between the Side Panel, service worker, and content script to enable persistent context across tabs and live DOM highlighting on hover.

My approach focused on agentic orchestration and trust-by-design:

Architecture: I scoped the build to Manifest V3 with a flat file structure and vanilla JavaScript to maximize rendering performance and vibe-coding velocity without framework overhead.
Domain Knowledge Grounding: I authored a Design_Expert.md knowledge layer between the I/O pipeline and the LLM, conditioning the model with curated research on design systems, UX audit frameworks, and UX laws to reduce AI hallucination and ground findings in real-world expertise.
AI Contract Design: I authored a strict JSON schema that forces the LLM to return structured output only, separating design system data from audit findings tagged with severity, confidence score, and CSS selector target.
Trust-by-Design Interaction: I attached a confidence score out of 100 and reversible neon-highlight previews to every AI finding, giving designers a way to calibrate trust before acting.
Cross-Surface Messaging: I architected message passing between the Side Panel, service worker, and content script to enable persistent context across tabs and live DOM highlighting on hover.

My approach focused on agentic orchestration and trust-by-design:

Architecture: I scoped the build to Manifest V3 with a flat file structure and vanilla JavaScript to maximize rendering performance and vibe-coding velocity without framework overhead.
Domain Knowledge Grounding: I authored a Design_Expert.md knowledge layer between the I/O pipeline and the LLM, conditioning the model with curated research on design systems, UX audit frameworks, and UX laws to reduce AI hallucination and ground findings in real-world expertise.
AI Contract Design: I authored a strict JSON schema that forces the LLM to return structured output only, separating design system data from audit findings tagged with severity, confidence score, and CSS selector target.
Trust-by-Design Interaction: I attached a confidence score out of 100 and reversible neon-highlight previews to every AI finding, giving designers a way to calibrate trust before acting.
Cross-Surface Messaging: I architected message passing between the Side Panel, service worker, and content script to enable persistent context across tabs and live DOM highlighting on hover.

SUMMARY

Synthesia is a proof-of-concept for what AI-native browser interaction design looks like when agentic AI, DOM intelligence, and trust-calibrated UX converge. By choosing the Chrome Side Panel as the surface and treating AI confidence as a first-class design primitive, the project demonstrates that the next generation of browser experiences will not be chat windows bolted onto pages, but context-aware AI partners that augment the designer's inspection workflow while respecting human judgment at every step.