AgentUX Catalogue

Screenshot library for product teams

Screenshots. Videos. Links.

Your team's single source of truth for product screenshots, competitive video references, and saved links — organized by brand, searchable, and accessible from anywhere including Telegram.

Open Catalogue View GitHub
1 Capture Screenshots
2 Collect Videos & Links
3 Organize By Brand

Features

Everything your team needs in one place

Screenshots

Upload, organize, and browse product screenshots across brands with four view modes and instant ThumbHash previews.

Core
What it does
  • Three views: Grid, List, and Gallery
  • Group chip strip above the toolbar — one chip per group with a paused-by-default ticker, sort menu (Recent · A–Z · Count) shared with Grid section ordering, and a shareable ?group= URL
  • ThumbHash placeholders — instant blurry previews before full images load (28 bytes per image)
  • Lightbox with arrow-key navigation, auto-loading next at the paginated boundary, comments, and inline editing
  • Lightbox keyboard shortcuts — E edit · D delete · C crop · B save · A annotate. Inside the inline editor: name field pre-focused, Tab walks through fields with a visible focus ring, ↑/↓ arrow nav through dropdown results, Enter saves, Esc cancels. Inside crop: arrow keys nudge each handle (1% / 5% with Shift).
  • Save → parabolic flight animation. A small thumbnail of the screenshot arcs from the clicked Save button to the toolbar's Saved filter — confirmation you can see, not just a toast. Share buttons morph to a green checkmark on copy with a cubic-bezier overshoot.
  • Flow chip strip below the toolbar — optional alternative to the Flow dropdown. Pick "Flow as strip" in the Filters ▾ menu and every flow becomes a one-click chip; the dropdown variant uses a chip-cloud layout instead of a vertical list. Multi-select either way.
  • Lightbox crop — trim any side (top, bottom, left, right) of a screenshot in one pass; annotations re-project to the new bounds. Enter applies, Esc cancels.
  • Area annotations — drag a box around a region (a modal, a button, a state) and name it; the catalogue is filterable by annotation label across the full DB
  • Lightbox area focus — clicking an area annotation dims the rest of the screenshot so the region you're discussing pops. Click outside or press Esc to clear.
  • Label-driven filters and search — Page type, UI element, UX pattern, and Screen state chips appear in the filter sheet as labelled screenshots accumulate. Search also matches the structured title and one-line summary.
  • Quick Upload with search-and-add comboboxes for Flow and Group (sourced from your full project scope), filename-parsed fallbacks, smart defaults that stick within a session, and first-open prefill from active toolbar filters
  • Quick Upload shortcuts — Cmd+V on the catalogue page pastes any clipboard image into the queue; drag-and-drop files (or a top-level folder of images) anywhere on the grid does the same
  • Bulk operations — rename, re-group, re-assign flow, or delete multiple families at once
  • Trash with 15-day Restore — deletes move to a Trash tab in Team Settings; restore any time within 15 days, otherwise auto-purged nightly. Cards animate out with a soft dissolve so the removal feels intentional, not abrupt.
  • Multi-select toolbar filters for group, flow, and annotation labels (with built-in search), plus platform, theme, and view-by
  • Toolbar search across screenshot names, filenames, and group names — type a group like "Binance" and the catalogue narrows to everything in it
  • Catalogue search modal — Cmd+K (or Option+Space) opens a Spotlight-style search across Groups, Flows, and Screenshots at once. Screenshot results render as cards with thumbnails; pick any to narrow the catalogue to that exact view. Recents persist across sessions; mobile gets the same modal full-screen.
  • Group appearance — paste, drop, or click to upload a custom group icon; first-letter avatar fallback. Tag each group as CEX/DEX and India/Global; a new filter bar above the Groups admin narrows by Type, Region, or text query, with URL params for shareable views.
  • Group detail page at /g/<key> — every group label across the catalogue (cards, lightbox header, comments-panel meta chip) is clickable and lands on a dedicated page with header, sub-nav, and a breakpoint-bucketed thumb grid (single-col + 2-col-wide tiles packed via grid-auto-flow: dense). 50/page infinite scroll; Group View dock chips redirect here too.
  • Shareable read-only view — generate a public URL for any group + flow + platform combo. Recipients see a brand-light page with a Clock pill showing freshness; toggle between List and Carousel modes (peek layout on desktop, swipe-only on mobile). Deep-link to a specific step in the carousel via URL.

Videos

Collect design reference videos and X (Twitter) posts for competitive UX research — thumbnail-first cards, click to load.

References
What it does
  • Curated video library for design references and competitive UX studies
  • X (Twitter) posts render as thumbnail-first cards — author + handle + text excerpt + media poster — without loading widgets.js on first paint. Click any card to open the lightbox with the embed inside.
  • Lightbox nav with ← / → arrow keys + prev/next buttons walks between saved references
  • Add references from the web UI or directly from Telegram
  • Comments per video for team discussion and annotation

Links

Save and organize important URLs — competitor pages, design inspiration, documentation, and more.

Coming Soon
Planned
  • Save URLs with title, description, and optional thumbnail
  • Organize links by category or brand
  • Share links via Telegram bot
  • Comments and team discussion per link

For designers

A research library, not just a screenshot dump

Capture the thinking

Six-section structured metadata per screen, not just tags. The catalogue stores what each screen is, not just what it looks like.

Labelling Studio
What you get
  • Page type, UI element, UX pattern, screen state per screen — six labelled sections built specifically for design research, not generic notes
  • Area annotations with labels — drag a box around a modal, button, or empty state and name it; the whole library becomes filterable by annotation label
  • AI-friendly JSON paste — feed in an LLM-generated label blob in one click; verified status auto-downgrades to draft so AI can't bypass human review
  • Inline comments per screen for team discussion

Slice by anything

Filter the entire library by any axis you've captured, not just filename keywords. "Show me every empty state on a checkout page" is a single click away.

Discovery
What you get
  • Label-driven filter chips — UX pattern, page type, UI element, screen state — appear automatically as labelled screens accumulate
  • Group taxonomy filters — tag groups as CEX/DEX and India/Global (or whatever taxonomy fits your domain), then filter the admin Groups view by Type, Region, or text search
  • Multi-axis grouping — every screen sits at the intersection of Group × Flow × Platform × Theme; you're never forced into a single hierarchy
  • Search across structured fields — matches the labelled title and one-line summary, not just filenames

Share a flow, not a folder

Public read-only URLs by group + flow + platform, with two viewing modes. Send "Onboarding on mobile across 14 neobanks" as one link.

Share view
What you get
  • Public read-only URL, no login required — recipients see a clean, brand-light page
  • Toggle between List (vertical scroll of the whole flow) and Carousel modes — peek layout on desktop, swipe + dots on mobile
  • Deep-link to a specific step in the carousel via ?step=N — "look at step 3" lands directly on it
  • Last-updated pill so viewers always know how fresh the screens are

Mobile-first

Share from your phone via Telegram

Screenshots

Share a screenshot image from your phone and it lands in the Catalogue "Social" group automatically.

  • Send any image to the bot — it uploads to Supabase and appears in Catalogue
  • Auto-named with date-based sequencing
  • Allowlist-based access control

X Video Links

Paste an X (Twitter) post URL and it's added to the Videos section as an embedded reference.

  • Supports x.com and twitter.com URLs
  • Duplicate detection — bot tells you if it's already saved
  • Normalizes URLs to canonical format

How it works

Three ways to add content

1

Upload from browser

Drag and drop screenshots into the Catalogue, or paste X post URLs into the Videos section.

2

Share from Telegram

Send screenshots or X links to the Telegram bot from your phone — they appear in the Catalogue instantly.

3

Browse and organize

Use Grid, List, Gallery, or Folder views. Filter by brand, platform, or theme. Annotate and comment inline.

FAQ

Common questions

What is AgentUX Catalogue?

A web-based screenshot library and reference collection tool for product teams. Organize screenshots by brand, save video references, and collect links — all in one place.

Can I add screenshots from my phone?

Yes. The Telegram bot lets you share screenshot images or X (Twitter) post URLs directly from your phone. Images go to the Catalogue and X links go to the Videos section — no desktop needed.

What are ThumbHash placeholders?

Each screenshot is encoded into a tiny 28-byte hash on upload. This hash renders as a blurry preview instantly — before the full image loads. You see color and shape immediately, then the real image fades in.

Is this free?

Yes. AgentUX Catalogue is open source. You need a Supabase project for the database and storage backend.

Who can see what's in my catalogue?

Only team members you invite. The catalogue is gated behind a per-email passcode — admins mint passcodes from Settings → Team → Members and share them through a secure channel. Row-level security on the database means even direct API access requires a real session, so nobody can scrape the catalogue with just the URL. Public share links (/share/...) stay anonymous on purpose so you can send specific flows to outside reviewers without giving them edit access.

Can different team members have different access?

Yes — every member holds a role, and roles map to capabilities like upload, delete own / any, edit metadata, share, labelling studio, and admin reach. The five seeded roles (Admin, Researcher, ResearcherAI, Marketing, QA) cover most teams; admins can also create custom roles and toggle capabilities per role from Settings → Team → Roles. The Marketing role gets a dedicated Marketing Bucket — their uploads land in one group with a free-text "suggested catalogue group" hint, and admins promote items into the main catalogue by editing the group on each screenshot. RLS enforces every capability server-side, so the UI gates are mirrored at the database.