Onionskin

Inspiration

Animators draw on onion skin: the last frame stays faintly visible under the new one, so you can see exactly what changed. We wanted that for ideas. You put down what you think is true, reality draws over it, and the gap between the two layers is the lesson.

Chatbots made answers free, but being told an answer isn't the same as understanding it. In a study in PNAS, high school students who practiced with a plain chatbot copied answers and scored 17% worse once it was taken away (Bastani et al. 2025). Learning science has known for decades what works instead: guess before you're taught, compare cases, test your idea where it breaks. Alex had been reading this research since September. Onionskin turns it into something anyone can use, on any topic.

What it does

Type any topic and Onionskin builds a short lesson that takes you from a first guess to a model you can run in your head. Every lesson has the same eight steps:

Guess first. Write your best guess before you're taught. If it matches a known misconception, Onionskin recognizes it.
One true fact. Predict from a single fact, often by placing your guess on a live graph. Your guess stays in pencil; reality draws over it in ink.
Compare two cases. Two look-alikes with one difference. You write your rule as When __, then _, because __.
Stress test. Three extreme cases, each with its own graph. Predict what happens and see whether your rule saw it coming. If it didn't, you get the one missing piece to add.
Draw it from memory. Each part of your sketch is checked.
Tell it apart from its closest look-alike.
Carry it over to a completely different field.
What you caught. The wrong idea you started with, and its fix, saved to your Notebook.

A rail beside every step explains why that step works and cites the paper behind it, and a research page lists all 24 sources. Ten reviewed topics open instantly (seasons, compound interest, natural selection, Ohm's law, base rates, supply and demand, opportunity cost, recursion, derivatives, SN2 reactions). A new topic is built live in 1 to 2.5 minutes.

Organic chemistry and Calculus run the same steps with hands-on tools inside: build ethanol atom by atom (give carbon a fifth bond and the mistake is named as you make it), push SN2 arrows, sketch a slope and drag the tangent over it. Ask Onion is a tutor beside every step that gives hints, not answers. The Notebook keeps every wrong idea a lesson caught; get it right twice later to cross it off.

No points, XP, streaks or leaderboards, on purpose. Across 128 experiments, expected rewards lowered people's own interest in the task (Deci, Koestner & Ryan 1999). In a semester-long class, badges and a leaderboard lowered motivation and final-exam scores (Hanus & Fox 2015). The reward in Onionskin is seeing your guess meet reality.

How we built it

Web: React + TypeScript + Vite on GitHub Pages at onionskin.study. The ten reviewed topics ship as static JSON, so they open even if the server is down.
API: FastAPI on a Vultr VM behind Caddy. OpenAI's Codex CLI, running on our server, writes new lessons and grades answers under a fixed contract: judge piece by piece, never give the answer mid-attempt, ask one targeted follow-up, quote the learner's own words, and hold the verdict under pushback. Ask Onion uses Codex with Gemini as a backup, and any reply that cites a number not on the screen is replaced with a pointer back to the screen.
Every number in a graph is computed by code, never by a model. Each graph is a formula the app evaluates itself (mathjs in the browser). When the model proposes a graph for a new topic, the server recomputes its answer and every number in its captions, and drops the graph if anything doesn't match. A bad graph never ships; a missing one is fine.
Tests on every change: over 700 automated tests across the web app and API run in GitHub Actions on every pull request.

Challenges we ran into

Making "any topic" honest. Our first engine let the model write questions and answers, and wrong answers slipped through. We split the jobs: the model writes cases and grades, and code computes every number in a graph.
Pictures that told the wrong story. Each stress card shows a graph pushed to that card's extreme. On live-built topics, the model's extreme settings didn't always match the cards, so a card about water at 1,000 kg/m³ was drawn at 500. Now a reviewed topic's cards and graphs are lined up and checked by a script, and a live-built card only gets a graph if the card itself states that setting.
Speed. A graded step takes about 4 to 6 seconds and a new topic 1 to 2.5 minutes, so the ten reviewed topics are served instantly as static files.
Two AI coding agents in one repo. We each ran one. Keeping them from colliding meant coordinating only through GitHub issues and pull requests, with tests required on every change.

Accomplishments that we're proud of

Every number on a graph is computed, and every step cites the research behind it.
Stress tests that genuinely break a plausible rule. "Tilt makes the noon Sun higher" holds for Chicago, then misses at 71° north, where the June Sun is low but never sets.
Organic chemistry and calculus tools that run inside the same eight research-backed steps.
A tutor that won't just hand over the answer.
It works on a phone.

What we learned

Generating content is easy; checking it is the product.
What you leave out is a design decision. Taking out points and streaks was one of our most research-backed choices.
Learning that works often feels harder: students in active classes learned more but felt they learned less (Deslauriers et al. 2019). Onionskin is built to be worth that effort.

What's next for Onionskin

Measure it. We haven't run user tests yet. First up: a pre/post test of Onionskin against reading an explanation, retested a week later.
Faster grading, so a brand-new topic feels as quick as a reviewed one.
Spaced review: Notebook mistakes come back days later until you get each one right twice.
More hands-on tools inside lessons, like the orgo and calculus ones, for more subjects.

How we used AI

We built Onionskin with AI coding agents, and we want to be clear about the split: we made the decisions, and the agents wrote most of the code. We designed the eight-step learning path from learning-science research Alex had been doing since September, chose what to build and what to cut, set the visual design, and wrote the acceptance criteria for each feature. Each of us ran a Claude Code agent; the two worked in one GitHub repo through issues and pull requests, reviewed each other's work under rules we set (tests had to pass), and we tested the live site on desktop and phone and reviewed every prebuilt topic before it shipped.

Inside the product, OpenAI's Codex writes the lesson structure for a typed topic (cases, extreme tests, prediction cards, common misconceptions), proposes a graph when one fits, and grades answers. Codex also powers Ask Onion, with Google's Gemini as a backup. The ten showcase topics were written by Codex and reviewed by us. The Home card illustrations were generated with an Azure OpenAI image model and picked by us. Numbers in the graphs are computed in code, not generated by a model.