| | <!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>
|
| |
|
