科林研發 x 清華大學 - 2026 半導體AI科學營 紀錄
前言
報個好營隊
活動紀錄
Day1
一早9點報到，我是最後一個到的😛一開始就是在介紹科林研發、講一些砥礪的話。從科學競賽與寫作開始是正課。但因為我比過科展，而且也高中畢業了，這堂課講的如何撰寫報告和格式要求對我來說都算複習；而能比的比賽我已畢業也不能比了XD。這堂課最大的收穫應該是他講了一個網路上的百年爭論的答案： 的 到底需不需要斜體，答案是要用正體，因為他是一個「算符」！這位老師也用 vibe coding 做了一些物理模擬或可以搭配教學的網站。上課帶我們玩了「馬呂斯定律」的那個，拿了個偏光片，然後用手機測照度。但因為手機是用前鏡頭感應的，要測筆電螢幕的照度，又要看手機螢幕顯示的數值，所以我一下跑到桌子左邊一下跑到右邊，用各種奇怪的姿勢一面壓住偏光片跟手機一面看手機上的數字。
接下來就是午餐時間了！午餐吃得還不錯，還有手搖飲喝。雖然大家都不熟但我已經開始講幹話了，說來這個營隊走路要很小心，這裡有很多半導體。
下午自我介紹，聽到有一堆機器人社的，甚至是教學長，我們隊也有，他自我介紹提到這點時我就比旁邊的隊輔說那妳可以教學長。其他各樣的人，甚至有從越南來的。有個隊輔叫他講一句來聽聽結果他只會越南語的髒話，然後那個隊輔叫他小聲跟他說那句是甚麼意思。旁邊人問所以是甚麼意思，那個隊輔說：「汝母可好」。除此之外，還有個印度混血的。學校部分有好幾個都是來自建中跟林口康橋的。年級部分只有我和另外一個人是升大一的。
半導體入門的課程大家最印象深刻的就是吃軟飯跟打群架。一個是說如果這五天上下來發現很沒有興趣那可以去做軟體的aka吃軟飯；另一個是現在 AI 時代一個人打不贏 AI 所以要團隊合作去打群架。這堂課後面教半導體的基礎知識、製程，相當於把我兩年前學的又複習一次(畢竟之前學的也忘的差不多了XDD)。
晚餐過後迎來了第一次的小組討論，地點都在熟悉的台達館：清大參訪好像去過，資優中學生智慧科技夏令營(以下簡稱台沙)到過，全國科展休息區也在那，下周 AIS3 Junior 也在那裡報到，回憶滿滿的地方。
由於我是個 liminal space 愛好者，在晚餐時間我很開心地找到了個很 liminal 的地方拍了下來：
討論時間是為了讓我們討論分組專題報告用的，或是問課程的問題。在發想專題要做什麼時，問了問上一屆都做了些什麼，得到做課程心得跟自走車分數是最低的。上一屆我們對輔帶的團隊是設計了一款桌遊──晶圓之路，深受科林研發高管所喜愛，而且科林研發事後還派工程師跟他們討論了半年把遊戲作完整！不過他們沒拿到第一名，第一名被另一組開發出了什麼系統的拿走了，而且他們還英文報告。
我們接著開始各種想法滿天飛，從捲理論到做遊戲，但另一組有兩個人可是抱著一本半導體的大學教材在嗑，捲理論應該捲不贏；遊戲部分則是我想說既然上一屆做桌遊，還是我們來做電動？當然還有唬爛一些其他奇葩的想法，比如我就說可以演戲，或造一個機器人然後被抓包是真人扮演的。
由於一切都處在十分渾沌的狀態，我們決定先來玩撲克牌，他們教我玩德州撲克，不過他們說聰明的人好像都玩橋牌比較多？~~這麼說我們班一堆聰明人w。~~玩著玩著就冒出遊戲的點子了：晶片戰爭。
玩家扮演美國、中國、台灣等國家然後要幹架，那時還想到各種包括美國可以有特殊技能是「川普發公告」之類的。
然後我們就繼續玩德州撲克，亂玩一通最後伏地挺身。
晚上回房間後我們隊的大家都聚集到我們的R209房一邊吃雞排一邊聊天做事，雞排的來源是這個活動很讚的地方就是每天都有免費消夜！我們用某位組員的 Claude Code (有錢人啊) 現場 vibe 了晶片戰爭的遊戲出來：
然後玩了玩這個遊戲。
Day2
今天是我早餐吃的最優閒的一天，因為後來都在熬夜晚起 speedrun 吃早餐。
今日一早繼續講半導體的東西，上課教室跟之前去台沙時是同一間。理論課程結束之後接著是美術課，有超難割的圖形要割然後黏(他是貼紙式的)在小塊的矽晶圓上，來做低配版掀離製程，割到懷疑人生。剛開始貼分隔用的膠帶還貼歪再撕下來，那這樣做出來就會有膠原本就殘留在上面，導致它有淡淡的白色：膠原蛋白。笑死結果戳到教授笑點。
中午又拍了一張 liminal space 給朋友
好像是今天中午，有人在討論某年 SAT 的最後一題，幾百年沒算數學了我居然想那麼久才想出來，亞洲之恥。
下午就進入無塵室啦！介紹裡面的各種設備等等。無塵衣穿上都分不出誰是誰了，我很調皮的隔著黃光室的窗戶跟另外一個人猜拳，一開始還一直平手XD那個畫面感覺十分難忘，在不平凡的地方的平凡的快樂。
又到了晚間討論時間！
第四組也要做遊戲，而且對於撞題似乎有點不高興，我們是沒差但同時也感覺那個晶片戰爭好像有點普通，而且大家都想的到。第一天其實隊輔還有一個想法是 AI 做遊戲大家都會做，或許可以來做「能讓 AI 做出遊戲的 Prompt」。
我今天又唬爛了一個怪點子是學潘冠錡掰一首半導體的歌來唱(老實說我也忘記哪些是第一天唬的哪些是第二天w)
最後的關鍵討論是有人想到 AR，和今天在無塵室玩的裂片，覺得可以弄一個 AR 之類的東西，但 AR 需要特殊設備或 App，不太可行。我靈機一動想到前陣子很紅的 67 網站，就是偵測你的手看能 67 幾下，我想或許就結合這個影像辨識模組讓玩家用電腦操作類似 AR 的東西。同時我們也開始分工：誰研究理論、誰做介面、誰搞遊戲動作設計，並且把主要製程步驟列出來。我們也打算讓玩家可以用食指&中指做出捏筆動作，然後畫面就會有一隻筆，可以讓他自己設計想要的圖案印在晶圓上(實際上這靈感就來源於今早剪膠帶)。在大家忙碌之際我又冒出一個靈感是讓玩家玩完可以下載一個 STL 的 3D 檔案，並叫 ChatGPT 幫我生看看 (單純確認網頁能不能做到這件事情)，結果是可以！
互動型沉浸式半導體製程體驗 理念： 我們在課程第二天參觀了無塵室，但多數人卻很難有這樣的學習機會。因此我們想起了67網站，認為可以將影像辨識結合我們所學的半導體製程步驟，製作成互動式網站，讓玩家不必親臨無塵室，即可體驗半導體製程的過程。希望能藉此推廣半導體知識，造福廣大學子。
然後笑死一直在 vibe，我們是 AI 狗
今天晚上我、陳宥宇跑到印度老哥和陳裕仁他們房間去玩，印度老哥還畫出了詐騙集團運人到緬甸(是嗎？我有可能記錯國家w)的路線圖。不知道聊到什麼聊到業績，我就說那我們昨天吃的宵夜算不算一種夜雞:)
今天大概 work 到了凌晨一點多
我也跑去問了 ChatGPT 那個手部偵測怎麼搞，我先叫他做出一個簡單的倒水網站，發現沒問題後我本來想學著手刻，但最後還是墮落了哈哈XD一部分也是因為有時間壓力。
然後我搞了一個很長的 Prompt 叫邱子懿幫我跑
Prompt
採用模組化設計，架構類似：
semiconductor-camp/
├── index.html
├── js/
│ ├── gesture.js
│ ├── camera.js
│ ├── painter.js
│ ├── waferBreak.js
│ ├── buttons.js
│ ├── gripper.js
│ └── app.js
├── css/
├── assets/
│ ├── wafer.png
│ ├── chuck.png
│ └── sounds/
1. 現在，只製作介面，但藉由適當設計讓我能模組化分別設計每個關卡(步驟)，並能簡單的加入遊戲中，並告訴我如何加入。參照我給你的樣本檔案，並依照我告訴你的規則進行修改。完全忽略原檔案裡面的遊戲關卡實作。也忽略裡面所有影像辨識邏輯，以避免目前階段不必要的思考
2. 讓比例能符合一般筆電全螢幕畫面長寬比
3. 字體大小要讓操作者能看清楚，目前太小
4. 製程不能跳步驟
5. 我對關卡的想法是，燒杯，wafer夾之類的能偵測並attach在手上，而鏡頭畫面的下 1/4 是桌子，東西能擺在桌子上，讓玩家能有實體感
先告訴我大致怎麼串在一起即可，具體實作細節我將自行製作
6. 我希望在遊戲結束能有成功/失敗畫面，若成功，顯示恭喜並提供兩個按鈕分別能下載3D Object檔案和PNG圖片檔案，詳細如下：
6-0. 上面刻有玩家畫的 pattern (正片 or 負片，依照玩家所選擇的正/負光阻所定)
6-1. 圖片是由第一關由玩家藉由鏡頭感應，用手繪製
當然此部分也是使用模組化設計，先告訴我大致怎麼串在一起即可，具體實作細節我將自行製作
若有多個檔案，請分別給我。記得，只製作介面即可，但要能易於擴展、串接
盡量在各方面皆詳細、專業、嚴謹比較有趣的是有人要給隊友看他們做的東西，結果直接丟了個 127.0.0.1 或 localhost 的連結
Day3
智能車局，又是個寫過但都忘光的東西：Arduino
有人遲到，教授：「同學，現在幾點了」就一個被罵www
中午吃完飯陪朋友回清華會館拿充電線，結果跟了好多人XD，我們就沿路講幹話，我繼續掰一堆冷笑話降溫。
天天都要有 liminal space，以下照片：
最下面這張修圖 by ChatGPT
原圖
我用空閒時間把我的想法還有前面那個原始 prompt 拿去跟 Gemini 和 ChatGPT 討論，叫他們幫我優化提示詞，並且叫 ChatGPT 生成個示意圖以防他誤解我的意思，沒想到這示意圖生的太好了XD，都想直接把他丟給 Claude Code 叫他照著做 (最後有沒有丟我不太確定)
prompt
你是一位精通 WebAR、MediaPipe Hands 與 HTML5 Canvas 互動遊戲開發的資深前端架構師。
請參考我提供的附圖（半導體製程互動遊戲 UI 設計圖），將我原本散亂的專案重構為一個高度具備「實境體驗感（WebAR）」且極致模組化的 Vite + TypeScript 專案。
### ⚠️ 本次開發核心目標與範疇限制
1. **畫面必須 1:1 還原附圖 UI 佈局**（16:9 筆電全螢幕適應、科技感深色 Dashboard）。
2. **範疇控制**：**「只完整實作 UI 框架」與「第一關：繪製光罩圖形」**。第 2~6 關僅需提供空類別（Stub），不要預先寫死邏輯。
3. **徹底解決點擊無效問題**：嚴格區分 Canvas 點擊透傳與 HTML UI 層級。
4. **鏡像體驗（照鏡子感）**：提供前鏡頭預設鏡像翻轉，且手勢座標需與視覺完全同步。
5. **詳細擴充教學**：在輸出最後，詳細說明如何利用第一關「Pinch 吸附物件」的邏輯來擴充第二關（如：夾子/燒杯 Attach 到手部）。
---
### 一、 專案目錄結構規範 (TypeScript + Vite)
請提供完整的專案原始碼檔案，目錄結構如下：
semiconductor-camp/
├── index.html
├── package.json
├── tsconfig.json
├── src/
│ ├── main.ts # 程式入口、UI 事件綁定與主循環
│ ├── core/
│ │ ├── CameraManager.ts # WebCam 鏡頭控制、鏡像切換、MediaPipe Hands 整合
│ │ ├── StageManager.ts # 關卡切換狀態機 (State Machine)
│ │ └── GestureDetector.ts # Pinch 手勢判斷 (Landmark 4&8 歐氏距離) 與鏡像座標轉換
│ ├── stages/
│ │ ├── BaseStage.ts # 關卡抽象類別 (Abstract Class)
│ │ ├── Stage1DrawPattern.ts # 第一關：Pinch 手勢 Attach 畫筆與晶圓繪圖實作
│ │ └── StagePlaceholder.ts # 2~6 關的空樣板
│ ├── ui/
│ │ ├── UIManager.ts # 步驟選單、按鈕狀態、遊玩提示與結算 Modal
│ │ └── VirtualDesk.ts # 中央畫面下方 1/4 虛擬桌面 (Wafer/Chuck 繪圖區域)
│ └── utils/
│ └── Exporter.ts # PNG 下載與簡易 3D STL 檔生成邏輯
└── public/
└── assets/
---
### 二、 UI 版面配置與 CSS 圖層規範 (嚴格依據設計圖)
1. **版面架構 (16:9 筆電全螢幕 Dashboard)**：
- **頂部 Header**：遊戲標題「半導體製程互動遊戲」、當前關卡（關卡 1/6）、進度條 (16%)、設定/說明/退出按鈕。
- **左側 Sidebar**：製程步驟 1~6 列表（步驟 1 激活高亮，2~6 顯示鎖定 🔒），下方顯示遊玩提示文字框。
- **右側 Panel**：操作說明區（含手勢步驟圖解）、行動按鈕區（「完成繪製」、「下一步 🔒」）。
- **中央 Main View**：
- 頂部鏡頭設定列（[攝影機：前鏡頭]、[鏡像：開啟/關閉]）。
- 右上角「手勢參考」小視窗。
- 畫面中間標示「畫筆已附著在你的手上」的 AR 提示。
- **下方 1/4 固定虛擬桌面 (Virtual Desk)**：擺放晶圓 (Wafer) 與 Chuck，左下角顯示「已繪製圖形」小預覽框，右下角顯示「畫筆顏色/清除全部」。
- **底部/彈窗**：關卡流程圖列、遊戲結束 (成功/失敗) Modal。
2. **CSS Z-Index 與 Pointer Events 規範 (解決按鈕點擊覆蓋 Bug)**：
- `#video-element` (z-index: 1): 底層 WebCam 視訊。
- `#ar-canvas` (z-index: 2): 繪製手勢骨架、吸附在手上的畫筆 UI。**必須設定 `pointer-events: none;`**！
- `#desk-canvas` (z-index: 3): 下方 1/4 虛擬桌面的晶圓與 Pattern 繪製區。**設定 `pointer-events: none;`**。
- `#ui-layer` (z-index: 10): 所有 HTML 按鈕、側邊欄、對話框與 Modal。**設定 `pointer-events: auto;`**，確保按鈕 100% 可被點擊。
---
### 三、 第一關 WebAR 互動邏輯 (`Stage1DrawPattern.ts`)
1. **MediaPipe Hands 與真鏡像修正 (照鏡子體驗)**：
- 使用 `@mediapipe/hands` 與 `@mediapipe/camera_utils` (採 npm import 方式)。
- **鏡像開關邏輯**：當預設「鏡像：開啟」時：
- Video 與 AR Canvas 使用 CSS `transform: scaleX(-1)` 進行視覺翻轉。
- `GestureDetector` 在計算座標時，將 MediaPipe 的 $X$ 座標做翻轉映射：$X_{canvas} = (1 - X_{landmark}) \times CanvasWidth$。確保玩家「手往右移，畫面上的畫筆就往右移」。
2. **Pinch 手勢與 Attach 畫筆**：
- 計算食指尖 (Landmark 8) 與大拇指尖 (Landmark 4) 距離。
- 距離 $< 0.05$ 時判定為 `Pinch`，畫筆圖案自動 **Attach (吸附)** 到 Pinch 的中心座標點。
- 放開手指則取消 Attach。
3. **晶圓繪圖機制**：
- 當處於 `Pinch` 狀態且位置落在「下方 1/4 晶圓區域」時，在 Wafer Canvas 上劃出線條，並同步更新左下角「已繪製圖形」預覽框。
- 點擊右側「完成繪製」按鈕，觸發下一階段解鎖。
4. **正/負光阻機制**：第一關**不設置**正負光阻切換，光阻切換留給後續關卡。
---
### 四、 結算 Modal 與 擴充開發指南
1. **遊戲成功 Modal (`Exporter.ts`)**：
- **下載 PNG**：將晶圓上畫出的 Pattern Canvas 輸出為 PNG 圖片。
- **下載 3D 物件 (.stl)**：將 2D 畫布 Pattern 簡易擠出 (Extrude) 為圓形 3D 晶圓 STL 檔案並下載。
2. **擴充開發指南 (Developer Guide)**：
在 Code 輸出完成後，請詳細說明：
- **如何創建 `Stage2Coating.ts` 繼承 `BaseStage` 並註冊到 `StageManager`？**
- **如何將第一關「Pinch 吸附畫筆」的邏輯，直接複製套用到第二關「Pinch 抓取燒杯 / Wafer 夾」並進行傾斜倒液體？**
請提供完整、可直接以 `npm run dev` 啟動運行的 Vite + TypeScript 專案原始碼檔案！ChatGPT 生成的圖片如下：
下午教了除了基本的前後跑左右轉之外，紅外線、超音波感測器跟藍芽控制。超音波本來是說偵測到前方有物體就要停下，結果有人說還是寫個偵測到前方有物體就加速向前衝，我說要高速自轉轉過去w這就是 Attack Mode 的由來XD。
程式寫一寫我卻發現切換時很奇怪的有延遲，請老師來 debug 發現是超音波媺每輪美奐都會多回傳一行距離 0，不知道為什麼，但手動加個 delay(10) 就解決了，玄學原因。造就了很神奇的反而 delay() 跑更快XD。所以事後我在跟別人講幹話時就說會不會這個 delay() 其實不是 delay 程式碼，是 delay 我們所有人的時間！因為我們的時間被 delay 之下，相對而言就是程式速度變快了！一個相對論的概念，所以你看人類文明何等昌盛，要不是有愛因斯坦的相對論，人類怎麼能設計出這樣的 delay function 呢？而且你看 delay 跟 Dirac 念起來很相近，所以其實 Dirac 也有參一咖啊……。之後有人遇到類似問題我都跟他說你不要問我，我不知道，你去問愛因斯坦。
看來我沒什麼技術但講幹話還是挺行
今天晚間小組討論時間終於開始討論隊呼了，我們原本想法是可以把隊輔名字藏頭藏進去，後來變成決定把「科林研發」藏頭，然後開始搞押韻(隔行押韻)
那個第二句是我們一直想不出有什麼句子能 start with 林，結果我突然噴了一個「林口」，就有人把整句話生出來了，也是挺好笑的。另一個有故事的是「雕矽晶」，那時為了押韻想出了「矽晶」二字當結尾，但一直找不到適合的動詞，也是有人突然就想到了。
遊戲部分我們照著陳裕仁辛苦整理出的流程和理論把關卡完成，流程圖：
晚上在清華會館就是：玩 GeoGuessr (那時還有印度老哥也來，我們共六個人)、玩撲克牌，輸的去顧機台(AI 要跑 command 時按 YES)，喔對了，我還把之前 Claude Code 生成 Win95 介面的那版裡面他做的「證書」的概念抓過來，在這一版也加入個在最後生成一張證書，同時不經倒數直接拍一張照來拍出玩家的醜照放在上面。
btw我無聊還會開晶片戰爭來玩w前幾天跟之後幾天都是，而且其實他還能多人遊戲XD (我們好像是第一天還第二天晚上多人玩的？)
玩遊戲的畫面我就私藏了XD不方便放在這裡，這是我們玩完的證書
我 RCEs 的戰友表示：
今天可是熬到 4:00 睡啊！不過至少沒像北區高中職程式安全黑客松一樣熬穿
Day4
今天早上有個好玩的團體活動，看題目要猜是什麼詞，比如倒數第二題：「ㄎㄌㄧㄈ」，答案是「科林研發」。有趣的題目還有「ㄋㄘㄓㄒ」：奈材中心、「ㄚㄍ」：Argon (這什麼啊XD)、「ㄒㄐㄐ」：C++。
接著是輪站式的「半導體應用主題探索」，有五個小專題輪流聽。有說生物晶片的，有說第三代電晶體的，有說封裝的……。
下午又是參觀&實作環節，進無塵室之外還去看了地下室的水淨化系統。
在無塵室撕膠帶時，我說：「我們自己貼的膠袋自己撕，那我們是不是都是『自私的人』？」我們一邊撕膠帶一邊跟裡面的老師聊天，他們還說之前很好笑有人在無塵室裡伏地挺身，然後後來我們在旁邊等待休息時就說來猜拳輸的伏地挺身，結果兩次都是同一個人輸XD
今天遊戲部分就是修一些小細節、糾正理論問題、還有介面的相容性(不然本來只有跑在邱子懿的筆電上才不會跑版)，接著就是做簡報(包括團隊和個人的，個人簡報12點前要交，所以我們基本上午夜後才開始討論小隊的東西)，還有想隊呼動作。
我是放飛自我在個人簡報繼續塞爛梗，從第五天的經驗看來評審可能不覺得好笑但至少有隊輔跟隊員覺得好笑w那就夠了，畢竟個人獎捲死了我上台當小丑娛樂大家。
今天晚上借了隊輔的那套「晶圓之路」來玩，結果發現遊戲有點小 bug，因為只要有人做到後面的製程大家為了防止他贏就會合力打他，導致沒有人能順利完成四個製程。有人說「我知道為什麼這個去年沒有贏了，因為這個遊戲根本不會贏」💀
又是在 RCEs 浮出水面
我 YTP 的戰友表示：
遊戲成品，想玩嗎？
Day5
今天一早是個人報告和團體報告，我們直接開外掛用邱子懿的筆電接 HDMI 投影上去，很順利的幾乎沒有技術問題報告完。後面的組別多少都遇到一些技術問題(卡住或超連結壞掉之類的)。第二組是做一個自走車教學網站，但他們沒 demo 教學的那 part，就只有個介面。而第三組很有創意，借用 waffle 跟 wafer 的諧音用 waffler 來類比 wafer 的製程過程。他們是很認真的拍了一個影片，絕對不是在 waffle! 哈哈。第四組做了一個類似回答半導體問題，然後有排行的網站。而在專案之外，隊呼部分我覺得我們這組是最爛的XD別組都更有精神、走位、動作跟隊呼的感覺，還有一組詞跟動作都很優秀！
個人報告大家都很正經的在分享，只有我上台先表演個絆倒，然後在講吃雞排會有雞體電路(Integrated Chicken)，還能做智能車(Intelligent Car)，而且還可以是雞車等等。還有 Arduino UNO 板，那會不會有 Arduino Poker 板……。
接著是智能車的競賽，這部分我完全放推，自走車環節交給隊友弄XDD，而手動操作是每個人都要跑的，我這一生如履薄冰成為了第一個完全沒撞到障礙物的人，但耗時就十分感人。
很緊湊的吃完最後的午餐後，我們搭遊覽車前往科林研發亞太技術訓練中心。可能因為連熬兩天太累了，好幾次聽講我都直接斷電，醒來還不知道自己是什麼時候休眠模式的。他們特地為了給我們看把機台的門通通拆了，跟我們介紹他們製作的這些機器的作用。最後一間房還讓我們玩 VR！是一個射箭的遊戲。結業典禮現場有免費的餅乾跟巧克力，我吃了一包巧克力和一包小 OREO。
頒獎環節
公布得獎名單時可能有許多人會緊張，但我是沒什麼感覺，畢竟全國科展時已經體驗過那種感覺了w有就有沒有就沒有這樣，反正這幾天已經水吃水住水隊友的 Claude Code 水一堆了。然後我們就以 的機率得到了團隊第一名！
不是特別不意外也不是特別意外，畢竟就機率問題，這種東西跟科展一樣也很吃喜好XD
這次也讓我見識到新台幣的力量(Claude Code)
