Relay Product · Branding

Say what's wrong out loud, get a spec

A Chrome extension that turns spoken UI feedback into written specs and screenshots for coding agents.

RoleIdea · Branding · Product design
Built withReact · TypeScript · Chrome MV3
Relay running as a Chrome extension: a browser window on a localhost app, with the Relay side panel docked to the right and the extension icon lit in the toolbar.

Where it lives Relay sits beside the app you're working on, so you can capture and describe a problem without leaving the page.

Relay's structured view: the spoken sentence on the left above three casual-to-engineer mapping cards, and the route, type and final engineering instruction on the right.
Relay's capture window: the cropped region pinned under a captured header, a glowing microphone, a timer, and the live transcript appearing underneath.

Translate the vocabulary, not the meaning Relay turns casual visual feedback into clearer engineering language while keeping every translation visible and editable.

Relay with microphone access blocked: a red mic icon, an explanation of how to unblock it, and three buttons - try mic again, mic settings, and type instead.
Relay's empty state: no localhost detected, with instructions to run npm run dev and a note that the screen lights up once a localhost tab is open.
Relay's issue queue: three captured issues tagged Visual, Behavior and Bug, each with a route, a thumbnail and a drag handle.

Failure states Mic access blocked, no localhost detected, or a capture that can't be processed - each state gives you a way to continue without losing your work.

Relay's export screen: markdown, plain and JSON tabs over a live preview, above a card showing the exact folder tree that will be written to disk.
Relay's settings: live keyboard shortcut rows, capture toggles, and a Sites section listing the built-in localhost entry above a form to add another origin.

Preview before export Relay shows the files and folder structure before anything is written to disk, so you know exactly what you're handing off.

The problem

Giving UI feedback to a coding agent often means taking a screenshot, switching tools and rewriting what you meant with more technical language.

Relay keeps that process on the page you're already looking at.

What the export actually is

The exported folder open in Finder: issues.md selected with its markdown previewed on the right, above the three numbered PNG screenshots it references.

Each session becomes a folder of Markdown and screenshots, with the images numbered to match the issues that reference them.

Where the handoff lands

The Relay export opened in Claude: the exported folder attached to the message with issues.md and the three screenshots listed, and Claude replying with a diff for ISSUE-001.
Use it in Claude
The Relay post as it lands in Slack: a message in #atlas-frontend from the Relay app listing the three issues, with the screenshots uploaded beneath it and a developer replying in thread.
Use it with your team
The same export turned into Jira issues: three new tickets in the Atlas Dashboard project, each typed, labelled and carrying its screenshot as an attachment.
Jira, or any ticket system Soon

The same capture can move into different tools without changing the core information being handed off.