What AI-generated components actually cost when the system is the standard

Tina Singh found that components generated by AI looked finished in screenshots but lacked focus, pressed and dark-mode states, so she now settles their behaviour before asking for code.

Tina Singh, writing in Design Systems Collective about her own design-system work, reviewed a card generated by AI against a screenshot and found it close enough to hand over. In use, it lacked a focus ring and a pressed state, and its warning icon failed contrast in dark mode. She now decides each component's behaviour, and which reference it must match, before any code is generated.

• The warning icon borrowed a background token because the system had no token for status icons, and it measured 1.6:1 against its panel, below the required 3:1.
• A side navigation used a real token from the data table, which was the wrong token for that component.
• A generated modal footer matched the shipped component exactly, but the shipped component had drifted from the documented pattern in the design file.
• Before generating code, she settles focus, the primary action, states, dismissal rules and token behaviour across colour modes, and asks for missing tokens to be reported rather than filled.

A design-system team can settle conflicts between its design file and its shipped code before giving either to an AI tool as a reference. This is an inference and is not the author's claim.

Derived by Working Surface from the article; more in the Playbook. Source line: Moving the decisions earlier does not make the review disappear.

28 October 2026: as AI agents make code look finished sooner, teams are moving the human check to before the build and keeping a person accountable for the changes that are hardest to undo.