You write "the box is broken on the pricing page" and Claude Code guesses. Sometimes it guesses right. More often it edits the wrong container, changes a margin that was never the problem, and burns a turn. The fix is not more prose. It is picking words that mean one thing when they arrive as text.
Claude Code reads your feedback as markdown, not as an image it can point at. A cropped still travels with it, but the words carry the instruction. So the words have to be precise about three things: where on the screen, which element, and what is wrong with it. Below is the vocabulary that survives that trip, grouped by those three questions.
Region words: where on the screen
These name a zone of the layout. They are useful because they are unambiguous regardless of screen size.
- Header: the strip across the top, usually with the logo and nav. Say "the header" and an agent knows the top band, not a heading tag lower down.
- Nav / navigation: the set of links for moving between pages. Distinct from the header, which may contain it.
- Hero: the large first block below the header, typically a headline plus one image or call to action. Matters because designers and agents both use the word for the same block.
- Sidebar: a vertical column beside the main content. Specify left or right if the page has one of each.
- Main / content area: the primary column. Use it when the problem is in the body, not the chrome around it.
- Footer: the bottom strip with secondary links and legal text.
- Modal / dialog: a box layered over the page that blocks the rest until dismissed. Not the same as a dropdown or a tooltip.
Pair a region word with a screenshot and the agent has a coordinate and a name. When the exact spot inside a region matters, drop a numbered pin on the still so the description and the marker agree.
Element words: which thing
Region tells the agent the neighborhood. Element tells it the object. Use the name a developer would recognize in the code, because that is the name that maps to a change.
- Button: a clickable control that does something. Not a link styled to look like one unless you say so.
- Link: text that navigates. Say "link" when the fix is about href or color, "button" when it is about an action.
- Input / field: a box the user types into. Name the label: "the email field," not "the top box."
- Label: the text attached to a field or control.
- Card: a bordered or shadowed block grouping related content, like one plan in a pricing grid.
- Icon: a small graphic, often clickable. Say what it depicts: "the gear icon," "the close X."
- Dropdown / select: a control that opens a list of choices.
- Container / wrapper: the invisible box holding other elements. Reach for this only when the spacing or width of the group is the problem, not the items inside it.
"The second card in the pricing grid" beats "the middle plan." One names an element and a position; the other makes the agent count and interpret. For a fuller list of these, see the words to use when pointing at a button or region.
State words: what is wrong
The last piece is the defect. Vague words like "broken" or "off" force a guess. These name a specific visual failure.
- Overflowing: content spilling past its container, often with a scrollbar or cut edge.
- Clipped / cut off: text or an image truncated at a boundary.
- Overlapping: two elements sitting on top of each other.
- Misaligned: elements that should share an edge or baseline but do not. Say which edge: "the icon sits two pixels below the label baseline."
- Wrapping: text breaking to a new line where it should stay on one, or the reverse.
- Truncated: shortened with an ellipsis when it should show in full.
- Stretched / squished: an image or element with the wrong aspect ratio.
- Off-center: not centered in a container that should center it.
- Gap / spacing too tight / too loose: name the direction, top, bottom, left, right.
Put together, a usable line reads: "In the hero, the CTA button overlaps the headline below 600px width." Region, element, state, and a condition. An agent can act on that without a follow-up question.
How the words reach the agent intact
The reason this vocabulary matters is that the words are all the agent gets. A cropped screenshot shows the symptom; the markdown next to it carries the instruction. When you capture and comment in Cobalt Capture, each note becomes a line in the exported markdown, and the region, element, and state words land as plain text an agent parses without interpretation. The full flow for handing that off is in the guide to getting feedback into Claude Code.
Two habits keep the words honest. First, crop the still to the region you named, so the agent is not scanning a full page for "the header." Second, use the element's real label rather than a position. If you are unsure what to keep in frame, what to crop in and out of a screenshot covers the calls worth making.
A quick sanity check before you publish: read your comment out loud with the screenshot hidden. If a developer who has never seen the page could still find the element and know what to change, the words are doing their job. If they would have to ask "which one," add the region or the label. The common mistakes when handing UI feedback to Claude Code almost all trace back to a missing region, element, or state word.
Open a tab, capture the broken frame, and write the line using one word from each group. That is the whole discipline.