Compare purposeful UI design variants

Variant builds three versions of one described UI piece and places them behind a picker in the page where the piece belongs. Each version answers the same brief from a different position on one primary design axis.

The workflow produces candidates and explains tradeoffs without ranking them. The user chooses a direction, after which the selected variant is implemented in its proper location and the temporary alternatives and picker are removed.

Use it to explore a focused interface decision within an authorized implementation scope, such as one metric card rather than an entire dashboard. Begin with a one-sentence brief covering the piece, its location, and its required behavior.

The primary axis can be structure, density, emphasis, type, or voice. Secondary changes should follow coherently from that choice rather than vary independently. A density change may require a smaller type step, but merely changing accent colors does not establish a purposeful alternative.

Reviewing existing UI belongs to interface-review or better-interface, hostile component scenarios to break, and individual product states to state-machine. This skill explores alternatives rather than certifying an interface.

Read the project's styling system, component and motion libraries, tokens, density, voice, surrounding content, backgrounds, and target widths. Where no project context exists, the fallback is neutral grays, one accent, and the system font stack, with that assumption stated.

Name the axis and variant set before coding. Three is the default; five requires a request. Names describe the direction, such as Quiet or Dense, and every candidate must occupy a distinct axis position. The picker group heading identifies the axis being compared.

Each candidate must clear the same accessibility and usability floor. Controls need accessible names, visible focus, and keyboard access. Motion respects reduced-motion preferences. Content stays reachable at 320px and 200% zoom, text passes required contrast, and state does not depend on color or motion alone. Destructive actions need distinct treatment or recovery safeguards; truncation and disclosure need access cues; errors need recovery guidance; semantic colors retain their meaning.

Render one full-size candidate at a time with real page chrome, neighboring elements, and realistic product-shaped data. Thumbnails and generic short fixtures would distort the spacing and density decision. A grouped picker updates a URL parameter such as __variant so each direction is linkable. It sits beside the piece or becomes a grouped select above it when space is limited, remaining visually separate from the design system.

Variant files may import production components, while the hosting page alone imports the variants. If no page can host them, use a self-contained HTML file with the same picker.

Load every candidate in an available browser, verify rendering and interactions, and check the console. Without browser access, disclose the limitation and provide the URL. Present Variant, Axis position, Right when, and Costs, plus the running location, picker key, and inspected width. Do not mark a favorite.

After selection, implement the chosen direction using project conventions. Remove alternatives, the picker, and hosting imports, then search variant names and the parameter for leftovers. Another exploration round retains the harness but defines new positions around the preferred direction.

The workflow reuses the existing application environment and picker.md specification. Domain ownership comes from better-layout, better-colors, better-typography, and better-writing, with better-interface defining the shared escalation floor. Browser availability limits verified comparison.