Snap Site

Turning any website into a Figma-ready audit canvas.

A plugin I built because UX audit setup was stealing hours I didn't have.

Built using AIPersonal ProductFigma PluginSolo Designer & Product OwnerLive at snapsiteux.com

Overview

Domain

AI, UX Audit, SaaS

Platform

Figma Plugin, Web

Role

Solo Designer & Product Owner

Personal product

Services

Research, Strategy, Product Design, UX Writing

Status

Live at snapsiteux.com

Snap Site turns website review setup into a fast, structured workflow. Paste a URL, choose the capture mode, and the plugin creates a Figma-ready audit canvas with annotated findings, responsive captures, design tokens, and accessibility cues.

I designed it as a personal product for designers, researchers, founders, agencies, and product teams who need to get from scattered screenshots to useful critique much faster.

The real design challenge was not just automation. It was making the automation feel trustworthy, readable, and easy to control inside a compact Figma plugin panel.

The problem

Visit website

Every UX audit I started felt the same.

Hours of manual screenshots. A blank Figma file. A heuristic checklist I was filling from memory. And none of the real thinking had started yet.

I went to Reddit and LinkedIn to see if this was just me.

It wasn't.

“I kept spending the first few hours of every audit just getting organised.”
Designer research comment

Real feedback from design communities

Community comment

Reddit · Workflow validation

Feedback 1

the positioning of AI handles the setup while the human owns the judgment is exactly right and honestly the key to making this land with designers the manual screenshot and annotation workflow is genuinely tedious and anything that removes that friction without trying to replace the thinking is going to get used the UX audit mode is the most interesting use case to me because the first pass heuristic findings give you something to react to and refine rather than starting from a blank canvas which is where a lot of audit time actually goes the competitor research angle is probably your highest frequency use case though since that happens constantly and has the least structured workflow right now

1 of 2

How it works

Paste a URL. Get an annotated Figma canvas.

NNG heuristics, WCAG 2.2 checks, design tokens, and responsive captures land in one run.

Snap Site step-by-step setup guide with annotated plugin UI

Snap Site handles the heavy-lifting

Mapping your site structure

Reading your homepage

Selecting key pages

Capturing pages

Analyzing UX patterns

Gathering assets

Placing on canvas

Once you start, the plugin maps pages, captures screens, analyzes UX patterns, gathers assets, and places everything on the audit canvas.

Snap Site heavy lifting loading states visual

What Snap Site checks in one run

NN/g heuristics

Findings follow a consistent UX framework.

Accessibility checks

Severity is visible at a glance.

Design tokens

Colours and fonts pulled automatically.

Responsive views

Desktop and mobile context together.

What lands in Figma

Everything drops onto the canvas — annotated, pinned to the page, and ready to share with your team or client.

Audit findings canvas 1/2

Snap Site output showing annotated UX findings and audit details

The design decisions

Here are the four decisions that had real design tension — and how I worked through them.

Decision 1 - Three modes, one entry point

The risk with a plugin that does a lot is looking like it does nothing well. I mapped the different reasons someone opens a plugin mid-project: full audit, quick screenshots, or analyzing an image they already have.

Three modes. One selector at the top. Each adapts what appears below it.

The small detail that matters: Quick Screen Grabs says no analysis. That single line prevents wrong-mode selections before anyone hits Start.

Decision 2 - Making credits feel fair, not punitive

A credit-based freemium only works if users trust it. I made sure the credit cost appears before every scan, so there are no surprises.

Upgrade and one-time purchase paths are labelled honestly: best value for regular use, and best for occasional use. That makes the modal a decision aid, not a push.

Upgrade

Pro and Agency subscription paths

Buy one-time

50, 150, or 500 credit top-ups

Decision 3 - Findings pinned to the pixel

Every audit tool I had used separated findings from visuals. You were always translating between the note and the image.

In Snap Site, annotations live directly on the screenshot, on the exact pixel where the issue is.

That matters most with stakeholders who are not UX practitioners. The annotated page communicates faster than a written list.

Snap Site annotated findings and heuristics audit detail

Decision 4 - Optional AI guidance: power without noise

Some of the most important UX moments are invisible to a static capture: pricing toggles, mobile menus, login dialogs.

The solution was an optional text field where users can tell the AI what to trigger. It stays clearly optional so the majority of scans remain fast.

Quick-tap suggestions speed up common cases and show new users what is possible without requiring documentation.

Optional: Guide what the AI should capture

Tell us what to open or trigger on the page:

E.g. open login dialog, expand menu, click pricing CTA

0/100

View signup flowOpen mobile menuExpand pricing

What I learned

Designing for designers means nothing goes unnoticed.

When your users are UX professionals, every rough edge gets felt. It made me more precise about decisions I might have glossed over in client work.

Plugin constraints force focus.

Fixed width, modal-only, no routing. Every feature has to earn its place in a single panel.

Freemium is a UX problem, not just a pricing problem.

What goes behind the paywall, where the upsell appears, and how it feels are all design decisions.

What's next

Next, I'm focused on bringing audits to the web and adding Code to Design functionality so teams can review implementation inside an editable design workflow.

In progress

Run audits from the website

No Figma required, currently in progress.

Up next

Code to Design

Adding Code to Design functionality so teams can move from implementation back into editable design review.

Submitted to Figma Marketplace — adoption metrics to follow post-launch.

“Snap Site is how I stay close to the tools and workflows designers actually use. It informs how I design for designers — which makes me better at every other project.”

View future updates

More like this

Last minute nursing

Designing the end-to-end staffing experience - from recruitment to shift booking and beyond

HealthcarePWAFigmaDovetailHotJarResearch FocusedBuilt Design System

Mobilize - Favorite Healthcare Staffing

Redesigning the mobile experience for 10K+ workers to streamline shift booking - leading to a 15.2% increase in in-app bookings.

StaffingAppFigmaDovetailResearch Focused

VPN Pro

Redesigning the mobile experience for 80M+ VPN users to increase subscriptions by 8% and downloads by 21%.

SecurityVPNAppSketchFigma