Specify interactive explanations as inputs, state and checks

An interactive explanation needs a small behavioral specification. Naming the inputs, the state and a few checks gives a developer something more precise to build or review than a request for an attractive interface.

This article was generated with AI assistance and source verification. The code below is an original, deterministic example. It does not claim that a particular ChatGPT account produced or supports a particular interface.

Start with one task

Consider a study planner that offers 25, 45 or 90 minutes. Its job is to divide the chosen time into warmup, practice and recall, while keeping completion marks separate from the time allocation. The independent Intelligent UI field guide provides prompt ideas and an original browser demo as reference points. Its own demo is labelled as a site demo, rather than a verified ChatGPT output.

For an original example, keep warmup at five minutes and recall at ten. Practice gets the remaining minutes. These are design choices for this example, not an experimentally established learning schedule.

export function allocate(minutes) {
  if (![25, 45, 90].includes(minutes)) {
    throw new RangeError('Choose 25, 45 or 90 minutes.');
  }
  return { warmup: 5, practice: minutes - 15, recall: 10 };
}

Separate input state from completion state

The selected duration determines the allocation. A checked task records an action by the user. Checking a box should not silently change the duration or claim that the topic has been learned. Resetting completion marks should not erase the selected duration unless the reset action says it does.

Keeping those relationships explicit makes a generated interface easier to evaluate. A slider, radio group or select box can represent the same input; the behavior matters before the visual treatment.

Check totals, boundaries and rejected inputs

For each permitted duration, all three blocks must be nonnegative and their sum must equal the selected duration. Check the smallest and largest values, then an unsupported value. Do not silently accept 40 minutes when the specification offers only three choices.

for (const minutes of [25, 45, 90]) {
  const plan = allocate(minutes);
  const total = Object.values(plan).reduce((sum, value) => sum + value, 0);
  if (total !== minutes) throw new Error('Incorrect time total');
  if (Object.values(plan).some(value => value < 0)) {
    throw new Error('Negative time block');
  }
}

These checks verify this allocation function. They do not test an entire browser interface, a model response or the learning outcome of the schedule. Add separate checks for labels, controls, completion marks and reset behavior when implementing an actual interface.

State the expected feedback in the prompt

An original prompt could ask for a planner that uses only the three durations, explains the allocation formula and shows the total beside the controls. Ask it to keep unknowns explicit and to avoid treating task completion as proof of understanding.

OpenAI's prompt-engineering documentation explains that generated content can vary. Inspect the response you receive against the behavior you specified. An interface sketch is a starting point for that review, rather than evidence that the checks passed.

Published under Carl Sagen's authorization for IntelligentUI. Source information checked October 11, 2026. No account-specific feature availability or firsthand model-output experiment is claimed.