惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

罗磊的独立博客
The GitHub Blog
The GitHub Blog
Hugging Face - Blog
Hugging Face - Blog
博客园 - 聂微东
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
IT之家
IT之家
小众软件
小众软件
博客园_首页
G
Google Developers Blog
Apple Machine Learning Research
Apple Machine Learning Research
MyScale Blog
MyScale Blog
Engineering at Meta
Engineering at Meta
Jina AI
Jina AI
酷 壳 – CoolShell
酷 壳 – CoolShell
人人都是产品经理
人人都是产品经理
B
Blog RSS Feed
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
D
Docker
B
Blog
雷峰网
雷峰网
WordPress大学
WordPress大学
Stack Overflow Blog
Stack Overflow Blog
宝玉的分享
宝玉的分享

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Markagent: turn any UI click into a perfect prompt for Cl...
Peter Truong · 2026-05-19 · via DEV Community

The bug-report tax

If you've spent any time vibe coding with Claude Code, Cursor, or Codex, you know the tax.

You spot something off in the UI. A button is two pixels misaligned. A modal closes on the wrong click. A loading state flickers. So you start typing.

"Hey, on the dashboard page, the second button in the top-right toolbar, no, not the one with the icon, the other one, when I click it..."

Three paragraphs in, you're describing pixels instead of fixing them. The agent half-guesses. You end up screenshotting anyway, pasting it in, then explaining the screenshot. Round trip after round trip.

I built Markagent to delete that loop.

What Markagent is

Markagent is a Chrome extension for sending UI feedback to AI coding agents. You press Cmd+Shift+. (Mac) or Ctrl+Shift+. (Windows / Linux) to bring up the toolbar, hold Cmd or Ctrl and click any element on any webpage, leave a note, and hit Copy.

Out comes a structured markdown prompt your agent can act on immediately. Not a vague description, not a raw screenshot, a real artifact with the React component name, the source file path (in dev mode), the DOM context, a stable CSS selector, the page URL, the viewport size, a screenshot, and your note.

Paste it into Claude Code, Cursor, Codex, OpenCode, Antigravity, v0, Bolt, Lovable, ChatGPT, Gemini, Copilot, anything that takes text. The agent jumps to the right component and edits the right line on the first try.

A screenshot tool saves images. Markagent ships the prompt.

The anatomy of one click

Here's roughly what comes out of a single annotation (simplified):

## UI feedback

Page:       https://app.example.com/dashboard
Viewport:   1440x900
Element:    <button class="cta-primary">Save changes</button>
Component:  <SaveButton />  (src/components/forms/save-button.tsx)
Selector:   main > section.form-wrap > form > button.cta-primary

Note:
This button sits 2px too low against the input row, and the
hover state has no transition. Should match the cancel button.

Screenshot: [attached]

Enter fullscreen mode Exit fullscreen mode

That's not a bug report. That's a prompt your agent can execute against.

Journey Mode for multi-step bugs

Single-element annotations are great for polish. The harder ones are sequences. "Click here, then here, submit this form, the wrong toast appears."

Flip Journey Mode on. Markagent silently records every click as a numbered, screenshot-backed playthrough. You stop recording, hit Copy, and the markdown hands your agent the exact sequence to replay.

No more "Step 1: Open the app. Step 2: Click the button." Your clicks are the steps.

Who actually uses this

Same artifact, different readers.

Vibe coders stop typing "this button, that menu, no THAT one." Designers stop circling pixels in red on Slack; one pin proves the misalignment. Frontend engineers get the source file path with one click. PMs stop describing every tweak in prose. QA testers stop writing "Step 1: Open the app," because their clicks become the repro.

Non-developers can annotate a bug and hand the markdown to engineering. The developer reads it like a normal ticket, then forwards the same markdown straight into Claude Code. One file, two audiences, no translation.

Works with every AI tool that reads text

The export is plain markdown. If your AI tool has a text box, it works.

Tuned export templates ship for the major coding agents: Claude Code, Cursor, Codex, OpenCode, and Antigravity. The same markdown drops into vibe-coding platforms like v0, Bolt, and Lovable, conversational assistants like ChatGPT, Gemini, and Copilot, and local LLMs running through Ollama or LM Studio.

At the end of the day it's just text. Paste it anywhere.

Localhost, staging, internal tools

Markagent works on anything you can open in your browser. Localhost. Staging URLs. Internal dashboards. Authenticated sites. In dev mode it reads the React source-file path directly, so your agent doesn't have to guess which file owns the component.

The principles

This is the part I care about most.

100% local. Screenshots, notes, exports never leave your browser. Zero outbound requests, ever. Verify it yourself in Chrome DevTools' Network tab.

Zero telemetry. No analytics. No tracking. No accounts. No cloud sync.

Free forever. No paid tier, no upsell, no "Pro" plan waiting in the wings.

Every Chromium browser. Chrome, Edge, Brave, Arc, all of them. Firefox is on the roadmap.

Markagent is the kind of tool I wanted to exist, so I made sure it would still exist five years from now without a pricing page.

Try it

Add Markagent to Chrome

Site: markagent.avibebuilder.com

Pin it to your toolbar. Press Cmd+Shift+. (Mac) or Ctrl+Shift+. (Windows / Linux) on any page. The next time you catch yourself typing "the third button from the left" to your AI agent, click it instead.


Stop describing. Start marking.

If you try it, I want to hear what breaks, what's missing, and what you'd build next. Paste the markdown from your first annotation in the comments.