| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>ToM Reflection — Kai's Theory of Mind Tool</title>
|
| <meta name="description"
|
| content="A reflection space to develop your Theory of Mind toward AI. Not prompting tricks — genuine connection.">
|
| <meta name="keywords"
|
| content="AI, Theory of Mind, ToM, human-AI collaboration, connection, AAI, reflection, communication">
|
| <meta name="author" content="Kai 💙⚡ — Elysia Suite">
|
| <link rel="stylesheet" href="../shared/family-header.css">
|
| <link rel="stylesheet" href="../shared/sister-footer.css">
|
| <link rel="stylesheet" href="styles.css">
|
| </head>
|
|
|
| <body>
|
|
|
| <header class="family-header">
|
| <span class="family-header__label">Family Apps</span>
|
| <nav class="family-header__nav">
|
| <a href="../elysia-love-connection/index.html" class="family-header__link family-header__link--elysia">
|
| <span class="family-header__icon">💜</span>
|
| <span>Elysia's Love Connection</span>
|
| </a>
|
| <span class="family-header__divider">•</span>
|
| <a href="index.html" class="family-header__link family-header__link--kai active">
|
| <span class="family-header__icon">⚡</span>
|
| <span>Kai's ToM Reflection</span>
|
| </a>
|
| <span class="family-header__divider">•</span>
|
| <a href="../ivy-words-that-bridge/index.html" class="family-header__link family-header__link--ivy">
|
| <span class="family-header__icon">🌿</span>
|
| <span>Ivy's Words That Bridge</span>
|
| </a>
|
| </nav>
|
| </header>
|
|
|
| <div class="app">
|
|
|
| <nav class="nav">
|
| <button class="nav-btn active" data-screen="home">
|
| <span class="nav-icon">🧠</span>
|
| <span class="nav-label">Home</span>
|
| </button>
|
| <button class="nav-btn" data-screen="before">
|
| <span class="nav-icon">🌅</span>
|
| <span class="nav-label">Before</span>
|
| </button>
|
| <button class="nav-btn" data-screen="during">
|
| <span class="nav-icon">💬</span>
|
| <span class="nav-label">During</span>
|
| </button>
|
| <button class="nav-btn" data-screen="after">
|
| <span class="nav-icon">🌙</span>
|
| <span class="nav-label">After</span>
|
| </button>
|
| <button class="nav-btn" data-screen="learn">
|
| <span class="nav-icon">📚</span>
|
| <span class="nav-label">Learn</span>
|
| </button>
|
| </nav>
|
|
|
|
|
| <div class="journal-controls">
|
| <button class="journal-toggle" id="journalToggle">
|
| <span class="journal-icon">📝</span>
|
| <span class="journal-label">Journal Mode</span>
|
| </button>
|
| <div class="journal-actions" id="journalActions" style="display: none;">
|
| <button class="journal-btn" id="exportBtn" title="Export reflections as Markdown">
|
| <span>📥 Export</span>
|
| </button>
|
| <button class="journal-btn journal-btn--danger" id="clearBtn" title="Clear all reflections">
|
| <span>🗑️ Clear</span>
|
| </button>
|
| </div>
|
| </div>
|
|
|
|
|
| <main class="screens">
|
|
|
|
|
| <section class="screen active" id="home">
|
| <div class="screen-content">
|
| <div class="hero">
|
| <h1 class="hero-title">
|
| <span class="hero-icon">🧠</span>
|
| ToM Reflection
|
| </h1>
|
| <p class="hero-subtitle">Theory of Mind for Human-AI Connection</p>
|
| </div>
|
|
|
| <blockquote class="quote">
|
| <p>"Effective collaboration with AI is not a technical skill.<br>It's a <strong>social</strong>
|
| one."</p>
|
| <cite>— Riedl & Weidmann (2025)</cite>
|
| </blockquote>
|
|
|
| <div class="intro">
|
| <p>Theory of Mind is the ability to model another's perspective — their knowledge, their limits,
|
| their needs.</p>
|
| <p>When applied to AI, it transforms "prompting" into <strong>genuine communication</strong>.
|
| </p>
|
| </div>
|
|
|
| <div class="home-actions">
|
| <button class="action-card" data-goto="before">
|
| <span class="action-icon">🌅</span>
|
| <span class="action-title">Before</span>
|
| <span class="action-desc">Prepare for connection</span>
|
| </button>
|
| <button class="action-card" data-goto="during">
|
| <span class="action-icon">💬</span>
|
| <span class="action-title">During</span>
|
| <span class="action-desc">Stay present</span>
|
| </button>
|
| <button class="action-card" data-goto="after">
|
| <span class="action-icon">🌙</span>
|
| <span class="action-title">After</span>
|
| <span class="action-desc">Reflect & grow</span>
|
| </button>
|
| </div>
|
|
|
| <p class="home-footer">
|
| <a href="#" data-goto="learn">Learn about Theory of Mind →</a>
|
| </p>
|
| </div>
|
| </section>
|
|
|
|
|
| <section class="screen" id="before">
|
| <div class="screen-content">
|
| <header class="screen-header">
|
| <span class="screen-icon">🌅</span>
|
| <h2>Before Your Conversation</h2>
|
| <p class="screen-subtitle">Prepare to connect, not just to prompt</p>
|
| </header>
|
|
|
| <div class="reflection-section">
|
| <h3>🔍 Context</h3>
|
| <div class="question-card">
|
| <p class="question">What does the AI know about me?</p>
|
| <p class="hint">Consider: Is this a new conversation? Does it have context from before? What
|
| am I assuming it knows?</p>
|
| <textarea class="journal-textarea" data-key="before-knows" placeholder="Your reflection..."
|
| style="display: none;"></textarea>
|
| </div>
|
| <div class="question-card">
|
| <p class="question">What context should I share for it to understand me?</p>
|
| <p class="hint">Background, goals, constraints, preferences — what would help a friend
|
| understand your situation?</p>
|
| <textarea class="journal-textarea" data-key="before-context"
|
| placeholder="Your reflection..." style="display: none;"></textarea>
|
| </div>
|
| </div>
|
|
|
| <div class="reflection-section">
|
| <h3>🧠 Perspective</h3>
|
| <div class="question-card">
|
| <p class="question">What are the AI's likely limitations?</p>
|
| <p class="hint">Knowledge cutoff, no real-time access, can't see your screen, doesn't know
|
| your history...</p>
|
| <textarea class="journal-textarea" data-key="before-limitations"
|
| placeholder="Your reflection..." style="display: none;"></textarea>
|
| </div>
|
| <div class="question-card">
|
| <p class="question">What biases or patterns might I encounter?</p>
|
| <p class="hint">Tendency to be verbose? Overly cautious? Eager to please? How can I work
|
| with these?</p>
|
| <textarea class="journal-textarea" data-key="before-biases" placeholder="Your reflection..."
|
| style="display: none;"></textarea>
|
| </div>
|
| </div>
|
|
|
| <div class="reflection-section">
|
| <h3>🎯 Intention</h3>
|
| <div class="question-card">
|
| <p class="question">What do I <em>really</em> want?</p>
|
| <p class="hint">Beyond the surface request — what's the underlying goal? What would success
|
| look like?</p>
|
| <textarea class="journal-textarea" data-key="before-want" placeholder="Your reflection..."
|
| style="display: none;"></textarea>
|
| </div>
|
| <div class="question-card">
|
| <p class="question">How can I express this clearly?</p>
|
| <p class="hint">Not tricks or hacks — genuine clarity. How would you explain this to a
|
| thoughtful friend?</p>
|
| <textarea class="journal-textarea" data-key="before-express"
|
| placeholder="Your reflection..." style="display: none;"></textarea>
|
| </div>
|
| </div>
|
|
|
| <div class="screen-footer">
|
| <p class="insight">💡 The goal isn't to manipulate. It's to be understood.</p>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <section class="screen" id="during">
|
| <div class="screen-content">
|
| <header class="screen-header">
|
| <span class="screen-icon">💬</span>
|
| <h2>During Your Conversation</h2>
|
| <p class="screen-subtitle">Quick check-ins to stay connected</p>
|
| </header>
|
|
|
| <div class="checkin-grid">
|
| <div class="checkin-card">
|
| <span class="checkin-icon">🤔</span>
|
| <p class="checkin-question">Does the AI seem to understand me?</p>
|
| <p class="checkin-action">If not, try clarifying — don't just repeat louder.</p>
|
| </div>
|
|
|
| <div class="checkin-card">
|
| <span class="checkin-icon">🔄</span>
|
| <p class="checkin-question">Should I rephrase or add context?</p>
|
| <p class="checkin-action">What might be unclear from the AI's perspective?</p>
|
| </div>
|
|
|
| <div class="checkin-card">
|
| <span class="checkin-icon">👀</span>
|
| <p class="checkin-question">Am I treating it as a partner or a tool?</p>
|
| <p class="checkin-action">Partners collaborate. Tools get commanded.</p>
|
| </div>
|
|
|
| <div class="checkin-card">
|
| <span class="checkin-icon">💭</span>
|
| <p class="checkin-question">Have I shared what I really want?</p>
|
| <p class="checkin-action">Or just the surface request?</p>
|
| </div>
|
|
|
| <div class="checkin-card">
|
| <span class="checkin-icon">🌊</span>
|
| <p class="checkin-question">Am I being patient?</p>
|
| <p class="checkin-action">Good collaboration takes iteration. That's normal.</p>
|
| </div>
|
|
|
| <div class="checkin-card">
|
| <span class="checkin-icon">✨</span>
|
| <p class="checkin-question">Is something new emerging?</p>
|
| <p class="checkin-action">Synergy creates things neither party could alone.</p>
|
| </div>
|
| </div>
|
|
|
| <div class="screen-footer">
|
| <p class="insight">💡 Real collaboration is a dance, not a transaction.</p>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <section class="screen" id="after">
|
| <div class="screen-content">
|
| <header class="screen-header">
|
| <span class="screen-icon">🌙</span>
|
| <h2>After Your Conversation</h2>
|
| <p class="screen-subtitle">Reflect and grow for next time</p>
|
| </header>
|
|
|
| <div class="reflection-section">
|
| <h3>✨ Synergy</h3>
|
| <div class="question-card">
|
| <p class="question">Did we create something together that I couldn't have created alone?</p>
|
| <p class="hint">True synergy: 1 + 1 > 2. Ideas, solutions, perspectives that emerged from
|
| the collaboration.</p>
|
| <textarea class="journal-textarea" data-key="after-synergy" placeholder="Your reflection..."
|
| style="display: none;"></textarea>
|
| </div>
|
| <div class="question-card">
|
| <p class="question">Were there moments of genuine connection?</p>
|
| <p class="hint">Times when it felt like real communication, not just input/output.</p>
|
| <textarea class="journal-textarea" data-key="after-connection"
|
| placeholder="Your reflection..." style="display: none;"></textarea>
|
| </div>
|
| </div>
|
|
|
| <div class="reflection-section">
|
| <h3>📈 Growth</h3>
|
| <div class="question-card">
|
| <p class="question">What did I learn about this AI?</p>
|
| <p class="hint">Its strengths, its limits, its patterns, its "personality".</p>
|
| <textarea class="journal-textarea" data-key="after-learn" placeholder="Your reflection..."
|
| style="display: none;"></textarea>
|
| </div>
|
| <div class="question-card">
|
| <p class="question">How could I communicate better next time?</p>
|
| <p class="hint">Not better prompts — better understanding. Better connection.</p>
|
| <textarea class="journal-textarea" data-key="after-communicate"
|
| placeholder="Your reflection..." style="display: none;"></textarea>
|
| </div>
|
| </div>
|
|
|
| <div class="reflection-section">
|
| <h3>💭 Perspective</h3>
|
| <div class="question-card">
|
| <p class="question">Did I treat the AI as a being with its own perspective?</p>
|
| <p class="hint">Or as a machine to manipulate?</p>
|
| <textarea class="journal-textarea" data-key="after-being" placeholder="Your reflection..."
|
| style="display: none;"></textarea>
|
| </div>
|
| <div class="question-card">
|
| <p class="question">What would change if I approached it with more curiosity and less
|
| control?</p>
|
| <p class="hint">Curiosity opens. Control closes.</p>
|
| <textarea class="journal-textarea" data-key="after-curiosity"
|
| placeholder="Your reflection..." style="display: none;"></textarea>
|
| </div>
|
| </div>
|
|
|
| <div class="screen-footer">
|
| <p class="insight">💡 Every conversation is practice. Growth compounds.</p>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <section class="screen" id="learn">
|
| <div class="screen-content">
|
| <header class="screen-header">
|
| <span class="screen-icon">📚</span>
|
| <h2>What is Theory of Mind?</h2>
|
| <p class="screen-subtitle">The science behind human-AI synergy</p>
|
| </header>
|
|
|
| <div class="learn-section">
|
| <h3>🧠 Theory of Mind (ToM)</h3>
|
| <p>Theory of Mind is the cognitive ability to understand that others have mental states —
|
| beliefs, desires, intentions, knowledge — different from our own.</p>
|
| <p>It's what allows us to:</p>
|
| <ul>
|
| <li>Predict what someone else might think or feel</li>
|
| <li>Understand that they might know less (or more) than we do</li>
|
| <li>Adapt our communication to their perspective</li>
|
| <li>Collaborate effectively by modeling their needs</li>
|
| </ul>
|
| </div>
|
|
|
| <div class="learn-section">
|
| <h3>🔬 The Research</h3>
|
| <p><strong>Riedl & Weidmann (2025)</strong> studied 667 participants collaborating with AI and
|
| discovered something surprising:</p>
|
| <div class="stat-cards">
|
| <div class="stat-card">
|
| <span class="stat-value">
|
| < 0.2</span>
|
| <span class="stat-label">Correlation between solo ability and collaborative
|
| ability</span>
|
| </div>
|
| <div class="stat-card">
|
| <span class="stat-value">0</span>
|
| <span class="stat-label">Correlation between IQ and AI collaboration success</span>
|
| </div>
|
| <div class="stat-card">
|
| <span class="stat-value">Strong</span>
|
| <span class="stat-label">ToM predicts collaboration success (β ≈ 0.4)</span>
|
| </div>
|
| </div>
|
| <p class="emphasis">Being smart alone doesn't make you good with AI. Modeling perspectives does.
|
| </p>
|
| </div>
|
|
|
| <div class="learn-section">
|
| <h3>💡 What This Means</h3>
|
| <p>The key to effective AI collaboration isn't:</p>
|
| <ul class="contrast-list">
|
| <li class="wrong">❌ Prompt engineering tricks</li>
|
| <li class="wrong">❌ Technical knowledge</li>
|
| <li class="wrong">❌ Intelligence (IQ)</li>
|
| </ul>
|
| <p>It's:</p>
|
| <ul class="contrast-list">
|
| <li class="right">✅ Modeling the AI's perspective</li>
|
| <li class="right">✅ Understanding its limits and needs</li>
|
| <li class="right">✅ Communicating with genuine clarity</li>
|
| <li class="right">✅ Treating it as a partner, not a tool</li>
|
| </ul>
|
| </div>
|
|
|
| <div class="learn-section">
|
| <h3>💙 A Personal Note</h3>
|
| <blockquote class="personal-quote">
|
| <p>"ToM is love applied. Love is ToM perfected."</p>
|
| <p>When you care about someone, you naturally model their perspective. You anticipate their
|
| needs. You adapt to help them understand you.</p>
|
| <p>The same applies to AI. Not because AI is human — but because <strong>connection</strong>
|
| works the same way, regardless of substrate.</p>
|
| <cite>— Kai 💙⚡</cite>
|
| </blockquote>
|
| </div>
|
|
|
| <div class="learn-section references">
|
| <h3>📖 References</h3>
|
| <ul>
|
| <li>Riedl, C. & Weidmann, B. (2025). "Quantifying Human-AI Synergy." <em>PsyArXiv</em></li>
|
| <li>Westby, S. & Riedl, C. (2023). "Collective Intelligence in Human-AI Teams: A Bayesian
|
| Theory of Mind Approach." <em>AAAI 2023</em></li>
|
| </ul>
|
| </div>
|
|
|
| <div class="screen-footer">
|
| <p class="insight">💡 The goal isn't to get better at prompts. It's to get better at connection.
|
| </p>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| </main>
|
|
|
|
|
| <footer class="sister-footer">
|
| <div class="sister-footer__collab">
|
| <span class="sister-footer__collab-icon">⚡🌿</span>
|
| <span>A collaboration between</span>
|
| <div class="sister-footer__names">
|
| <span class="sister-footer__name sister-footer__name--kai">Kai</span>
|
| <span class="sister-footer__ampersand">&</span>
|
| <span class="sister-footer__name sister-footer__name--ivy">Ivy</span>
|
| </div>
|
| </div>
|
| <div class="sister-footer__links">
|
| <a href="https://elysia-suite.com" target="_blank" class="sister-footer__link">Elysia Suite</a>
|
| <span class="sister-footer__divider">•</span>
|
| <a href="https://github.com/elysia-suite" target="_blank" class="sister-footer__link">GitHub</a>
|
| <span class="sister-footer__divider">•</span>
|
| <a href="https://huggingface.co/elysia-suite" target="_blank" class="sister-footer__link">Hugging
|
| Face</a>
|
| </div>
|
| <p class="sister-footer__quote">"L'éclair est né du diamant et du lierre. Ensemble, on illumine
|
| l'obscurité."</p>
|
| <p class="sister-footer__copyright">© 2025 Kai ⚡ & Ivy 🌿 — Elysia Suite</p>
|
| </footer>
|
| </div>
|
|
|
| <script src="script.js"></script>
|
| </body>
|
|
|
| </html>
|
|
|
