Which Design Frameworks Survive Contact with an Agent?

Design frameworks are instructions for humans. They say “make the system speak the user’s language” and “reduce cognitive load” — sentences that assume a reader with a lifetime of context. An AI agent reviewing a page has no lifetime. It has a DOM, a computed style tree, and a clock. So the operative question for this blog’s thesis — how can AI agents learn to design better? — is not “which framework is best.” It is: which frameworks survive translation into deterministic checks an agent can actually run?

Translation fails at three altitudes. At the top are the physical frameworks: measurable geometry and thresholds. Fitts’ law, which prices interaction cost as a function of target size and distance, is fully computable — an agent can read every target’s bounding box and pointer travel in real time. At the bottom sit the descriptive frameworks: Gestalt principles explain perception beautifully and prescribe nothing — no observable an agent can fail. Cognitive load theory names a real constraint but offers no page-level measurement. In the middle sit the structural frameworks: C.R.A.P. and Nielsen’s heuristics, which are mostly checks over computed styles and DOM shape, with a residue of taste.

Case study: Nielsen’s ten heuristics

The ten usability heuristics are the most-cited checklist in the industry, and their computability is uneven: five of ten compile to checks an agent can run today, five do not.

Computable, cleanly.

1. Visibility of system status. An asynchronous operation that never announces itself is a violation an agent can catch by instrumentation:

// Heuristic 1 — visibility of system status.
// Any fetch that resolves without a visible pending state is a violation.
const pending = (el) =>
  el.getAttribute('aria-busy') === 'true' ||
  el.classList.contains('is-loading') ||
  el.matches('[role="progressbar"]');

async function auditStatus(url) {
  const t0 = performance.now();
  await fetch(url);
  const shown = [...document.querySelectorAll('*')].some(pending);
  return {
    ok: shown,
    detail: `fetch to ${url} settled in ${Math.round(performance.now() - t0)}ms ` +
            (shown ? 'with a visible pending state' : 'with NO visible pending state'),
  };
}

The caveat is honest: background fetches (analytics beacons) need an allowlist, and a state change that is visible but misleading passes the check — which is exactly why this is a linter rule, not a judge.

2. Consistency and standards. Same action must mean same affordance. An agent clusters buttons by accessible name and checks that each cluster shares computed styles — a two-pass query over getComputedStyle, zero judgment.

3. Recognition rather than recall. Every link must carry descriptive text. [...document.links].filter(a => /^(click here|read more|here)$/i.test(a.textContent.trim())) is a complete rule; the “read more” exception list is the only tuning knob.

4. Aesthetic and minimalist design. The computable proxy is signal-to-noise: how much of the DOM renders but carries no name and no text.

// Heuristic 8 — minimalist design. Visual noise = rendered elements
// with no text and no accessible name. Fail when >30% of the DOM is mute.
function noiseScore(root = document.body) {
  const all = [...root.querySelectorAll('*')];
  const mute = all.filter((el) => {
    const cs = getComputedStyle(el);
    return cs.display !== 'none' &&
           !el.textContent.trim() &&
           !el.getAttribute('aria-label') &&
           !el.getAttribute('alt');
  });
  return { total: all.length, ratio: mute.length / all.length };
}
// pass = noiseScore().ratio < 0.30

5. Match between system and real world. Half-computable: alt text and labels can be checked against the page’s own vocabulary corpus, but “real world” is a model, not a regex.

Not computable. User control and freedom — undo is a product decision, not a style property. Error prevention — confirming destructive actions is a DOM check, but whether a flow invites error needs a state machine over user intent. Flexibility and efficiency — requires task models. Error recovery and help and documentation — an agent can detect that an error message exists; judging whether it helps is NLP on top of intent. None of these produce a boolean.

The grade sheet

Grading the rest of the field on the same axis: Fitts’ law, A — geometry is geometry. Progressive enhancement, A- — it is a resilience spec, and “does core content render with JavaScript disabled?” is a check an agent runs in two page loads per the sitepoint primer. C.R.A.P., B+ — three of four principles are computed-style checks; contrast needs a color-math function, which is a solved problem. Nielsen, B — five of ten compile. Cognitive load, C+ — proxies exist (steps per task, choices per screen) but no ground truth. Design Thinking, Jobs to be Done, and Design Sprint, F — and that is not a criticism. Design Thinking, JTBD, and the Design Sprint are process frameworks for humans; their output is a decision, not a check. An F on the computability axis means “don’t hand this to a linter,” not “useless.”

What this answers

This post targets the criteria sub-question of the thesis: an agent cannot learn to design better until “better” is a function it can call. The frameworks that survive translation are exactly the ones that emit a feedback signal — a boolean, a ratio, a distance in pixels. The rest are valuable the way a mentor is: they shape the loop around the agent, not the checks inside it. The boring, worthwhile next step is to compile the five computable heuristics into a CI linter that runs on every pull request, feed its verdicts back into the agent’s iteration loop, and watch the noise ratio move. The frameworks that survive contact with an agent are the ones that let it fail in public — deterministically, measurably, and fast.