Yi-Yi

For anyone getting started in AI and AI infrastructure, reading real code and trying to reproduce a paper can be one of the best ways to learn. Knowing where to start is the hard part. I built Teachable Code to learn how AI systems actually work. It’s an agentic skill that turns LLM architectures and complex AI-native apps into interactive 2D/3D lessons. You can zoom in, click components, inspect their code, and follow how the data changes. Give your coding agent a repository and a question, and it builds a lesson around what you want to understand. I’m building it for people like me who want to understand the “black box” systems they hope to build on. I wanted to connect the code, the logic, the visual structure and the data transformations in one place. The whole system stays on screen as you move through a lesson. Active components light up while the surrounding components remain visible, so you can see both the current operation and its place in the larger system. From there, you can: • Zoom into a component and inspect its source files. • Explore the folder structure and see which components use each file. • Compare an operation’s inputs and outputs. • Watch tokens, vectors, memory and context change across steps. • Turn on “Guess first” to predict selected results before revealing them. For me, opening up the black box means being able to move between an explanation, a visual process, the data and the code behind it. Try the interactive demos: ywedai.github.io/teachable-c… Explore Teachable Code on GitHub : github.com/ywEdAi/teachable-… If you find it useful, please star the repo. Leave a comment with what you want to explore next or what would make the lessons more helpful.

A few days ago I shared the first version of Teachable Figures, and I honestly didn't expect this many people to react. Here's an update on what I built since, and why I built it this way. Updated version here （15+ full lesson plans with interaction mode and learning history builder) : github.com/ywEdAi/teachable-… - What the X community reaction taught me The response made me realize something about AI and education. The biggest change isn't some fancy product. It's how fast we can now turn a complex idea into a version a person can actually understand. Many of us have been waiting for the perfect AI tutor that understands you and adapts to you. That will take time, and it matters. But it's about the process: AI in the loop while you learn. What people responded to here is about the result. Not AI doing the learning for you, but AI cutting the workload of making really high-quality learning materials. Other forms of AI education aren't less important. I was just surprised by how universal this problem is. - Teaching and learning are not the same thing Because this is such a visual skill, many replies asked what it means for teaching versus learning. I've been asking myself the same question. As a software engineer with a doctorate in education, here's my view: teaching and learning don't work in silos, but we do need to tell them apart. When a teacher or parent uses this, they already have the learning plan. They do the voice-over, they explain more, and they know their learners. What they need is a precise, targeted material, made fast. The skill now serves them directly: it builds an illustration or classroom exercise and leaves the scaffolding to the human. Solo learners who already know what they want to learn get the same speed. - Giving the tool a teacher's memory, not a teacher's job On the learning side, I didn't want something that just looks cool. I'm a big fan of schema theory. To me it's one of the best ways to operationalize learning science, turning pedagogy into software and user experience. New knowledge only sticks when it connects to what you already have. So I'm not asking the tool to teach; that role still belongs to humans. Instead, I gave it something like a teacher's memory. Through the conversation it collects what the learner already knows, what they want to know and how they like to learn. It keeps that in a few local files: a lesson registry, a learner profile, and a knowledge-point-level learning plan. The agent reads them every time before it builds anything. Drafting a reasonable lesson plan from that is something AI is genuinely good at. - Attention is all you need (really) When I started using the skill to build learning materials, adding exercises to the side panel was easy. The hard part was getting sensemaking. How do you make sure learners understand what they're looking at instead of just being amazed by a nice visualization? So I went back to the visualization itself and added attention: 1. At the prediction step, the figure dims everything except what the question is about, so you know where to look. 2. On request, an ordered "look here → now notice this" sequence walks through the figure one observation at a time. 3.Legends and key terms are linked to the parts of the figure: point at a word and the part lights up, and the reverse works too, so words and pictures build the same idea. - Learning artifacts shouldn't be static Last, a belief I've held for a while: an interactive learning artifact should not be static. And "static" doesn't mean "no animation". A page can be full of animation and beautiful 3D and still be static, because it never records or understands what the learner has done. I think the learner's steps should show up in the visualization and in the artifact itself. Then the artifact becomes a record of what that learner has learned, something they can always come back to. I've started prototyping this: artifacts that evolve with the learner, where every change is checked before it ships. Try it There are now 15 bilingual lessons: Moon phases and a four-stroke engine in 3D, the seasons, Bayes' base rates, information entropy, natural selection, price ceilings, the Ship of Theseus, and more. All are open source. Live: ywedai.github.io/teachable-f… Repo: github.com/ywEdAi/teachable-… And a small spoiler: I'm building another one to open up the black box of large language models. Stay tuned.

I open-sourced Teachable Figures, a skill for AI agents to create beautiful, interactive 2D and 3D lessons. Try it here: github.com/ywEdAi/teachable-… It started with something I wanted for my own learning. I was studying AI model architectures and AI infrastructure. While reading about systems like SGLang, I kept wanting to see what was happening. Where does the data go? How do the components work together? What changes when I adjust one part of the system? My first version was a skill to help me understand SGLang through visual, interactive explanations. Then I discovered Anatomy and iso-figure. Their work on mechanical structures, cutaways, exploded views, and functional isometric objects gave me ideas for how much further this could go. I combined their rendering approaches with my teaching workflow. That became Teachable Figures. One question kept coming up as I built it: What kind of representation would help someone understand this particular idea? - For a Transformer, I want to follow the data through the computation and see how a causal mask changes attention weights. - For anatomy, I want to rotate a structure, look inside it, and understand where things sit relative to one another. - For a mechanical assembly, I want to separate the components and inspect their connections. - For historical clothing, I want to understand the overlapping panels, construction, and folds. Each asks for a different way of showing things. I also ran into this during iteration. A rotating model still needs a recognizable shape. A garment needs folds that communicate its construction. Choosing the right renderer and source material became part of the teaching workflow. Learning science helped me think through those choices. - Dual coding encouraged me to connect verbal and visual explanations. - Spatial and temporal contiguity shaped where explanations appear and how they stay synchronized with changes. - Cognitive load shaped what to reveal first and what to leave for later. The interaction follows a simple learning sequence: Predict → try → observe → explain → apply it to a new situation. Does adding another gear always make the output slower? If a cone’s cross-sectional radius doubles, what happens to its area? Does a rocket lift off whenever its engine produces thrust? I want learners to make a prediction, change something, and have a result they can reason about. The current demos explore Transformer attention, chest anatomy, rocket structure and flight, cone cross-sections, a Ming-dynasty robe, and gear ratios. They support Chinese and English and can run offline. My hope is to make this a tool I can reach for whenever I encounter something I want to understand, and let an AI agent help me build a small, beautiful lesson around it. The video shows a few examples. Try the demos: ywedai.github.io/teachable-f… Code and installation: github.com/ywEdAi/teachable-… Thanks to the creators of Anatomy and iso-figure for the work this builds on. If you try it, I’d love to hear what you’re learning and where the explanation falls short. Stars and contributions are welcome!

I’ve been building a little app called NotePico 📷 Take a photo of something around you, stick a word on it in a language you’re learning, and use that photo to review later. How it works: Take a photo → add a word you want to learn → listen to it → come back and review. That plant on your desk becomes a Japanese note. Your breakfast becomes a Korean one. A small way to bring language learning into an ordinary day. NotePico is ready for Android testing, and I’d love a few people to try it 🌱 Use it on something around you. Tell me what feels useful, confusing, or awkward. Reply or DM to join; send your Google Play email privately. notepico.space

Every AI tutor demo shows you the chat. Nobody shows you what the tutor is thinking. I built a visualization of what I think should be happening behind every reply: a working graph that grows as the conversation goes, and lights up one path of inference per turn. Content. The student's mind. Pedagogy. Representations. Tools. Five layers. One question: "why is summer hotter?" Watch the graph decide when to call a tool, and when to stay quiet and just ask. This isn't a product. It's a spec for one. If you're building tutors, this is the part that's missing.

An always-available partner solves an important availability problem. I think the next question is: what does the learner have a reason to speak about? I've been exploring two kinds of referential anchors: photos from a learner’s own life, and screenshots captured at any moment in a YouTube video. In the latter case, users don’t stop at image embedding or retrieval. They can use the screenshot together with its local transcript context to generate a small interactive learning artifact. For me, language learning and knowledge learning are inseparable. The goal is not simply to make learners chat more, but to make a meaningful moment something they can inspect, manipulate, connect, and revisit. Then speaking is grounded in an evolving understanding of something. Curious how you think about preserving that kind of learner-owned context across conversations.

his is interesting for learning systems too. A tutor shouldn’t only retrieve support for its explanation; it should surface the strongest counterexample or competing mechanism, then ask the learner to adjudicate. That turns retrieval from answer production into an activity of evidence evaluation.