InterfaceGuard - VS Code Extension

Automated UX/UI analysis extension for VS Code using Playwright and AI-powered recommendations.

Features

Screenshot Capture: Capture screenshots of your web application at multiple viewport sizes
Automated Analysis: Submit screenshots for AI-powered InterfaceGuard analysis
Job Tracking: Track analysis job progress with real-time status updates
Interactive Results: View analysis results in a beautiful, interactive panel
Actionable Recommendations: Get specific, actionable recommendations with code snippets
Multiple Analysis Types: Analyze for accessibility, usability, and consistency issues
Responsive Testing: Test across desktop, tablet, and mobile viewports

Requirements

Prerequisites

Screenshot server (required for screenshot capture)
- The extension requires a locally running screenshot server that wraps Playwright
- Installation instructions below
InterfaceGuard account (required for analysis)
- Sign up for free to get an API key
- Configure the key in extension settings

Installation

Installing the Extension

Install directly from the VS Code Marketplace, or search InterfaceGuard in the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
Alternatively, download a .vsix file, open the "..." menu in the Extensions view, and select "Install from VSIX..."

Setting up the screenshot server

The extension talks to a small local HTTP server that drives Playwright and returns screenshots (POST /screenshot → PNG bytes). A reference implementation is included in this repo at screenshot-server.js — use it as-is, or as a starting point for your own. If you copy it out to run your own instance (e.g. into a screenshot-server-local/ folder), that copy is your personal working instance — it isn't tracked by this repo, so feel free to modify it freely.

Option 1: Run it directly with Node

# From the folder containing screenshot-server.js
npm install playwright express cors body-parser

# Install browsers
npx playwright install

# Install system dependencies (Linux only)
npx playwright install-deps

# Start the server (defaults to port 3000; override with PORT=3100, etc.)
node screenshot-server.js

Option 2: Docker (no local browser install needed)

This repo includes a Dockerfile built on top of Playwright's official image, which ships with all browsers preinstalled:

Using Docker Compose (recommended):

This repo also includes a docker-compose.yml that builds the same Dockerfile and sets shm_size high enough for Chromium to avoid crashing:

docker compose up -d

It maps the container's port 3000 to http://localhost:3100 on the host — set the extension's Screenshot Server Endpoint setting to http://localhost:3100 if you use this path. Stop it with:

docker compose down

Using plain docker build/run:

docker build -t interfaceguard-screenshot-server .

docker run -d \
  --name interfaceguard-screenshot-server \
  -p 127.0.0.1:3000:3000 \
  interfaceguard-screenshot-server

Keep the base image tag in sync with the playwright version in screenshot-server-package.json — see the Playwright Docker docs for the latest tag.

Stop it with:

docker stop interfaceguard-screenshot-server && docker rm interfaceguard-screenshot-server

Configuring the Extension

Open VS Code settings (Ctrl+, / Cmd+,)
Search for "InterfaceGuard"
Configure the following settings:
- API URL: URL of the InterfaceGuard Analysis Service — leave blank to use the production endpoint. Override with http://localhost:8080 for local development.
- Screenshot Server Endpoint: URL of the screenshot server set up above (default: http://localhost:3100)
- Default Browser: Browser to use for screenshots (chromium, firefox, or webkit)
- Default Viewports: Array of viewport sizes for responsive testing

Alternatively, use the built-in configuration commands:

Run InterfaceGuard: Configure Screenshot Server to configure the screenshot server endpoint
Run InterfaceGuard: Configure API to configure API settings

Usage

Quick Start

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Run "InterfaceGuard: Capture Screenshots"
- Enter the URL of your application
- Select viewports to capture (desktop, tablet, mobile)
- Wait for screenshots to be captured
Run "InterfaceGuard: Analyze Application"
- Select analysis types (accessibility, usability, consistency)
- Wait for analysis to complete
View Results
- Results will appear automatically when analysis completes
- Or run "InterfaceGuard: Show Results" to view previous results

Available Commands

InterfaceGuard: Capture Screenshots - Capture screenshots of your application
InterfaceGuard: Analyze Application - Analyze captured screenshots
InterfaceGuard: Show Results - View analysis results
InterfaceGuard: Configure Screenshot Server - Configure the screenshot server endpoint
InterfaceGuard: Configure API - Configure API settings

Using the Status Bar

Click on the "🔭 InterfaceGuard" status bar item to open the quick menu with all available actions.

Workflow

1. Capture Screenshots

Command Palette > InterfaceGuard: Capture Screenshots
↓
Enter URL: https://your-app.com
↓
Select Viewports: Desktop, Tablet, Mobile
↓
Screenshots Captured

2. Analyze Application

Command Palette > InterfaceGuard: Analyze Application
↓
Select Analysis Types: Accessibility, Usability, Consistency
↓
Job Submitted
↓
Track Status (automatic)
↓
Results Available

3. View Results

Command Palette > InterfaceGuard: Show Results
↓
Select Job (if multiple)
↓
Interactive Results Panel Opens

Features in Detail

Screenshot Capture

Multiple Viewports: Capture screenshots at different viewport sizes
Responsive Testing: Test desktop, tablet, and mobile layouts
Custom Viewports: Define custom viewport sizes
Browser Selection: Choose between Chromium, Firefox, and WebKit
Full Page Capture: Capture entire page including scrollable areas

Analysis

Accessibility Analysis: Identify accessibility issues (WCAG compliance)
Usability Analysis: Find usability problems and user experience issues
Consistency Analysis: Detect design inconsistencies across pages
Severity Levels: Issues categorized as Critical, Major, Minor, or Suggestion
AI-Powered: Uses advanced AI models for intelligent analysis

Results

Interactive UI: Beautiful, interactive results panel
Filtering: Filter issues by severity, category, or type
Recommendations: Get specific, actionable recommendations
Code Snippets: Copy-paste ready code fixes
Implementation Steps: Step-by-step guide to fix issues
Visual Indicators: See exactly where issues are located

Configuration

Extension Settings

This extension contributes the following settings:

ux-analyzer.apiUrl: URL of the InterfaceGuard Analysis Service
ux-analyzer.apiKey: API key for authentication (stored securely)
ux-analyzer.screenshotServerEndpoint: Screenshot server endpoint (see Setting up the screenshot server)
ux-analyzer.defaultBrowser: Default browser for screenshots
ux-analyzer.defaultViewports: Array of viewport sizes for responsive testing

Example Configuration

{
  "ux-analyzer.apiUrl": "https://cloud.interfaceguard.com",
  "ux-analyzer.screenshotServerEndpoint": "http://localhost:3100",
  "ux-analyzer.defaultBrowser": "chromium",
  "ux-analyzer.defaultViewports": [
    { "width": 1920, "height": 1080, "deviceType": "desktop" },
    { "width": 768, "height": 1024, "deviceType": "tablet" },
    { "width": 375, "height": 667, "deviceType": "mobile" }
  ]
}

Troubleshooting

Cannot connect to the screenshot server

Make sure the screenshot server is running (see Setting up the screenshot server above)
Check that the Screenshot Server Endpoint URL in settings matches where the screenshot server is listening
If screenshots come back suspiciously small (a few bytes), you're likely hitting the wrong process on that port — confirm it's actually screenshot-server.js and not Playwright's run-server command

API key validation failed

Check that your API key is correct and hasn't been regenerated or revoked
If you're using a custom API URL, verify it's reachable
Generate or copy your key from your InterfaceGuard account settings

Screenshot capture failed

Check browser console for errors
Make sure the URL is accessible
Try a different browser (chromium, firefox, webkit)
Check the screenshot server's logs

No results showing

Wait for analysis to complete (check status bar)
Try running "InterfaceGuard: Show Results" manually
Check the Output panel (View > Output > InterfaceGuard) for errors

License

MIT License

Support

Email: support@interfaceguard.com
Support policy & response times: interfaceguard.com/support
Setup guide: interfaceguard.com/integrations/vscode
Questions can also be posted on this extension's Marketplace Q&A tab

Changelog

See CHANGELOG.md.

Acknowledgments

Built with Playwright
Powered by AI-based InterfaceGuard Analysis Service
VS Code Extension API

InterfaceGuard

Cre8tiv Systems