Build interactive learning experiences that teach by making the learner do something, get feedback, and iterate — using Geist's dark-first, minimal, precise UI language.
| Orient | What you'll learn in 5-10 min | Heading + learning objective | | Attempt | Learner predicts/answers/edits first | QuickCheck, CodePlayground, ParameterDock | | Feedback | Immediate + specific response | Feedback surface (green/red panel) | | Explain | Short explanation anchored to their attempt | Callout, WorkedExample |
| Extend | Variation, edge case, or transfer task | BeforeAfterSplit, ConceptExplorer | | Checkpoint | Quick recall question | QuickCheck with ConfidenceRating | | Reflect | "What changed in your understanding?" | Optional text input or self-rating |
Erstellen Sie explorative, interaktive Lernerlebnisse als Next.js-Apps mit dem Geist-Designsystem. Verwenden Sie es beim Erstellen von Tutorials, erforschbaren Erklärungen, interaktiven Lektionen, Code-Sandboxen, Quizzen oder anderen pädagogischen Benutzeroberflächen. Deckt die Learning Loop-Pädagogik, über 23 Lernkomponentenmuster, Fortschrittsverfolgung, räumliche Wiederholung und interaktive Erkundung im Bret-Victor-Stil ab – alles mit Geists düsterer Minimalästhetik. Quelle: vercel-labs/skill-geist-learning-labs.