# Say it precisely

> Give feedback an agent can act on first time, by pointing at the exact element and naming exactly what is wrong with it.

Module: How good interfaces think · Level: beginner · 6 min · https://school.agents.org.in/design/philosophy/say-it-precisely

Same problem, two ways to report it. In **Describe**, the agent gets a sentence. In **Point**, tap the part of the card you mean:

*[Interactive demo: A sentence sends the agent searching. A pointer sends it to the line.]*

"The button on the pricing thing looks kind of off" opened four files and ended in a guess. Tapping the button handed over its exact address, its file and line, and its current style. The agent had nothing left to search for.

## Pointing beats describing

Benji Taylor's rule: **when feedback is going to an agent, precise selection beats prose.** Agents are good at making changes and comparatively bad at finding where to make them. Every step spent searching is a step not spent on the fix, and a chance to fix the wrong thing.

| Prose | Pointing |
|---|---|
| "the blue button in the sidebar" | `.sidebar > button.primary` |
| "the spacing on the card feels off" | `.product-card`, `ProductCard.tsx:42`, `padding: 16px 12px` |
| "make this section more interesting" | `section#hero`, plus a link to a hero you like |

That address in the right column is a selector (The exact address of an element on a web page, like .plan-card > button.primary. Handing one to an agent tells it precisely which thing you mean): the exact path to one element on the page, the same thing CSS uses to style it.

## How to point

You do not have to write selectors by hand.

  **Step: Click to annotate.** Benji Taylor's Agentation (Benji Taylor's development toolbar: click any element in your running app, write a short note, and it hands an agent the element's selector, file and your words) adds a small toolbar to your app while you develop. Click an element, type your note, and it hands the agent the selector, file and styles.

  **Step: Copy from the browser.** Right-click the element, choose Inspect, then right-click it in the panel and pick Copy → Copy selector. Free and built in.

  **Step: Screenshot with a mark.** For anything that is not a web page, a screenshot with a circle drawn on it is pointing too.

  **Step: Quote the lines.** In code review, paste the exact lines, not "the function near the top".

> **Fragile addresses break.** `.card > div:nth-child(3) > span` is a selector, but it breaks the moment someone adds a div. Prefer names that describe the thing: `.product-card__name` or `[data-testid="price"]`.

## Point, then say why

A bare pointer is worse than prose. "`.sidebar > button.primary`, fix it" tells the agent *where* but not *what*, so it guesses. Pointing finds the element; words explain the problem.

  **Pointer, no reason (avoid):**

`.plan-card > button.primary` — fix this.

  **Pointer plus reason (do this):**

`.plan-card > button.primary` (`PlanCard.tsx:42`): padding is `6px 10px`, cramped for the main action. Make it `10px 16px` with a 44px minimum height so it is easy to tap.

## Articulate precisely

The words half of feedback has its own rule. Two people look at the same screen. One says "it feels off". The other says "the line height is too tight and the small uppercase labels need more letter spacing". Only the second can fix it, hand it to someone or teach it. The difference is not taste. It is vocabulary (The exact names for how interfaces look and move, like tracking, easing or hierarchy. The right word gets you the right result from an agent).

"Say precisely what you mean" is the idea behind Index, the design vocabulary project by Emil Kowalski and Glenn Carstens-Peters. Naming something exactly is what lets you discuss it, critique it and instruct it. "Make it pop" is a wish; "raise the contrast to 4.5:1" is a spec.

Precision runs both ways:

- **Your input.** The exact word ("widow", "optical center", "layout shift") tells the agent exactly what to change.
- **Its output.** A good review names the thing: "the play icon looks off-center because it is centered by its box, not by its visual weight". "The icon looks weird" is not reviewable.

*(Every "don't" needs a "because". A rule without a reason does not survive the next prompt.)*

Watch the pairs that vague language blurs together: kerning (one pair of letters) versus tracking (a whole line), a tag versus a badge, a widow versus an orphan. Mixing them up quietly tells the agent you cannot see the difference.

And precise does not mean jargon. "The button has no hover state" is precise and plain. Use the shortest words that leave nothing to guess.

**The two-channel note (paste into your agent):**

```text
In src/components/PlanCard.tsx, the element .plan-card__price (line 21): the digits shift sideways when the price toggles between monthly and annual, because they are proportional figures. Add font-variant-numeric: tabular-nums. Change nothing else, and tell me the line you edited.
```

**Ask the agent to be precise back (paste into your agent):**

```text
When you review this screen, name each problem exactly (the element's selector and file, the property, the value) and give one sentence of why. No "looks off" or "feels weird".
```

**Check yourself:** Which piece of feedback will an agent act on correctly first time?

- [ ] The pricing card looks a bit off
- [ ] .plan-card > button.primary — fix it
- [x] .plan-card > button.primary (PlanCard.tsx:42): padding 6px 10px is cramped for the main action; use 10px 16px
- [ ] Make the button pop more

*Why:* It points at the exact element and says what is wrong and what to change. A bare selector says where but not what; prose says neither.

## In the skill

- https://school.agents.org.in/skill/philosophy/pointing-beats-describing.md
- https://school.agents.org.in/skill/philosophy/articulate-precisely.md