bob798 Knowledge Dynamization Engine
知识动态化引擎 — 把抽象知识转化为可交互的具身体验。
核心理念：不是画图表，而是让知识"动起来"。
Philosophy: Three-Layer Progression
Every knowledge presentation has three layers. You can stop at any layer:
| Layer | Form | How audience learns | Example |
|---|---|---|---|
| 1. Static text | Docs / PPT | Read → Understand → Imagine | "GPU has thousands of cores for parallel computing" |
| 2. Static visuals | Tables / Charts | See numbers → Compare → Judge | 4090 vs A100 spec table |
| 3. Dynamic interaction | Animation / Interactive | Directly feel → Build intuition | Watch 8 cores vs 64 cores race — you get it without thinking |
The key difference: static knowledge requires the reader to "simulate" in their head. Dynamic visualization externalizes that simulation.
9 Knowledge Presentation Components
Each component maps to a cognitive pattern:
| Component | Knowledge Pattern | Best For |
|---|---|---|
| VizRace | Speed / efficiency gap | "How much faster is A than B" |
| VizCapacity | Capacity / constraint limits | "Can it fit / is it enough" |
| VizConveyor | Throughput / flow rate | "How fast does data flow" |
| VizPipeFlow | Channel / connection | "How do two things communicate" |
| VizDecisionTree | Conditional / choice | "Which should I pick" |
| VizCompareTable | Multi-dimensional comparison | "Who wins on each dimension" |
| VizCards | Concept introduction | "What are these things" |
| VizFadeIn | Attention guidance | "Look at this first, then that" |
| VizNav | Knowledge structure | "What sections exist" |
Step 1: Knowledge Deconstruction (Cognitive Analysis)
Given a topic, answer three questions internally (do NOT output to user):
- What are the core concepts? — Break into 3–7 key knowledge points
- Where is the cognitive bottleneck? — Which point is hardest to grasp? (abstract, counterintuitive, requires comparison)
- Who is the audience? — Technical people get precise data; non-technical get analogies
Step 2: Component Selection (Pattern Matching)
Match each knowledge point's cognitive bottleneck to the right component:
- Bottleneck is "how much difference" → VizRace or VizConveyor
- Bottleneck is "can it fit / is it enough" → VizCapacity
- Bottleneck is "which to choose" → VizDecisionTree
- Bottleneck is "multi-dimension comparison" → VizCompareTable
- Bottleneck is "what is this" → VizCards
- Bottleneck is "how things connect" → VizPipeFlow
Use at least 3 different components per page, forming a narrative arc:
Introduction (VizCards) → Dynamic Experience (Race/Capacity/Conveyor) → Decision Summary (Tree/Table)
"what is it" "feel the difference" "what to choose"
Step 3: Generate the Page
Technical Stack
- Zero dependencies — pure HTML + CSS + JS
- Dark theme — professional, eye-friendly
- Single file — inline all CSS and JS for easy sharing
- Responsive — works on mobile and desktop
- Chinese-first — all text in Chinese, technical terms keep English
Component Implementation Reference
See references/viz-components.md for the complete CSS class reference and JS API for all 9 components.
Page Structure
<body class="viz-body">
<nav class="viz-nav" id="nav"></nav>
<section class="viz-section" id="intro">
<h1 class="viz-h1">Topic <span>Highlight</span></h1>
<p class="viz-subtitle">One-line description</p>
<!-- VizCards: introduce core concepts -->
</section>
<section class="viz-section" id="demo1">
<h2 class="viz-h2">Section Title</h2>
<p class="viz-desc">Everyday analogy for this concept</p>
<!-- VizRace / VizCapacity / VizConveyor -->
</section>
<!-- ... more sections ... -->
<section class="viz-section" id="summary">
<!-- VizDecisionTree + VizCompareTable -->
</section>
</body>
Initialization Pattern
// Each component: new VizXxx('#container', { config })
new VizNav('#nav', { links: [...] });
new VizRace('#race', { totalTasks: 256, lanes: [...] });
new VizCapacity('#cap', { containers: [...], items: [...] });
new VizConveyor('#conv', { lanes: [...] });
new VizPipeFlow('#pipe', { pairs: [...] });
new VizDecisionTree('#tree', { root: { question: '...', branches: [...] } });
new VizCompareTable('#table', { headers: [...], rows: [...] });
new VizCards('#cards', { cards: [...] });
VizFramework.autoInit(); // Nav scroll spy + FadeIn
Step 4: Output Summary
After generating the page, tell the user:
- What interactions the page contains (bullet list)
- The core conclusion in one sentence
- File path for sharing
Rules
- Always inline CSS/JS — single HTML file, no external dependencies
- All text in Chinese — keep English for technical terms only
- Verify data accuracy — search/research if uncertain
- Analogy first — every abstract concept gets a real-life metaphor
- No component bloat — each component must solve a specific cognitive bottleneck
- File naming:
{topic}-viz.htmlin the user's current working directory - Open in browser after generation using
opencommand
Examples
User: Explain GPU basics to a beginner
→ gpu-viz.html: CPU vs GPU race, VRAM capacity buckets, bandwidth conveyor, NVLink pipe, GPU selection decision tree
User: Microservices vs Monolith for tech team
→ microservices-viz.html: deployment complexity table, request chain pipe animation, scaling capacity demo, architecture decision tree
User: How RAG works
→ rag-viz.html: retrieval pipeline conveyor, vector similarity race, context window capacity, tech stack decision tree
User: Compare cloud providers
→ cloud-viz.html: pricing comparison table, performance race, storage capacity demo, selection decision tree