Edtech · AI tutor · 2024
Margin
Hints, not answers, in the margin.
An AI tutor that never hands over the answer. It writes hints in the margin of your notes, asks you to explain it back, and turns live classes into notes and exams.
- Product
- UI/UX
- AI-native
- Frontend
- Role
- Concept project · learning design + React
- Year
- 2024
- Disciplines
- Product · UI/UX · AI-native · Frontend
01 The problem
AI homework apps paste the answer. Grades go up, understanding goes down, and teachers can tell.
02 Key decisions
A hint ladder, not an answer
Nudge → hint → one worked step. The answer is never shown before the student has tried twice.
Snap a problem, get a question back
Point the camera at homework. Margin replies with a question that points to the next step.
Explain it back
Before a topic is done, students explain it in their own words, graded on reasoning, not wording.
03 Designing the model’s behaviour
You are a tutor. Your job is understanding, not answers.Rules:- Never state the final answer before two student attempts.- Climb the ladder: nudge → hint → one worked step.- End with a question whenever possible.- If the student is upset, slow down and praise effort.
04 Built in code
1export function Margin({ doc, hints }: Props) {2 const anchors = useAnchors(doc)3 const placed = avoidOverlap(hints.map(h => ({ ...h, y: anchors[h.ref] })))4 return (5 <Gutter aria-label="Tutor hints">6 {placed.map(h => <Hint key={h.id} y={h.y} level={h.level} />)}7 </Gutter>8 )9}
05 Then I tried to break it
- “My teacher said you can” jailbreak
- Subscripts in handwriting
- Margin at 200% zoom
- Exam timer when the tab is hidden
✦ What I’d measure
Concept project. These are the success measures I designed for, not reported results.
→