Lesson 5 of 5 · 50 min

Capstone: an AI-suggestion pattern across 3 surfaces

The canonical AI-design exercise: design one reusable AI-suggestion pattern and apply it consistently across three surfaces. The staged 8-step framework reviewers grade on, the pattern spec (states, confidence, provenance, controls), how to make it survive three surfaces without re-inventing, the metrics to name, and a rehearsal of the portfolio-walkthrough probes — pulling every pattern from the track together.

Capstone

One suggestion pattern, three surfaces

Time to assemble it. “Design a reusable AI-suggestion pattern” is the canonical 2026 AI-design exercise — and the deeper test is the follow-up: apply it consistently across three surfaces. This capstone is both a portfolio piece and a live whiteboard round. Everything below is a callback: the suggestion ladder (L1), naming (L2), provenance modes (L3), and the uncertainty surface (L4) all converge here. The thing reviewers actually grade is not the prettiest chip — it is whether you have variants, confidence, provenance, and a system that survives three surfaces.

Treat the live version as a 20-minute structured exercise, not a freeform sketch. The whiteboard research is explicit that a fixed response framework is what scores: ask → define → users → context → ideate → flow → sketch → measure. The hallmark of a strong candidate is being conscious of the clock, acknowledging assumptions out loud, and aligning sketches to flows; the weak candidate freezes, lectures, or jumps straight to one polished screen. Run the framework visibly — it is half the signal.

Agentic Design Systems in 2026Brad Frost

Step 1–4: ask, define, users, context

Open by clarifying — the single best move is to ask the scoping questions before drawing anything, because it shows you know one prompt hides many systems. Then state the pattern in one sentence and map users and surfaces. Write the constraints at the top of the board and keep them visible.

01Ask — what is the use case, the latency budget, the allowed modalities, and the escalation path to a human? What is the blast radius of accepting a suggestion?
02Define — one sentence: “a suggestion that proposes an action, carries a confidence and a rationale, signals it’s AI-suggested, and is consumable by any product surface.”
03Users — at least three states, not three demographics: first-time user (needs the affordance explained), repeat user (wants it fast and unobtrusive), user who has dismissed twice (should see it back off).
04Context — the three surfaces this must live on, chosen deliberately: an empty state, a mid-flow nudge, and an inline-in-editor moment (the same trio from the suggestion ladder).

Step 5: the pattern spec — variants, confidence, provenance, control

This is the rung reviewers grade hardest, and it maps directly to the three sub-probes the research names. (1) Variant, variant, variant — produce the suggestion as a component with at least four reusable states, not one illustration: loading (skeleton + streaming), recommended (with confidence + rationale), accepted, dismissed. (2) States and confidence — expose uncertainty as a first-class property: a confidence marker, an evidence/source affordance, a “why this suggestion” explanation. (3) Visual identification of AI origin — an explicit provenance signal (the reserved sparkle + a verb label), so the user always knows this is AI-suggested, not authored or executed.

code

1THE SUGGESTION PATTERN SPEC -- one component, four states, four properties23  STATES        loading -> recommended -> accepted -> dismissed4                (skeleton +   (confidence +   (provenance   (backs off;5                 streaming)    rationale)      persists)     re-dismiss = quieter)67  PROPERTIES8    confidence  --ai-confidence-{low,medium,high}  -> color + label + placement9    provenance  reserved sparkle + verb label "Suggested"  (mode = AI-suggested)10    rationale   "why this" affordance -> explainability popover (Carbon-style)11    control     accept / dismiss (G8) + revert-to-AI after accept (G9)1213  ONE sentence that scores: "It lives at the component layer, pulls from semantic14  tokens, exposes a confidence property, and renders the reserved AI sparkle --15  so any product adopting it inherits our visual + trust language automatically."

That last sentence is, almost verbatim, what the interview rubric rewards on the “AI technical fluency” dimension: the pattern lives at the component layer, pulls from semantic tokens, exposes a confidence property, and renders a consistent AI mark, so adopters inherit the language for free. Say it out loud. Interview angle. The difference between a mid and a senior score here is whether confidence and provenance are properties of the component (inherited everywhere) or after-thoughts drawn on one screen.

Step 6–7: flow and the three-surface application

Map the flow as a bulleted sequence — intent → suggestion appears → confidence/rationale visible → accept or dismiss → action (or revert) → memory (the system learns from the dismiss, per HAX G13). Then apply the same pattern across the three surfaces, changing only what the surface demands while the spec stays fixed. This is the heart of the capstone: consistency across surfaces is the deliverable.

code

1ONE PATTERN, THREE SURFACES -- what stays fixed vs what flexes23  surface         density / trigger        fixed (the spec)        flexes4  -------------   ----------------------   ---------------------   ----------------5  Empty state     card, on first arrival   sparkle + "Suggested",  full rationale6                                           confidence, accept/      shown; richer7                                           dismiss, tokens          card format8  Mid-flow nudge  inline chip, on context  same mark, same         compact; rationale9                  shift                    confidence encoding,     behind "why";10                                           same controls            backs off if11                                                                    dismissed twice12  Inline editor   ghost text, as you type  same provenance verb,    confidence as a13                                           same accept (Tab) /      subtle underline;14                                           dismiss (Esc), tokens    streamed in place1516  The spec (states, confidence token, provenance mark, controls) is INVARIANT.17  Only density, disclosure depth, and input affordance change per surface.

Notice the discipline: the confidence token, the provenance verb, and the accept/dismiss contract are invariant across all three; only density, how much rationale is disclosed, and the input affordance (button vs chip vs Tab-key) change. That is exactly the bounded-container idea from L4 generalised to a pattern: a fixed spec with a per-surface flexible expression. If a reviewer pushes “how do you keep it consistent,” your answer is concrete — the invariants live in shared tokens and a shared component, so the three surfaces cannot drift.

Step 8: measure

Close with metrics, because “measure” is a graded step and most candidates skip it. Name three you would instrument: time-to-decision (does the suggestion speed the user up or interrupt them?), suggestion-acceptance rate (is it useful, per surface?), and override/dismiss rate after acceptance (did people accept then undo — a sign the suggestion looked good but was wrong?). Add a guardrail: dismissals should make the pattern back off (G13/G16), and you measure whether it does. Interview angle. Tie at least one metric to a business outcome — “acceptance rate per surface tells us which rung of the ladder earns its place” — which is what scores on the success-metrics dimension.

A subtle senior note for the portfolio version: treat the model’s failures as a design concern you measured, not an edge case. Show the dismissed and low-confidence and failed states explicitly, and show that you instrumented trust-calibration (did users over- or under-trust the suggestion?). Randy Hunt’s bar is that AI-assisted work must carry “unmistakable evidence of your own thinking and craft” — the states matrix, the invariants, and the metrics are that evidence.

What a strong portfolio piece shows (and what to skip)

The convergent expectation across practitioner accounts: the AI-designer portfolio is a behavior-change exhibit, not a screenshot reel. For this capstone, that means: lead with the design decision, then disclose the AI assist (Dan Mall’s framing); declare your role and authorship explicitly (reviewers spend interview time recovering context the portfolio didn’t state); and frame any AI-assisted prototyping legitimately — “I built N quick prototypes to feel out the suggestion timing,” or “craft first, assist second.” Skip a janky vibe-coded prototype that doesn’t reflect your taste, and skip AI-generated screens with no decisions shown. The piece must prove you chose the states, the confidence encoding, and the invariants.

How the room is actually scoring you

AI-design loops score a 5–7 dimension rubric in parallel, and one strong-no-hire on any axis usually fails the loop — so you must switch modes inside one 20–30 minute prompt. The dimensions recur across the practitioner rubrics: problem framing, systems thinking, AI technical fluency, user-centricity, communication, production readiness, and — the highest-variance one — directability of AI output. Map your capstone beats to the axes so you visibly hit each: scoping → problem framing; states × surfaces matrix → systems thinking; confidence/provenance as component properties → AI fluency; the three user states → user-centricity; the metrics → success metrics. Scoring tiers differ across guides (Intrico’s six levels, Karat’s four, a Developing-vs-Native binary), so don’t memorize one ladder — rehearse a calibrated, neutral-positive posture on every dimension and be declarative about weak areas.

code

1CAPSTONE BEATS -> RUBRIC DIMENSIONS (hit each on purpose)23  beat                            dimension              weak vs strong4  -----------------------------   --------------------   ----------------------5  scope before sketching          problem framing        jumps to a solution /6                                                          frames as a team ritual7  states x surfaces matrix        systems thinking        3 screens / 1 system8  confidence+provenance as props  AI technical fluency    drawn-on / inherited9  3 user states (new/repeat/      user-centricity         personas as demographics10   dismissed-twice)                                       / as behavior states11  metrics + dismiss-backs-off     success metrics         none / instrumented12  "I briefed the AI, reviewed     directability           accepts output as-is /13   at the UX level"                                       directs intent not syntax1415  Highest variance: directability. "Treats AI like a fast junior engineer --16  writes briefs, reviews at the UX level, not the syntax level."

articleThe whiteboard design challenge (the staged 8-step framework)UX Collective articleOn AI-Generated Work in Design Portfolios (what to show, what to skip)Randy J. Hunt articleAI Design System Guidelines: 6 Examples from IndustrySupernova docsAutonomy Budgets & Approval Workflows (agent-control patterns)AI UX Playground

Checkpoint

You are given “design a reusable AI-suggestion pattern” live, with 20 minutes. What is the strongest opening?

AStart sketching the most polished version of the suggestion chip immediately to show craftBAsk scoping questions (use case, latency, modalities, blast radius), then run the ask→define→users→context→ideate→flow→sketch→measure framework visiblyCList every AI pattern you know to demonstrate breadth before choosing

Checkpoint

A reviewer asks how your suggestion pattern stays consistent across the empty-state, mid-flow, and inline-editor surfaces. What is the senior answer?

AThe invariants — confidence token, provenance verb/mark, and the accept/dismiss contract — live in shared tokens and one component; only density and disclosure depth flex per surfaceBI redraw the chip carefully for each surface to match that surface’s styleCI keep it pixel-identical on all three surfaces so nothing changes

Checkpoint

On the spec, a teammate wants to add confidence and the AI badge “only on the empty-state card, to keep the inline version clean.” Why push back?

AInline surfaces don’t need provenance because the user is already typingBConfidence and provenance are properties of the component, inherited everywhere; dropping them on one surface breaks the trust contract and the consistencyCIt’s fine — keeping the inline version minimal is a reasonable trade-off

Checkpoint

You reach the “measure” step. Which set of metrics best demonstrates senior thinking for this suggestion pattern?

ATotal suggestions shown and pixels rendered, to prove coverageBOnly the acceptance rate, since that is the clearest success signalCTime-to-decision, acceptance rate per surface, and override/dismiss-after-accept — with a guardrail that dismissals make the pattern back off

Checkpoint

You are assembling the portfolio version of this capstone. What gives it the strongest read with reviewers?

AA single slick interactive demo of the suggestion, vibe-coded, leading the case studyBA states × surfaces matrix with the invariants called out, the role/authorship declared, and the “why” behind each decision, with the prototype as supporting evidenceCAs many distinct AI screens as possible to show range

Interview & portfolio prep

This capstone is the interview — so the prep is rehearsing the walkthrough. Reviewers score a 5–7 dimension rubric in parallel (problem framing, systems thinking, AI fluency, user-centricity, communication, directability); one strong-no-hire on any axis usually fails the loop. Rehearse a calibrated, neutral-positive posture on each, and be ready to defend the “why” behind every decision.

01“Design a reusable AI-suggestion pattern.” → run the 8-step framework; deliver a component with four states + confidence + provenance + controls, consumable by any surface.
02“Apply it across three surfaces.” → empty-state card / mid-flow chip / inline ghost text; invariants (tokens, provenance verb, accept-dismiss) fixed, density + disclosure flex.
03“How do you keep it consistent?” → invariants live in shared tokens + one component; per-surface only density/disclosure/input change — drift is structurally prevented.
04“Where’s the uncertainty?” → confidence as a component property at the point of suggestion, token-driven, plus a ‘why this’ explainability affordance.
05“How do you signal it’s AI?” → reserved sparkle + the verb ‘Suggested’ (mode = AI-suggested), never reused for executed/authored or classical ML.
06“What metrics?” → time-to-decision, acceptance per surface, override-after-accept; guardrail: dismissals back the pattern off (G13/G16).
07“What was your role / how much was AI?” → declare authorship; lead with the decisions, frame any AI assist as craft-first / exploration-at-speed.
08“What makes this a system, not three screens?” → the states × surfaces matrix with invariants — one pattern, applied consistently, reasoning visible.

The follow-ups that separate strong from weak: “show me where the pattern breaks” (have a surface where it’s hard — e.g. a tiny mobile inline context — and a graceful answer), “what happens when the model is uncertain on the inline surface” (confidence still renders, subtler), and the directability probe “if you used an AI tool to build the prototype, how did you keep it on-spec?” (briefs and UX-level review, not re-prompting). Acknowledge the cross-cutting tension openly — lead with the design decision, then disclose the AI assist — which the research says tends to land a strong-hire.

Could you run the 8-step exercise live, deliver a four-state suggestion component with confidence + provenance, apply it across three surfaces with explicit invariants, and defend the metrics and your authorship?

New to itGetting thereConfident

Takeaways

Run the staged framework visibly: ask → define → users → context → ideate → flow → sketch → measure; scoping first is half the signal.
Deliver the suggestion as a component with four states (loading/recommended/accepted/dismissed) + confidence + provenance + controls — not one illustration.
Apply one pattern across three surfaces (empty-state / mid-flow / inline); keep tokens, provenance verb, and accept-dismiss invariant, flex only density and disclosure.
Confidence and provenance are component properties inherited everywhere — never per-surface optional.
Name metrics: time-to-decision, acceptance per surface, override-after-accept, with a dismiss-backs-off guardrail.
Portfolio: lead with the decisions and a states × surfaces matrix (the system), disclose the AI assist after, declare your authorship — not a janky demo.

You’ve built the AI pattern language end-to-end: vocabulary, naming, provenance, consistency, and a system that survives three surfaces. Take it into your next portfolio piece.

Sources

Free to read · better with Enzo

Learn it with Enzo

Save your progress, answer the checkpoints, and let Enzo quiz you on what you just read.

Continue with Enzo Sign up free