How it works

From a click to a committed fix

No screenshots. No selector hunting. No follow-up questions. Here is the whole loop, start to finish.

A live site with Vynix installed
  1. Point at an element
  2. Leave a note
  3. Context captured
  4. Markdown or MCP
  5. AI agent fixes it
  6. PR on GitHub
  7. Status syncs back
How it works

From a click to a committed fix

Four steps. No screenshots, no selector hunting, no follow-up questions.

01

Point at anything

Click an element or drag a region on your live site. The hovered element highlights and names itself (button, link, input, image) so you always hit the right target.

02

Leave a note

Describe the change in plain language and set a type and priority. Vynix silently records the surrounding context as you write.

03

Capture the context

Page, CSS selector, XPath, DOM snippet, computed styles, viewport, plus recent console errors and failed network requests, attached automatically.

04

Ship the fix

Copy a clean Markdown report or let your agent read it live over MCP. It already knows the element, the intent, and the evidence.

The problem

Vague feedback is expensive

“Make this bigger” sends a human (or an agent) on a guessing expedition. Vynix replaces the back-and-forth with exact, actionable context.

Without Vynix
  • “Make this button bigger.”

    Which button? Which page? What size? Cue a screenshot exchange.

  • “This looks broken on mobile.”

    No element, no viewport, no console error, just a feeling.

  • “The checkout feels off.”

    The agent guesses the selector and edits the wrong component.

With Vynix
  • Exact element: CSS selector, XPath and DOM snippet attached.
  • The page, viewport and computed styles, captured automatically.
  • Console errors and failed requests, so “broken” comes with proof.
  • A clean Markdown report, or live access over MCP.
What gets captured

Context that reads like a perfect bug report

Every annotation arrives with the technical detail an agent would otherwise have to ask for, assembled silently as you type.

Page

  • URL & title
  • Viewport size
  • Browser & device
  • Captured timestamp

Element

  • CSS selector
  • XPath
  • Tag, id & classes
  • Inner text
  • Box & position

Appearance

  • Computed styles
  • DOM snippet
  • Nearest landmark
  • Region screenshot bounds

Runtime

  • Console errors
  • Failed requests
  • Status codes
  • Request timing
Privacy-safe: metadata only, query strings stripped
vynix-feedback.md
## Vynix feedback: acme.store

### #1 · Headline · High
> Tighten this headline and raise contrast, fails AA.

- url: /
- selector: h1.hero__title
- xpath: /html/body/header/h1
- viewport: 1440×900
- styles: color #94a3b8; font-size 28px
- console: TypeError: cannot read 'focus' of null (hero.js:42)
GitHub handoff

Turn a pin into a tracked issue

Push one note (or a whole batch) straight to GitHub. Each issue arrives with the selector, intent and evidence in the body, then assigns itself to Copilot or a teammate so the fix starts itself.

  • Create issues from a single note or an entire batch at once.
  • Auto-assign to GitHub Copilot, a teammate, or leave it for triage.
  • Selector, computed styles and console errors land in the issue body.
  • Status syncs back to Vynix as the issue moves and closes.
github · acme/store
$ vynix push --batch checkout-pass

 opened #412 Make the primary CTA larger
 label: bug · selector: section.hero button.cta
 opened #413 Fix overlapping footer on tablet
 opened #414 Tighten hero headline contrast

 assigned @copilot to 3 issues
 Copilot started a branch on #412
Start to finish

From “too small to tap” to merged

One real pass through the loop: one message, zero screenshots, zero follow-up questions.

  1. Reviewer

    Sarah taps the Pay button and types one sentence

    Reviewing checkout on her phone, she clicks the button and writes: “Too small to tap. Raise it to 48px and use the primary color.” Type: bug. Priority: high.

  2. Vynix

    The context assembles itself

    While she types, Vynix records the exact element and the evidence around it. Nobody takes a screenshot, nobody opens DevTools.

    selector: section.checkout button.pay · height: 34px · viewport: 390x844 · console: clean

  3. AI agent

    Claude Code reads the note over MCP and ships the fix

    The agent pulls the annotation live, opens the component, raises the tap target and switches the variant, then opens a pull request with the evidence as its description.

    edited Button.tsx · min-h-12 · variant="primary" · PR #218 opened

  4. Vynix

    Resolved, with no follow-up thread

    When the fix lands, the annotation flips to Resolved for the whole team. Sarah never wrote a second message.

No code, any site

Vynix lives in your browser

Pin the extension and point-and-capture on any page: your own app, a staging build, a client’s site, even one you do not own. No snippet, no deploy.

  • Works on any website, the moment you click the icon.
  • Nothing to add to your site. Perfect for QA and agencies.
  • The same agent-ready capture as the embedded widget.
Add to ChromeFree · Works in Chrome, Edge & Brave
app.acme.io/checkout
Checkout
1
#1 button.checkout

“make this primary and a larger tap target”

Stop describing bugs. Point at them.

Add one script tag and give your AI agent the context it has been missing. Free while we grow.