UIAssistant

Open-source browser extension

See the details. Ship the interface.

UIAssistant puts a color picker, CSS inspector, spacing ruler and screenshot tools in your browser. Pick a pixel, copy a value or capture a scrollable panel without leaving your workflow.

Download UIAssistant View source
UIAssistant color workspace with a purple color spectrum, color values and saved swatches
The UIAssistant color workspace
Chrome · Edge · FirefoxEnglish and PersianRuns locallyMIT licensed

The toolbox

Inspect, measure and build

Go from a detail on a page to a color, CSS value or image you can use in your project.

Pick colors from the page

Sample a pixel or average a region. Copy the selected color automatically as HEX, RGB, HSL or a CSS variable.

Work with palettes and gradients

Build palettes from page colors. Edit linear, radial and conic gradients and export CSS, PNG or supported SVG.

Inspect styles and spacing

Read computed typography, borders, shadows and box dimensions. Measure the gap between two elements.

Find layout issues

Look for overflow, clipped text and basic accessibility issues. Preview RTL or LTR and compare against a local reference image.

Generate and export CSS

Build Grid layouts, fluid sizes, shadows, corner radii and easing curves. Export design tokens as CSS or JSON.

Capture the page

Save the viewport, a selected region, the full page or a chosen scrollable element as PNG or JPEG.

UIAssistant screenshot preview showing a stitched image of a scrollable panel, with PNG and JPEG export controls
Actual capture of a scrollable panel in the toolbar popup.

Featured workflow

Capture what’s below the fold

Choose an area with its own scroll bar. UIAssistant scrolls that element, stitches the visible tiles and restores its scroll position.

  1. Choose a mode. Select Scrollable element in the Screenshots tab.
  2. Select your target. Confirm the page, then click the panel you want to capture.
  3. Review and save. If the popup closes, reopen the toolbar icon to find the preview.

Get the extension

Choose your browser

These are unsigned developer builds from GitHub Releases. Start with the install steps below.

Install on Chrome or Edge

Extract the ZIP. Open chrome://extensions or edge://extensions, enable Developer mode, choose Load unpacked, and select the folder containing manifest.json.

Install on Firefox

Open about:debugging#/runtime/this-firefox, choose This Firefox → Load Temporary Add-on, then select the ZIP or the extracted manifest.json. Temporary installation ends when Firefox restarts.

Release notes and checksums

Good to know

Where are screenshots processed?

On your device. UIAssistant keeps previews temporarily in memory and saves a file only when you choose to export.

Does UIAssistant require an account?

No. The extension has no account, subscription or analytics. You can inspect its source on GitHub.

What can the accessibility checks tell me?

They surface common issues such as missing image alternatives and unnamed controls. Treat the results as a starting point for manual review.