VS Code Extension

Install the extension

Install directly from the VS Code Marketplace, or open the Extensions view in VS Code Ctrl+Shift+X / Cmd+Shift+X, search for InterfaceGuard, and click Install.

Alternatively, download the .vsix file, click the ⋯ menu in the Extensions view, and select Install from VSIX….

Set up the screenshot server

The extension requires a screenshot server running locally to capture screenshots. Choose either option below.

Option 1: Docker (recommended, no local browser install needed)

Pull the prebuilt image, which bundles the reference screenshot server together with all Playwright browsers:

docker run -d \
  --name interfaceguard-screenshot-server \
  -p 127.0.0.1:3100:3000 \
  ghcr.io/cre8tiv/interfaceguard-screenshot-server:latest

Pin to a specific version instead of :latest by replacing the tag with the extension's version (e.g. :0.1.4). Stop it with:

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

Option 2: Local install with Node

Download the reference server files, then run them directly with Node:

• screenshot-server.js
• package.json

Save both into the same directory, then run:

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install

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

# Start the server
node screenshot-server.js

By default the server listens on port 3000 — set PORT=3100 to match the extension's default endpoint, or update the endpoint setting to match. Keep this server running while you use the extension.

Configure the extension

Use the built-in commands — open the Command Palette Ctrl+Shift+P / Cmd+Shift+P and run:

• InterfaceGuard: Configure API Settings — enter your API key
• InterfaceGuard: Configure Screenshot Server — verify the server endpoint (default: http://localhost:3100)

Or open Settings Ctrl+, and search “InterfaceGuard” to configure all options manually:

// settings.json (example values)
{
  "ux-analyzer.apiUrl": "",
  "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"  }
  ]
}