Yi-Yi

Building AI systems for how people learn.
Product builder · EdD × engineer · sharing tools, notes & experiments.
爱思考的伊伊子

[Yi-Yi @yiyibuilds]

I asked Claude Fable 5.2 to teach me KV Cache and RadixAttention. It built an interactive blackboard. Then I asked it to explain its teaching decisions.

Three things stood out:

→ It matched the visual representation to the structure of the knowledge: dependencies as matrices, processes as timelines, hierarchies as trees
→ It planned like an instructional designer: backward from the objective, prerequisites first, predictions before reveals
→ It admitted it committed to one design without comparing alternatives
That last one is the gap between a well-planned lesson and an adaptive tutor.

(video below 👇)

Details:

1. Knowledge structure → representation structure

Computational dependencies became matrices. Temporal processes became timelines. Hierarchical relationships became trees. Scheduling trade-offs became side-by-side comparisons.

This is more interesting than turning text into diagrams. The representation is selected to reflect how the underlying knowledge works.

2. Instructional planning is starting to emerge

The blackboard had five sections: animated diagrams, step-by-step notes, predict-before-reveal moments, and a short knowledge check at the end.

When I asked how it got there, the model described reasoning backward from the learning objective, identifying prerequisite concepts, and deciding what to leave out. This is its own account, not a trace of its process, but the choices line up with backward design, scaffolding, contrasting cases, progressive disclosure, and prediction before explanation.

Not evidence of learning effectiveness yet. A promising example of pedagogical reasoning showing up in artifact generation.

3. Visual continuity matters

It reused visual objects and color semantics across sections, so learners can follow the same concept through different representations.

The artifact wasn't a collection of diagrams. It attempted to build one coherent mental model over time.

4. What's still missing

Representation search. By its own account, the model went with one design and never generated alternatives. Can it explore and evaluate multiple visual approaches before choosing?

Adaptive pedagogy. Can it diagnose a learner's misconception and change the explanation, or the representation, in response?

5. What this means for EdTech
I've been exploring Canvas Tutors and Intelligent UI for a while, and this shifted how I think about the opportunity.

If models can increasingly handle instructional sequencing, representation selection, and interactive explanation, the role of EdTech may move from building fixed learning experiences to designing systems that generate, evaluate, and adapt them around individual learners.

The next frontier isn't just generative UI.

It's pedagogically intelligent UI, where the interface itself becomes part of the teaching strategy.

[Yi-Yi @yiyibuilds]

这是显性的思维连SFT？

人类学习和机器学习底层是一致的。行为主义强调大量重复和奖励机制，也就是刷题的“刷”这个动作； 认知主义强调知识的组织和整合方式，抄“答案”就是只重复高质量的数据。
建构主义可能之后在考试通过之后才有意义。

[StevenSiYang @stevensiyang]

高中有个同学的爸爸是高考状元，去某藤读了phd然后去另外一藤做了博后。有一天他来给我们做经验分享，说自己最主要的学习方法就是通过抄答案迅速学习内容。刷题太浪费时间，直接study the answers一方面可以做到大量刷题，另一方面到时候考试就有手感了。现在都觉得这个观点真的很神，虽然不一定适合所有课但对于尤其不需要太深究细节动脑子的科目确有奇效

[Yi-Yi @yiyibuilds]

I tried LearnHarness, an open-source AI learning tool, because I was curious to see how a harness would be implemented in education.

LearnHarness: https://t.co/tPKRrUi0wn

TLDR: I liked its live learning graph, but at times I felt tested rather than taught.

Before testing it, I used Teachable Code (https://t.co/ZsraXLE0e8) to explore the GitHub repo, then read its teaching methodology. I was curious how ideas about learning became concrete workflows, tools, and state.

The learning task I gave was to learn/build backprop from scratch. LearnHarness starts with probing questions, then generates a learning route on the fly using Mermaid. The route combines the learning content, my goal, and its assessment of my starting point. As I work through questions, the corresponding nodes are highlighted. I could see which part of the plan we were working on and why rates of change came before backpropagation.

Where I struggled was the teaching itself. I kept answering questions and receiving corrections, including on things I didn’t yet understand. At that point, I wanted explanations, illustrations, and worked examples to help me build the understanding I was being asked to demonstrate.

I’d like to reuse that working graph in an AI tutor whiteboard. When I get stuck at a node, we could work through an example together, keeping the calculations visible and tracing what changes when we change an input.

I’m building one.

[Yi-Yi @yiyibuilds]

@nicola_sosio @surlymochan Claude Code could definitely do the refactoring directly — the difference for me was being able to see and interact with everything first, so I could give much more specific feature requests.

[Yi-Yi @yiyibuilds]

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: https://t.co/CVin2xxS2u

Explore Teachable Code on GitHub : https://t.co/ZsraXLE0e8

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.

[Yi-Yi @yiyibuilds]

@surlymochan yeah, on my local machine for app, I have made some new feature request and asked Claude code to refactor and integrate. Another way to get really personalized app

[Yi-Yi @yiyibuilds]

@MihirKolakaluri I wish I had this when I was in school 😭

[Yi-Yi @yiyibuilds]

@kozin_sergej I usually provide the local repo path to it and let it read everything. It will show the entire folder setup. I found it helpful to get to know the overall structure

[Yi-Yi @yiyibuilds]

@bruce11110 也可以是研究的下一步😜

[Yi-Yi @yiyibuilds]

Good point. I will add interaction mode but you can also include your background and questions in the initial prompt. I share my prior knowledge and experiences with both ChatGPT and Claude and ask them to suggest papers and learning path, and then let this skill run through everything

[Yi-Yi @yiyibuilds]

@EddieOakwood thanks a lot for sharing Eddie

[Yi-Yi @yiyibuilds]

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) : https://t.co/fu60t5MfnJ

- 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: https://t.co/tz8BkBfJSP
Repo: https://t.co/fu60t5MfnJ

And a small spoiler: I'm building another one to open up the black box of large language models. Stay tuned.

[Yi-Yi @yiyibuilds]

I open-sourced Teachable Figures, a skill for AI agents to create beautiful, interactive 2D and 3D lessons.

Try it here: https://t.co/buWfY8QG0J

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: https://t.co/vR0XUUyv0a
Code and installation: https://t.co/buWfY8QG0J

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!

[Yi-Yi @yiyibuilds]

@haolv511482 of course, plz go ahead

[Yi-Yi @yiyibuilds]

I open-sourced Teachable Figures, a skill for AI agents to create beautiful, interactive 2D and 3D lessons.

Try it here: https://t.co/buWfY8QG0J

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: https://t.co/vR0XUUyv0a
Code and installation: https://t.co/buWfY8QG0J

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!

[Yi-Yi @yiyibuilds]

@Simplyrapp Great point! I’ve been exploring how to construct and verify understanding and sensemaking. I believe that probing learner’s mental model and generate contextual zines knowledge representation might be great help. That’s my next step :)

[Yi-Yi @yiyibuilds]

@tfmlab Thanks for pointing it out. It is actually also exactly where I've been struggling. I will definitely include it in the next iteration. 🙏

[Yi-Yi @yiyibuilds]

Hi Jerry! Great question. I'm actually working on another skill that visualize app repo, and even llm repo. It will help the user understand the architecture, and also how data flows. If you want to modify the workflow/component, it will also generate a refactor handoff doc for coding agent.

[Yi-Yi @yiyibuilds]

@jaimaaann Absolutely. I think learning is tricky because once learned, one cannot unlearn, which means recreating the initial mental and cognitive states is challenging. Therefore if I'm able to capture my own learning problem and generalize/productize it, it can probably scale better.

[Yi-Yi @yiyibuilds]

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.
https://t.co/8NMx6qM4tr