Add personal work twin case study

Author: ahnchen1983

assets/diagrams/my-work-twin.svg

@@ -24,10 +24,11 @@ <h1>AI 生成靈魂融入日常：把自己的方法交給協作</h1>
       <h2>從知道，到做到</h2>
       <div class="run">
         <div class="time">0-5</div><div>安全紅線儀式 + Day 1-2 回顧</div>
-        <div class="time">5-35</div><div>七問 Skill 萃取框架工作坊</div>
-        <div class="time">35-80</div><div>現場跑卡儀式：v1 -> v2 -> Automation</div>
-        <div class="time">80-105</div><div>90 天落地計畫設計工作坊</div>
-        <div class="time">105-120</div><div>結業儀式 + 社群銜接</div>
+        <div class="time">5-25</div><div>案例轉譯：從同事.skill 到自己的工作型數位分身</div>
+        <div class="time">25-55</div><div>七問 Skill 萃取框架工作坊</div>
+        <div class="time">55-90</div><div>現場跑卡儀式：v1 -> v2 -> Automation</div>
+        <div class="time">90-110</div><div>90 天落地計畫設計工作坊</div>
+        <div class="time">110-120</div><div>結業儀式 + 社群銜接</div>
       </div>
     </div>
   </section>
@@ -45,6 +46,38 @@ <h2>七問框架：把工作方法變成 AI Skill</h2>
     </div>
   </section>
 
+  <section class="slide">
+    <div class="inner">
+      <div class="kicker">Case Study</div>
+      <h2>從同事.skill 到自己的工作型數位分身</h2>
+      <div class="grid two">
+        <div class="panel green">
+          <h3>為什麼它會爆紅？</h3>
+          <p>同事.skill 讓大家第一次直覺感覺到：一個人的工作方式，可以從聊天、文件、PR、Email 等材料中被萃取，封裝成可被 AI 調用的 Skill。</p>
+          <div class="note">課堂轉譯：我們不蒸餾別人，我們蒸餾自己。</div>
+        </div>
+        <div class="panel blue">
+          <h3>今天要學的不是複製人</h3>
+          <ul class="clean-list">
+            <li>提取我的工作邊界與常用流程</li>
+            <li>說清楚我的品質標準與判斷習慣</li>
+            <li>讓 AI 先幫我起草、檢查、提醒、延伸</li>
+            <li>所有重要輸出仍由本人覆核</li>
+          </ul>
+        </div>
+      </div>
+      <div class="meta"><a class="pill" href="https://github.com/titanwings/colleague-skill">參考案例：dot-skill / colleague-skill</a><a class="pill" href="https://titanwings.github.io/colleague-skill-site/">官方展示頁</a></div>
+    </div>
+  </section>
+
+  <section class="slide">
+    <div class="inner">
+      <div class="kicker">Visual Model</div>
+      <h2>我的工作型數位分身怎麼形成？</h2>
+      <img class="diagram" src="assets/diagrams/my-work-twin.svg" alt="自己的工作型數位分身：我的材料、七問萃取、Work Skill 加 Persona、工作協作與迭代修正">
+    </div>
+  </section>
+
   <section class="slide">
     <div class="inner">
       <div class="kicker">Skill Card Builder</div>
@@ -116,7 +149,7 @@ <h2>結業不是再見，而是開始</h2>
     </div>
   </section>
 </main>
-<div class="counter" id="counter">1 / 8</div>
+<div class="counter" id="counter">1 / 10</div>
 <div class="dots" id="dots"></div>
 <div class="nav"><a href="course.html">H</a><button id="prev">‹</button><button id="next">›</button></div>
 <script src="assets/course-pages.js"></script>

course-day3.html

@@ -421,6 +421,15 @@
     font-size: 15px;
     line-height: 1.7;
   }
+  .diagram {
+    width: 100%;
+    max-height: 68vh;
+    object-fit: contain;
+    display: block;
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    background: #fff;
+  }
   @media (max-width: 850px) {
     body { overflow: auto; }
     .deck { height: auto; min-height: 100vh; }
@@ -640,6 +649,38 @@ <h3>Skill 的七個欄位</h3>
     </div>
   </section>
 
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="kicker">Case Study</div>
+      <h2>從同事.skill 到自己的工作型數位分身</h2>
+      <div class="grid two">
+        <div class="panel accent-green">
+          <h3>案例怎麼轉譯？</h3>
+          <p>dot-skill 的爆點，是把聊天、文件、PR、Email 等工作痕跡，萃取成可被 AI 調用的 Skill。課堂裡我們把角度改成自己：不是蒸餾別人，而是封裝自己的工作方法。</p>
+          <div class="note">數位分身負責協作，不負責替你承擔責任。</div>
+        </div>
+        <div class="panel">
+          <h3>自己的分身要學什麼？</h3>
+          <ul class="clean-list">
+            <li>我會做哪些工作，邊界在哪裡</li>
+            <li>我怎麼判斷優先順序與風險</li>
+            <li>我習慣輸出什麼格式與語氣</li>
+            <li>我會如何檢查品質並修正版本</li>
+          </ul>
+        </div>
+      </div>
+      <div class="meta"><a class="pill" href="https://github.com/titanwings/colleague-skill">參考案例：dot-skill</a><a class="pill" href="course-day3.html">Day 3 詳細互動頁</a></div>
+    </div>
+  </section>
+
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="kicker">Visual Model</div>
+      <h2>我的工作型數位分身怎麼形成？</h2>
+      <img class="diagram" src="assets/diagrams/my-work-twin.svg" alt="自己的工作型數位分身形成流程圖">
+    </div>
+  </section>
+
   <section class="slide">
     <div class="slide-inner">
       <div class="kicker">Interactive Worksheet</div>