UI code prompts: reuse tokens and components with a change gate

Last updated: 2 Oct 202611 min read

tutorial

A component-reuse gate asks the implementer to search existing controls and design tokens before introducing new markup or CSS. Reuse is a decision, not an absolute rule: extend a shared component when its public contract can support the new behavior without harming other screens; otherwise keep the change local and explain why. State typography, spacing, color, and focus requirements as named design rules rather than arbitrary values copied from an image. Require the final change list to identify any shared component, its consumers, and regression checks. This prevents a page-specific prompt from silently changing a site's common navigation or controls.

Operational case

The Dispatch Queue already has a Select control and spacing tokens. The requested status filter can use that Select with one new option list, so the prompt forbids a duplicate pill control made only to match the screenshot. The existing focus style is retained. If the Select cannot represent the required label or state, the implementer records that mismatch and proposes a narrow extension with checks on the two screens that already consume it. The queue's row layout stays local. The prompt asks for a diff summary that names affected files and visible behavior, not a claim that all UI is improved.

Inspect: existing Select, list row, type scale, spacing and focus tokens.
Decision: reuse Select if its role and state contract fit.
Shared change: list every current consumer and regression check.
Local change: keep queue row layout inside the queue feature.
Review packet: changed files, before/after behavior, unresolved assumptions.

Performance and operating cost

Repository search and consumer review add O(F) inspection over relevant files, but can avoid maintaining two controls with separate bug paths. A shared component edit expands the regression surface to its C consumers, so the release check is O(C) screens or representative contract tests. Copying CSS may seem faster for one page but creates future update work when tokens change. Do not optimize for fewer files if that means hiding a behavioral change in a global style.

Common Mistakes

Do not duplicate a control solely to copy a screenshot's shape.
Do not change global tokens to fix one page without checking other consumers.
Do not report a shared change as page-local in the review packet.

Connected lessons

prompt engineering

ui engineering