Design Probe: Claude Code skill for UI design exploration

Design Probe is a Claude Code skill, built at AR Labs, for anyone choosing what a page or feature should look like before it is built properly. It generates a small set of distinct visual directions as quick HTML prototypes, shows them side by side as screenshots, iterates on the chosen one a single change at a time, and locks the result as a reference. The locked page becomes the visual contract for the production build that follows. The output is deliberately low-resolution, plain HTML with Tailwind from a CDN and no build system, so that exploring a direction is cheap and throwing one away loses little. We built the workflow; its rules against generic AI-generated design, and its list of aesthetic directions to choose from, extend the guidance in Anthropic's open-source frontend-design skill.

How it works

Intake. The project, a one-sentence description of the feature, and optionally the design tokens (the named colours, fonts and spacing values a project's styles are built from) to honour or break from, brand constraints, must-have components, the audience, and existing prototypes to start from. If the request is too vague, such as "make a homepage", the skill asks one clarifying question and waits rather than producing four guesses.

Parallel research. Two agents run at once. One reads the project's existing design tokens and returns a one-page summary. The other surveys eight to twelve competitors in the feature's category and adjacent ones, or reads existing prototypes supplied as starting points, and returns the dominant patterns, the over-used looks, the gaps, and three to five direction hypotheses. If the project has no design tokens, the themes start from a neutral baseline and the skill says so.

Directions. The skill proposes three or four named directions, such as "Dark Instrument" or "Editorial Print", each with a one-line rationale, and confirms the slate before generating anything. It draws them from a library of a dozen directions (Brutally Minimal, Editorial Magazine, Industrial Utilitarian, Dark Instrument and others), each matched to the kinds of product it suits. Each prototype is one self-contained HTML file and shows the feature's two main states side by side (idle and active, empty and populated) so the person choosing sees how the theme handles the change without clicking.

Screenshots at 1440 by 900 pixels (desktop) and 390 by 844 (phone), taken with a browser automation tool and presented together, direction by direction. If no browser tool works, the skill hands over the HTML files to open by hand.

Selection and iteration. The person choosing picks one, mixes two ("the type of A with the colours of B"), rejects all with a reason that feeds the next round of research, or asks for exactly one more. Iteration is one change per round with a screenshot after every change. The loop ends on an explicit signal such as "lock it in" or "that's the one". If a component need appears, such as an audio waveform, a third agent researches component libraries in parallel; if the chosen library cannot load from a CDN, the prototype falls back to plain CSS and the gap is recorded.

Lock. The chosen HTML is copied into the project as its design reference, with a decisions record covering the theme history, the final tokens and notes for whoever builds it. Rejected directions are kept for later reference.

The judgement it encodes

Avoid the defaults that mark AI-generated design. Every theme avoids, unless asked: Inter, Roboto, Arial, Space Grotesk and generic system font stacks; a purple gradient on white, the stock Tailwind blue gradient and pastel lavender with a teal accent; the hero, three-column icon grid and benefits template; everything centred; linear easing; and identical fade-ins on scroll. The skill offers alternatives for each: distinctive typefaces from free libraries such as Fontshare, colours defined in OKLCH (a colour space in which equal steps look equally different) with WCAG AA contrast checked, two strong colours and one accent rather than a rainbow, asymmetric grids and uneven rhythm, and spring-like easing with staggered entrances.

One change per round. Two changes at once make it impossible to tell which one the person liked.

No invisible iterations. Every change is screenshotted and shown.

A way out of indecision. After three rounds without a decision, the skill offers three specific micro-variants as single questions. After two more, it suggests a provisional lock and reminds the person that it can be reversed.

One page at a time. A request to "redesign the whole app" is redirected to a single page or feature, and a request too vague to act on gets one clarifying question before anything is generated.

Exploration is not production. The skill never builds the real React component; it hands a reference to the implementer.

What exists today

We use the skill for new pages and features in our web projects. Its counterpart for the production build is Frontend Implementer. The locked reference is structurally compatible with the prototypes made by our Frontend Designer agents, so their design-token extractor can take it as input.

Example

Illustrative example. A proposed slate for a voice-session page:

Directions for "live voice session page":
 
1. Dark Instrument: a near-black panel with one amber level meter;
   reads as equipment you operate.
2. Editorial Print: a serif transcript as the main surface, with
   voice controls in the margin; reads as a document being written.
3. Paper Lab: cream paper, mono labels, phase colours for listening,
   thinking and speaking; matches the lab's task maps.
 
Each file shows two states side by side: idle and mid-conversation.
Confirm the slate, or replace one direction?