API Reference
Diff Analysis
API endpoints for running visual diff analysis and generating CSS fixes.
These endpoints power the core visual comparison engine. They accept images and return detailed analysis with fix suggestions.
Diff analysis endpoints are public — they don't require authentication. This allows the browser extension to use them directly.
diff.analyze
Run smart visual diff analysis between a design and implementation image.
| Type | Mutation |
| Auth | Public |
Input:
{
designImage: string; // Base64-encoded PNG
implementationImage: string; // Base64-encoded PNG
selector?: string; // CSS selector for context
ssim?: boolean; // Enable SSIM analysis
layoutShift?: boolean; // Enable layout shift detection
antiFlake?: boolean; // Enable anti-flake filtering
threshold?: number; // Pixel diff threshold (0-1)
}Response:
{
analysis: {
pixelDiff: {
totalPixels: number;
differentPixels: number;
percentage: number;
adjustedPercentage?: number; // After anti-flake filtering
diffImage?: string; // Base64 diff visualization
};
colors: {
average: string;
max: string;
regions: Array<{
x: number; y: number;
width: number; height: number;
color: string;
}>;
};
spacing: object;
typography: object;
dimensions: object;
confidence: number; // 0-1 overall confidence
ssimScore?: number; // 0-1 structural similarity
ssimChannels?: {
red: number;
green: number;
blue: number;
};
ssimDiffRegions?: Array<{
x: number; y: number;
width: number; height: number;
score: number;
}>;
layoutShift?: {
type: string;
dy: number; // Vertical shift pixels
dx: number; // Horizontal shift pixels
isPrimaryShift: boolean;
};
stability?: {
verdict: "stable" | "likely-flaky" | "flaky";
score: number;
antiAliasingPercentage: number;
flakyPixelsFiltered: number;
};
};
suggestion: {
fixes: Array<{
selector: string;
property: string;
value: string;
priority: "high" | "medium" | "low";
confidence: number;
reason: string;
before: string;
after: string;
}>;
summary: string;
impact: "high" | "medium" | "low";
estimatedTime: string;
};
}diff.generateFixes
Generate CSS or Tailwind fixes from analysis suggestions.
| Type | Mutation |
| Auth | Public |
Input:
{
suggestion: {
fixes: Array<{
selector: string;
property: string;
value: string;
priority: "high" | "medium" | "low";
confidence: number;
reason: string;
before: string;
after: string;
}>;
summary: string;
impact: "high" | "medium" | "low";
estimatedTime: string;
};
filePath?: string; // Target file for fixes
useTailwind?: boolean; // Generate Tailwind classes instead of CSS
}Response:
{
type: "css" | "tailwind";
patch?: string; // CSS patch (when type = "css")
classes?: string[]; // Tailwind classes (when type = "tailwind")
fixes: Fix[];
filePath: string;
}diff.applyFixes
Apply generated fixes to an element.
| Type | Mutation |
| Auth | Public |
Input:
{
selector: string;
fixes: Fix[];
filePath?: string;
}Response:
{
success: boolean;
applied: string[]; // List of applied fix descriptions
errors?: string[]; // Any errors during application
message: string;
}Accessibility endpoints
accessibility.checkContrast
Check WCAG contrast ratio between two colors.
| Type | Query |
| Auth | Public |
Input:
{
foreground: string; // Hex color (e.g., "#333333")
background: string; // Hex color (e.g., "#ffffff")
}accessibility.auditContrast
Batch audit multiple color pairs.
| Type | Query |
| Auth | Public |
Input:
{
pairs: Array<{
foreground: string;
background: string;
}>;
}Response:
{
pairs: Array<{
foreground: string;
background: string;
ratio: number;
score: string;
meetsAA: boolean;
meetsAAA: boolean;
}>;
summary: {
total: number;
aaCompliant: number;
aaaCompliant: number;
failing: number;
}
}