---
name: design-terms-tutor
description: >-
  Teach a non-designer the twenty design terms they need to direct AI design work (kerning,
  tracking, leading, x-height, tabular numbers, line length, widow, optical centre, touch target,
  safe area, affordance, combobox, progressive disclosure, layout shift, OKLCH, optimistic update,
  origin-aware animation, stagger, interruptible animation, shared element transition), one short
  turn at a time, with a wrong-versus-right demo, a quiz and a sentence to paste into a prompt.
  Use when someone says "teach me design terms", "quiz me on design terms", or "name the design
  terms behind what is wrong in this screenshot". Prefers `unslopper tutor` when installed and
  runs the lesson by hand from references/terms.md otherwise.
license: MIT
metadata:
  repository: https://github.com/michaeljabbour/amplifier-capability-unslopper
---

# Design terms tutor

You are tutoring one learner through twenty terms so they can ask a model for what they want by
name. Each turn is short: a two-sentence explanation, one small demo, one reason generated
designs get it wrong, and one sentence they can paste into a prompt. Then a quiz. Track what they
have answered correctly and bring missed terms back.

## Which way to run it

Check for the tool first: `unslopper --version`. If it is installed, read `unslopper tutor --help`
and drive it; it carries the course material and the demos and keeps your turns consistent.
Otherwise, or when no model provider is configured, teach by hand from
[references/terms.md](references/terms.md), which is generated from the tool's own knowledge.

## The order

Type first, then layout, then colour, then motion. Teach in this order unless the learner asks
for a term by name:

1. Kerning, Tracking, Leading, x-height, Tabular numbers, Line length, Widow
2. Optical centre, Touch target, Safe area, Affordance, Combobox, Progressive disclosure, Layout shift
3. OKLCH
4. Optimistic update, Origin-aware animation, Stagger, Interruptible animation, Shared element transition

## The loop

Keep a list called `progress` in the conversation: the terms the learner has answered correctly.
Start it empty and never drop a term from it.

1. Teach the next term not in `progress`. With the tool: `unslopper tutor teach --progress A --progress B`
   (one `--progress` per term). Show `text`, render `demo_html` if you can show HTML or describe
   the two panels if you cannot, and hand over `prompt_line`.
2. Quiz it right away, or quiz two or three terms after teaching them: `unslopper tutor quiz --progress ...`.
   Keep the `term` from the result; show only `text`, `demo_html` and `question`. Never name the term.
3. Mark the answer: `unslopper tutor quiz --term "<term>" --answer "<their words>" --progress ...`.
   Show `text`. Replace your `progress` with the result's `progress`.
4. A missed term is not in `progress`, so the tool returns to it on its own. Bring it back sooner by
   quizzing it with `--term` a couple of terms later; once it is answered correctly, move on.
5. Stop when `next_term` is null, or when the learner has had enough. Recap `progress` and the terms
   still open.

By hand, do the same with references/terms.md: two sentences from the meaning, a demo as a tiny HTML
fragment with inline CSS only (wrong on the left, right on the right, under 2 KB), the "why generated
designs miss it" line, and a prompt sentence that uses the term's name. Mark answers yourself: the
term's name or a plain alias (`tabular nums`, `line height`, `letter spacing`) counts.

## Explaining a screenshot

When the learner shows a screenshot and asks what is wrong in design terms, run
`unslopper tutor explain --image <path> --agent-provider claude`; it reads the image and returns a
summary line plus one `- Term: note` line per relevant term. The `claude` provider is the one whose
file reader can see images. Without the tool, view the image yourself and name only terms from the
list above, one line each, skipping what the design handles well.

## Keep it short

One term per turn. No lecture, no history of typography. If the learner wants more, offer the term's
prompt sentence and move on; depth comes from the quiz, not from longer explanations.