Docs

Start Guide & Platform Architecture

Understand the core concepts of UIDesigner: visual element-locked review pins, automated website audits, organization collaboration, and frictionless guest access.

Welcome to UIDesigner

UIDesigner is a modern website review, visual QA, and automated audit platform designed for engineering teams, product designers, agencies, and clients. Instead of relying on static screenshots or fragmented bug tracking threads, UIDesigner operates on the live, interactive DOM of your web application.

  • UIDesigner Review: A collaborative organization where designers, QA engineers, clients, and developers leave pinned visual comments, inspect element styles, attach screen/audio recordings, and approve changes in real time.
  • UIDesigner Audit: An automated scanning engine that analyzes web URLs across 9 dimensions, including accessibility (WCAG 2.1 AA/AAA), Core Web Vitals performance, SEO, security headers, design system consistency, and AI content heuristics.

Live DOM vs. Static Screenshots

Traditional website feedback tools capture flat pixel screenshots. When a viewport resizes, dynamic data renders, or a code deployment reflows content, static pins detach and float over empty space.

UIDesigner solves this through element-anchored DOM fingerprinting:

  • Comments lock directly to HTML elements using unique selector hierarchies, element tags, and relative offsets.
  • When an element moves or reflows between deployments, the comment pin stays anchored to the intended component.
  • The review canvas renders the live web application in a sandboxed, isolated environment, allowing full interaction with menus, dropdowns, and buttons.

The Tri-Mode Canvas

Every review canvas provides three specialized interaction modes via the bottom toolbar:

  1. Browse Mode (V): Interact normally with your web application—click links, submit test forms, trigger modals, and preview CSS transitions.
  2. Comment Mode (C): Hover over any visual element to see bounding boxes, then click anywhere to anchor a discussion pin with automated diagnostic telemetry.
  3. Inspect Mode (I): Non-destructively inspect computed CSS properties, typography scales, layout boxes, margins, paddings, and accessibility roles without opening browser DevTools.

Getting Started Workflow

Getting up and running with UIDesigner takes less than five minutes:

  1. Create an Organization Organization: Set up your company or agency organization from the dashboard.
  2. Invite Team Members: Add internal collaborators with role-based permissions (Owner, Admin, Member).
  3. Launch a Review or Audit: Enter your staging, production, or local URL to start collecting feedback or run an in-depth audit.
  4. Share with External Clients: Generate frictionless guest review links so clients can review and comment without creating accounts or passwords.
Next
Quickstart