What is Quey?

Quey is a visual editing and handoff layer for coding-agent workflows. It runs alongside your browser-based development process so you can work with the page you already have open instead of describing every element from memory.

The short version: click an element in a live UI, capture the visual and source context around it, then send a structured request to the agent that will implement the change.

That makes Quey useful in the gap between design intent and source code. This is the part of frontend work where a screenshot alone is often not enough and a code-only prompt is missing the visual target.

Quey is not intended to replace your coding agent or your existing editor. You bring the agent and subscriptions you already use; Quey adds a visual context layer around the work.

Why visual context matters for agent-based development

A request like “make this card feel more balanced” is understandable to a person looking at the page, but it is incomplete for an agent. The agent needs to know which element you mean, where it lives in the component tree, what styles it has now, and what the surrounding layout looks like.

Without that context, developers often spend several turns clarifying the target. The agent may edit the wrong component, adjust a similar class elsewhere, or solve a local spacing issue by changing a broader layout rule.

Select the target

Start from the real element on the page instead of guessing which component or selector matters.

Preserve the visual state

Keep screenshots, bounds, styles, and surrounding page state attached to the request.

Patch the right code

Give the agent enough source clues to make a focused change and return to the browser quickly.

How the Quey workflow works

The core workflow is simple: move from the live page to a well-scoped agent request without losing the visual details that motivated the change.

1. Select an element in the browser

Instead of copying a vague description into a chat, select the exact button, heading, card, navigation item, or section that needs attention. Quey can capture the element identity, DOM path, bounds, and source hints when they are available.

2. Add visual feedback where it matters

An annotation can be more useful than a long paragraph. Pin a comment, bug, or TODO to the relevant element so the request stays connected to the place where the issue appears.

3. Capture a region when the surrounding layout matters

Some issues are not isolated to one node. A headline may look fine by itself but collide with the CTA below it, or a sidebar may only feel wrong in relation to the main content. Region screenshots provide the larger visual context without requiring a full-page explanation.

4. Tune styles and layout with a live preview

Quey focuses on the properties developers most often adjust during visual iteration: color, typography, spacing, effects, position, size, ordering, rotation, and alignment. You can explore a direction visually before asking the agent to make the durable source-code change.

5. Send the context to your coding agent

Once the target and desired change are clear, send the context to the agent in your workflow. Quey is designed to work across agent and editor setups including Codex, Claude, Cursor, VS Code, and MCP-aware workflows.

A focused request has four parts

Target: which element or region should change.
Current state: what the browser is showing now.
Desired state: what should look or behave differently.
Scope: which component, style, or layout rule should be considered.

The features that make Quey useful

Element selection and source clues

The most important feature is the connection between what you can see and what the agent needs to edit. Element selection can include DOM paths, dimensions, selectors, component identity, and source-file hints, giving the agent a more reliable starting point than a screenshot or CSS class copied by hand.

Annotations that stay attached to the UI

Pin comments, bugs, and TODOs directly to the interface. This is especially helpful during review, QA, and rapid iteration because the feedback remains anchored to the element instead of becoming a disconnected list of notes.

Region screenshots with semantic context

A targeted screenshot can show the exact visual problem while avoiding irrelevant page noise. When it is paired with the selected element and its metadata, the agent gets both the visual evidence and the structural clue.

Live style and layout editing

Adjust colors, fonts, spacing, effects, position, size, ordering, and alignment while looking at the page. This gives you a fast way to test the visual direction before committing to a code edit.

A workflow that fits existing tools

Quey is useful precisely because it does not ask you to replace the tools you already rely on. Use the browser extension to select live UI, connect it to the local project workflow, and continue with the coding agent or editor you prefer.

Who should try Quey?

Quey is a strong fit when your work involves frequent browser-to-code iteration and the visual target is difficult to explain in text alone.

Frontend developers: reduce the gap between a live UI issue and the source file that should change.
Design engineers: explore visual details directly in the browser while keeping implementation in the agent workflow.
Small product teams: turn product feedback into scoped, visual tasks without building a large design handoff process.
Solo builders: keep momentum when you are the designer, developer, reviewer, and QA person at the same time.
AI-assisted teams: give agents better context so fewer turns are spent identifying the target.

It is less necessary for a purely backend workflow or a project where the UI is not being iterated in a browser. The value is highest when the final judgment is visual and the implementation is agent-assisted.

How Quey and Pretty Headline fit together

Pretty Headline and Quey solve different parts of the same frontend workflow. Pretty Headline helps you shape a headline before it is implemented; Quey helps you inspect and refine that headline once it is running inside the real page.

A practical headline-to-code workflow

Design the headline: use Pretty Headline to choose the copy, font, weight, spacing, colors, alignment, and visual emphasis.
Preview both breakpoints: check desktop and mobile behavior before you move the design into the project.
Export the result: use HTML, React, PNG, JPG, or WebP depending on your implementation and delivery needs.
Open the real page: inspect the exported headline inside the actual app, with its real container, navigation, CTA, and responsive constraints.
Use Quey to refine: select the headline or its surrounding region, annotate any mismatch, and send the visual context to your coding agent.

This combination is useful because a headline can look correct in isolation and still need adjustment in context. The real page may have different font loading, container width, line wrapping, contrast, or spacing. Quey helps close that last-mile gap between a design preview and a production UI.

Getting started with Quey

Quey is free to start and is designed around an extension-first workflow. Visit quey.dev for the current installation and pricing details.

Quick-start checklist

Install the Quey Chrome extension.
Open the local app you want to improve.
Run the project-aware Quey command when your workflow needs it: npx quey.dev.
Select a real UI element and add one specific visual request.
Send the captured context to Codex, Cursor, Claude, VS Code, or your MCP workflow.

Start with a small change, such as a heading wrap, an inconsistent gap, or a button alignment issue. Once you see how much faster a focused visual request is, you can use the same workflow for larger layout and style iterations.

Final recommendation

Quey is a compelling addition to an AI-assisted frontend toolkit because it addresses a specific source of friction: agents can only act on the context they receive. By making the target, screenshot, source clues, and desired visual change explicit, Quey helps turn “something feels off here” into a request an agent can actually implement.

If you already use an AI coding agent and spend time iterating on web interfaces, try Quey on your next visual bug or design refinement. Pair it with Pretty Headline when you want a fast way to design, export, and then refine a production-ready headline in context.

Try Quey: Visit quey.dev, install the extension, and start with one element on a local page.

Quey: Visual Editing for AI Coding Agents and Web Apps