UI Snapshot

AI-Enhanced Visual Regression Testing & Design Compliance Platform

Website • Documentation • Early Access Waitlist • Report Bug • Request Feature

Overview

UI Snapshot is a powerful developer tool and SaaS platform that combines AI-powered wireframe generation with automated visual regression testing. Generate fully editable UI wireframes instantly with Snap Model, export them directly to Figma as editable components, and automatically compare your implementations against designs. By leveraging AI-powered visual analysis, UI Snapshot flags mismatches, identifies accessibility issues, and ensures consistent brand quality for every release.

Perfect for:

Frontend Engineers maintaining pixel-perfect implementations
UI/UX Designers generating wireframes and iterating on designs
QA Teams automating visual regression testing
Product Designers enforcing design system compliance
Agencies managing multiple client projects

Key Features

Snap Model AI Wireframe Generation

Instant Wireframe Creation - Generate fully editable UI wireframes and frames instantly with Snap Model from text descriptions
Fully Editable Designs - All generated wireframes are fully editable and customizable
Figma Export - Export Snap Model wireframes directly to Figma as editable frames and components for seamless handoff
Workflow Integration - AI-generated wireframes integrate seamlessly into developer and designer workflows, saving hours of manual work

Design Integration

Figma OAuth Integration - Seamlessly connect your Figma projects via OAuth for authentication and access
Component Import - Import frames, components, and design tokens from Figma
Figma Import/Export - Import Snap Model wireframes to Figma or export Figma designs for comparison
Auto-Sync - Automatically sync with updated design specifications

UI Capture & Analysis

Manual Uploads - Upload screenshots (PNG/JPG) with metadata
Live Previews - Capture screens directly from browser
Batch Processing - Compare multiple screens simultaneously

AI-Powered Visual Diff

Computer Vision Analysis - Powered by OpenCV and Vision Transformers
Comprehensive Detection - Identifies mismatches in:
- Layout positioning & spacing
- Typography & font rendering
- Colors & gradients
- Border radius & shadows
- Component sizing
Visual Overlays - Interactive diff reports with highlighted discrepancies
Compliance Scoring - Automated pass/fail based on configurable thresholds

Accessibility & Performance

WCAG Validation - Automated accessibility checks (contrast, font size, ARIA, keyboard navigation)
Lighthouse Integration - Performance scoring for every UI screen
Detailed Reports - Actionable insights for compliance improvements

Smart Notifications

Slack Integration - Real-time alerts to your team channels
Email Notifications - Customizable alert rules and triggers
Dashboard Alerts - In-app notification center

Team Collaboration

Multitenant Architecture - Separate workspaces for clients/teams
Role-Based Access - Admin, Member, Guest, and Client roles
In-App Comments - Threaded discussions on visual diffs
Issue Management - Assign, tag, and resolve compliance findings
Audit Logs - Complete history of all test runs and team actions

Reporting & History

Test History - Review all previous comparison runs
Downloadable Reports - Export as PDF or CSV
Trend Analysis - Track compliance improvements over time

Tech Stack

Frontend

Framework: Next.js 15 (App Router)
Styling: Tailwind CSS
UI Components: shadcn/ui
State Management: React Context / Zustand
Deployment: Vercel

Backend

API Gateway & Business Logic: Node.js (Nest.js) with TypeScript
AI/ML Microservice: FastAPI (Python)
Job Queue: Redis + Celery
Communication: REST API, WebSocket, Message Queue (Redis)
Deployment: Railway / AWS Lambda / Docker Containers

AI/ML Layer

Snap Model: AI-powered wireframe generation engine
Computer Vision: OpenCV
ML Models: TensorFlow / Hugging Face Vision Transformers
Image Processing: Pillow, scikit-image

Storage & Database

Primary Database: Supabase (PostgreSQL)
File Storage: Supabase Storage
Cache: Redis

Integrations

Design Tools: Figma API (OAuth 2.0 for authentication, import/export)
Communication: Slack API, SendGrid
Testing Tools: Lighthouse, axe-core (accessibility)

Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js >= 18.0.0
Python >= 3.9
npm or yarn
pip

You'll also need:

A Supabase or Firebase account
Figma API access token
(Optional) Slack workspace for notifications

Installation

Clone the repository

git clone https://github.com/judeotine/UI-Snapshot.git
cd UI-Snapshot

Install frontend dependencies

npm install
# or
yarn install

Install Node.js backend dependencies

cd backend-node
npm install
# or
yarn install

Install Python backend dependencies

cd backend-python
pip install -r requirements.txt
# or use virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt

Set up environment variables

Create .env or .env.local in the frontend directory:

# Supabase
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# Backend API
VITE_API_URL=http://localhost:3001

# Python AI/ML Service (Optional)
VITE_PYTHON_API_URL=http://localhost:8000

Create .env in the backend-node directory:

# Database
DATABASE_URL=your_supabase_connection_string

# Storage
SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_KEY=your_supabase_service_key

# Redis
REDIS_URL=redis://localhost:6379

# Python AI/ML Service
PYTHON_API_URL=http://localhost:8000

# JWT Authentication
JWT_SECRET=your_jwt_secret_key_min_32_characters
JWT_EXPIRES_IN=15m
JWT_REFRESH_EXPIRES_IN=7d

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Frontend URL (for CORS and OAuth redirects)
FRONTEND_URL=http://localhost:5173

# Figma Integration
FIGMA_CLIENT_ID=your_figma_client_id
FIGMA_CLIENT_SECRET=your_figma_client_secret
FIGMA_REDIRECT_URI=http://localhost:3000/api/auth/figma/callback

# Slack Integration (Optional)
SLACK_WEBHOOK_URL=your_slack_webhook_url
SLACK_BOT_TOKEN=your_slack_bot_token

# Email Notifications (Optional)
SENDGRID_API_KEY=your_sendgrid_api_key

# Server Port
PORT=3001

Create .env in the backend-python directory:

# Database (read-only access for results)
DATABASE_URL=your_supabase_connection_string

# Storage
SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_KEY=your_supabase_service_key

# Redis (for job queue)
REDIS_URL=redis://localhost:6379

# AI/ML
MODEL_PATH=./models
OPENCV_THREADS=4
MAX_IMAGE_SIZE=10485760  # 10MB

# Node.js API (for callbacks)
NODE_API_URL=http://localhost:3001

Set up the database

Run the migration SQL file in your Supabase SQL editor or via psql:

# Using psql
psql $DATABASE_URL < backend-node/migrations/001_create_auth_tables.sql

# Or copy and paste the SQL from backend-node/migrations/001_create_auth_tables.sql
# into your Supabase SQL Editor and execute it

Download AI models (Optional - will auto-download on first run)

cd backend-python
python scripts/download_models.py

Running the Application

Development Mode

Start Redis server (required for both backends)

redis-server
# Redis will start on port 6379

Start the Node.js API server (in a new terminal)

cd backend-node
npm install
npm run dev
# Server will start at http://localhost:3001

Start the Python AI/ML microservice (in a new terminal)

cd backend-python
pip install -r requirements.txt
uvicorn main:app --reload --port 8000
# AI/ML service will start at http://localhost:8000

Start the Celery worker (in a new terminal)

cd backend-python
celery -A worker worker --loglevel=info

Start the frontend (in a new terminal)

npm install
npm run dev
# Application will open at http://localhost:3000

Production Mode

# Build frontend
npm run build
npm start

# Run Node.js API server
cd backend-node
npm run build
npm start

# Run Python AI/ML service with Gunicorn
cd backend-python
gunicorn main:app --workers 4 --worker-class uvicorn.workers.UvicornWorker

# Run Celery worker
cd backend-python
celery -A worker worker --loglevel=info --concurrency=4

Using Docker Compose (Rec

docker-compose up -d

Usage

1. Connect Figma

Navigate to Settings → Integrations
Click Connect Figma
Authorize UI Snapshot to access your Figma files
Select the project and frames you want to test against

2. Upload Screenshots

Method A: Manual Upload

Go to Dashboard → New Comparison
Click Upload Screenshot
Select your PNG/JPG file
Add metadata (page name, component name, etc.)

Method B: API Upload (for CI/CD integration)

curl -X POST https://api.uisnapshot.app/v1/screenshots \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -F "file=@screenshot.png" \
  -F "figma_frame_id=123:456" \
  -F "project_id=your_project_id"

3. Run Visual Diff

Select a Figma design and uploaded screenshot
Click Run Comparison
Wait 10-15 seconds for AI analysis
Review the overlay report with highlighted discrepancies

4. Review Results

Visual Overlays: See exactly where designs and implementations differ
Compliance Score: Get a percentage-based match score
Issue List: View all detected mismatches with severity levels
Comments: Leave feedback and discuss findings with your team

5. Manage Alerts

Configure notification rules in Settings → Notifications:

Set compliance threshold (e.g., alert if score < 95%)
Choose notification channels (Slack, Email, In-app)
Define alert severity levels

6. Team Management

Invite Team Members

Go to Settings → Team
Click Invite Member
Assign role: Admin, Member, or Guest

Manage Workspaces

Create separate workspaces for different clients/projects
Set permissions and access controls
View audit logs for all workspace activity

FAQ & Troubleshooting

Frequently Asked Questions

Q: How accurate is the visual diff analysis? A: The AI-powered visual diff engine uses computer vision and machine learning models to detect discrepancies with high accuracy. The system can identify differences as small as 1-2 pixels and provides configurable thresholds for compliance scoring.

Q: Can I use UI Snapshot without Figma? A: Yes! While Figma integration provides seamless design-to-code comparison, you can manually upload screenshots and compare them against reference images without connecting to Figma.

Q: What file formats are supported for screenshots? A: Currently, PNG and JPG formats are supported. For best results, use PNG format to avoid compression artifacts that might affect comparison accuracy.

Q: How long does a comparison take? A: Typical comparisons complete in 10-15 seconds. Processing time depends on image resolution and complexity. Batch processing may take longer but runs in parallel.

Q: Is my design data secure? A: Yes. All data is encrypted at rest and in transit. We use OAuth 2.0 for integrations and never store your Figma access tokens. Your designs and screenshots are stored securely in Supabase with role-based access control.

Q: Can I self-host UI Snapshot? A: Self-hosting is planned for enterprise customers. Currently, the platform is available as a SaaS solution. Contact us for enterprise deployment options.

Q: Does UI Snapshot work with mobile apps? A: Yes! You can upload screenshots from mobile applications (iOS/Android) and compare them against Figma designs. Mobile app testing is fully supported.

Troubleshooting

Issue: Node.js backend server won't start

Ensure Node.js 18.0.0+ is installed: node --version
Check that all dependencies are installed: cd backend-node && npm install
Verify Redis is running: redis-cli ping (should return PONG)
Check if port 3001 is available: netstat -an | grep 3001 (Linux/Mac) or netstat -an | findstr 3001 (Windows)
Check environment variables in backend-node/.env

Issue: Python AI/ML service won't start

Ensure Python 3.9+ is installed: python --version
Check that all dependencies are installed: cd backend-python && pip install -r requirements.txt
Verify Redis is running: redis-cli ping (should return PONG)
Check if port 8000 is available: netstat -an | grep 8000 (Linux/Mac) or netstat -an | findstr 8000 (Windows)
Check environment variables in backend-python/.env

Issue: Frontend build fails

Ensure Node.js 18.0.0+ is installed: node --version
Clear node_modules and reinstall: rm -rf node_modules && npm install
Check for TypeScript errors: npm run type-check (if available)
Verify environment variables are set in .env.local

Issue: Figma OAuth connection fails

Verify FIGMA_CLIENT_ID and FIGMA_CLIENT_SECRET are correct
Check that FIGMA_REDIRECT_URI matches your Figma app settings exactly
Ensure your Figma app has the necessary scopes: file:read, file:content:read

Issue: Comparison results are inaccurate

Ensure screenshots are high resolution (minimum 1920x1080 recommended)
Check that both images (Figma design and screenshot) are the same dimensions
Verify screenshots are not compressed or have artifacts
Try adjusting the comparison threshold in settings

Issue: Celery worker not processing jobs

Verify Redis connection: redis-cli ping
Check Celery worker logs for errors: celery -A worker worker --loglevel=info
Ensure Redis URL is correct in backend .env: REDIS_URL=redis://localhost:6379
Restart the Celery worker if jobs are stuck

Issue: Database connection errors

Verify Supabase credentials in .env files
Check database URL format: postgresql://user:password@host:port/database
Ensure Supabase project is active and not paused
Test connection: psql $DATABASE_URL (if psql is installed)

Issue: Images not uploading

Check file size limits (default: 10MB per image)
Verify Supabase Storage bucket permissions
Ensure SUPABASE_SERVICE_KEY has storage access
Check browser console for CORS errors

Issue: Slack notifications not working

Verify SLACK_WEBHOOK_URL or SLACK_BOT_TOKEN is correct
Test webhook URL: curl -X POST $SLACK_WEBHOOK_URL -d '{"text":"test"}'
Check Slack app permissions and scopes
Ensure notification rules are configured in Settings

Getting Additional Help

If you're still experiencing issues:

Check the GitHub Issues for similar problems
Review the API Documentation for integration questions
Contact support at team@uisnapshot.app
Open a new issue with detailed error logs and environment information

API Documentation

Authentication

All API requests require authentication via Bearer token:

Authorization: Bearer YOUR_API_KEY

Generate API keys in Settings → API Keys.

Endpoints

Create Comparison

POST /api/v1/comparisons
Content-Type: application/json

{
  "figma_frame_id": "123:456",
  "screenshot_url": "https://...",
  "project_id": "proj_123",
  "threshold": 0.95
}

Get Comparison Result

GET /api/v1/comparisons/{comparison_id}

List Projects

GET /api/v1/projects

Full API documentation: https://docs.uisnapshot.app/api

Contributing

We welcome contributions from the community! Here's how you can help:

How to Contribute

Fork the repository
Create a feature branch
```
git checkout -b feature/AmazingFeature
```
Make your changes
- Follow our code style guidelines (see below)
- Add tests for new features
- Update documentation as needed
Commit your changes
```
git commit -m 'Add some AmazingFeature'
```
Push to your branch
```
git push origin feature/AmazingFeature
```
Open a Pull Request

Code Style Guidelines

Frontend (TypeScript/React)

Use TypeScript for all new code
Follow Airbnb React/JSX Style Guide
Use Prettier for formatting
Run npm run lint before committing

Backend - Node.js (TypeScript/Express)

Use TypeScript for all backend code
Follow Node.js best practices and Express.js conventions
Use ESLint with TypeScript rules
Run npm run lint before committing
Prefer async/await over callbacks
Use dependency injection for testability

Backend - Python (FastAPI)

Follow PEP 8 style guide
Use type hints for all functions
Run black for code formatting
Run flake8 for linting
Use Pydantic models for request/response validation

Commit Messages

Use conventional commits format
Examples:
- feat: add Slack notification integration
- fix: resolve color comparison accuracy issue
- docs: update API endpoint documentation

Reporting Bugs

Found a bug? Please open an issue with:

Clear description of the problem
Steps to reproduce
Expected vs actual behavior
Screenshots if applicable
Environment details (OS, browser, versions)

Feature Requests

Have an idea? Open a feature request describing:

The problem you're trying to solve
Your proposed solution
Any alternative solutions you've considered

Roadmap

MVP Features

Figma OAuth integration and frame import/export
Snap Model AI wireframe generation
Manual screenshot upload system
AI-powered visual diff engine (OpenCV)
Basic WCAG accessibility checks
Team dashboard with role-based permissions
Slack and email notifications
Audit logs and test history

Future Enhancements

View full roadmap

Architecture

UI Snapshot uses a hybrid architecture combining Node.js for API gateway and business logic with Python for AI/ML processing. This design leverages the strengths of both ecosystems.

graph TB
    subgraph Frontend["Frontend Layer - Next.js 15"]
        direction LR
        Dashboard["Dashboard UI"]
        Comparison["Comparison Viewer"]
        Settings["Settings UI"]
        Reports["Reports UI"]
        State["React Context / Zustand"]
        Styles["Tailwind CSS + shadcn/ui"]
    end

    Frontend -->|HTTP/REST<br/>WebSocket| NodeAPI

    subgraph NodeAPI["Node.js API Gateway - Nest.js"]
        direction TB
        Router["REST API / WebSocket<br/>Message Queue Router"]
        Auth["Auth Service<br/>OAuth 2.0, JWT, Sessions"]
        Figma["Figma Service<br/>OAuth Sync, Frame Import"]
        Team["Team Management<br/>Workspaces, RBAC, Audit Logs"]
        Notify["Notification Service<br/>Slack/Email, Webhooks"]
        
        Router --> Auth
        Router --> Figma
        Router --> SnapModel
        Router --> Team
        Router --> Notify
    end

    NodeAPI -->|REST API<br/>Job Queue<br/>WebSocket| PythonML

    subgraph PythonML["Python AI/ML Microservice - FastAPI"]
        direction TB
        VisualDiff["Visual Diff Engine<br/>Layout, Color, Typography"]
        OpenCV["Computer Vision<br/>OpenCV, Feature Extraction"]
        ML["ML Model Inference<br/>Vision Transformers, TensorFlow"]
        ImageProc["Image Processing<br/>Pillow, Resize, Normalize"]
        Celery["Celery Worker<br/>Background Jobs"]
        
        VisualDiff --> OpenCV
        VisualDiff --> ML
        VisualDiff --> ImageProc
        VisualDiff --> Celery
    end

    NodeAPI -->|Read/Write| DataLayer
    PythonML -->|Read/Write| DataLayer
    NodeAPI <-->|Sessions, Cache| CacheLayer
    PythonML <-->|Job Queue| CacheLayer

    subgraph DataLayer["Data Layer"]
        direction LR
        Supabase["Supabase PostgreSQL<br/>Users, Projects, Results"]
        Storage["File Storage<br/>Supabase Storage / AWS S3"]
    end

    subgraph CacheLayer["Cache Layer"]
        Redis["Redis<br/>Job Queue, Sessions, Cache, Pub/Sub"]
    end

    NodeAPI -->|OAuth, API| External
    PythonML -->|Analysis| External

    subgraph External["External Services"]
        direction LR
        FigmaAPI["Figma API"]
        Lighthouse["Lighthouse"]
        AxeCore["axe-core"]
        Slack["Slack API"]
        SendGrid["SendGrid"]
    end

    %% Styling
    classDef frontend fill:#3b82f6,stroke:#1e40af,stroke-width:2px,color:#fff
    classDef nodejs fill:#68a063,stroke:#2d5016,stroke-width:2px,color:#fff
    classDef python fill:#3776ab,stroke:#1e3a5f,stroke-width:2px,color:#fff
    classDef data fill:#8b5cf6,stroke:#5b21b6,stroke-width:2px,color:#fff
    classDef cache fill:#ef4444,stroke:#991b1b,stroke-width:2px,color:#fff
    classDef external fill:#f59e0b,stroke:#92400e,stroke-width:2px,color:#fff

    class Dashboard,Comparison,Settings,Reports,State,Styles,Frontend frontend
    class Auth,Figma,SnapModel,Team,Notify,Router,NodeAPI nodejs
    class VisualDiff,OpenCV,ML,ImageProc,Celery,PythonML python
    class Supabase,Storage,DataLayer data
    class Redis,CacheLayer cache
    class FigmaAPI,Lighthouse,AxeCore,Slack,SendGrid,External external

Architecture Benefits

Node.js API Gateway:

Seamless integration with Next.js frontend (shared TypeScript types)
Excellent for real-time features (WebSocket support)
Fast API endpoints for business logic, auth, user management, and Snap Model wireframe generation
Figma OAuth and import/export integration
Unified tooling and deployment pipeline

Python AI/ML Microservice:

Optimized for computer vision and ML inference
Handles heavy image processing and batch operations
Scientific computing libraries (OpenCV, TensorFlow, scikit-image)
Independent scaling and deployment

Communication:

REST API for synchronous requests
Redis message queue for async job processing
WebSocket for real-time updates
Clean API contracts between services

Security

We take security seriously. Here's how we protect your data:

OAuth 2.0 for all third-party integrations
Encryption at rest for all stored images and data
TLS/SSL for all data in transit
Role-based access control (RBAC) for team permissions
API rate limiting to prevent abuse
Regular security audits and dependency updates
GDPR compliant data handling practices

Reporting Security Issues

Please do not report security vulnerabilities through public GitHub issues. Instead, email us at security@uisnapshot.app with details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2025 UI Snapshot

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...

Acknowledgments

Figma API for design integration
OpenCV for computer vision capabilities
Hugging Face for ML model hosting
shadcn/ui for beautiful UI components
Supabase for backend infrastructure

Community & Support

Get Help

Email: team@uisnapshot.app
Slack: Join our community
Documentation: docs.uisnapshot.app
Issues: GitHub Issues

Stay Updated

Star this repo to show your support
Watch for updates and new releases
Follow us on Twitter
Read our blog

Early Access

Join our early access waitlist for exclusive features and priority support: Sign up here

Stats

UI Snapshot — Empowering teams to ship stunning, accessible UIs.

Website • Docs • Roadmap • Twitter • Blog

Name		Name	Last commit message	Last commit date
Latest commit History 193 Commits
Assets/logo		Assets/logo
backend-node		backend-node
frontend		frontend
README.md		README.md
vercel.json		vercel.json

judeotine/UI-Snapshot

Folders and files

Latest commit

History

Repository files navigation