207
affordance
The control looks like what it does. A button looks pressable. A non-button does not.
What is affordance?
An affordance is a perceived possible action. A underlined blue string affords a link. A flat div with an onClick affords nothing. Disabled controls should look disabled. If everything is the same gray box, nothing is a control.
Why does affordance matter when vibe coding?
Models style every element as a card and put clicks on cards, headings, and rows. Keyboard and clarity disappear. Name buttons and links as the only clickable things.
How do you do affordance?
Actions are buttons. Navigation is links. If it is not those, it is not clickable. Destructive actions do not look like the primary button.
How do you ask a model for affordance?
Make affordances obvious for (screen). Actions are buttons. Navigation is links. Do not attach click handlers to divs or headings. The primary action looks primary. Destructive does not.
What goes wrong with affordance?
Underlining every heading “for style.” You told people those are links. Do not borrow the affordance you did not mean.