個人作品集網站
一個同時證明我怎麼做事的作品集網站。
這個網站本身就是一個案例：從零開始用 AI agent 建構，但靠產品、前端、視覺、互動的判斷力一路打磨，直到它不再有 AI 生成的味道。
問題在哪
大部分作品集就是靜態範本、PDF，或稍微客製過的網站產生器。這個網站需要展示的不只是成果，而是能不能指揮 agent 做出一個完整、互動、打磨過的產品——而且 RWD 這塊，光是「我改了但你看不出來」這種溝通落差就反覆發生過幾次。
Role: 網站擁有者 · 前端建構 · 視覺總監 · Agent 協調者
Live proof
這個頁面本身就是成品。
你剛剛滑過的每個標題都是一個字一個字解碼出來的。切換網站語言，整個頁面會重新用新的文字系統解碼一次——是真的做出來的，不是套範本。
Built, not templated
點一下任一語言——這就是全站每個標題用的同一個效果。
即時狀態，現在發生——不是截圖
- 減少動態效果
- 未啟用
- 主題
- light
- 版面寬度
- md (768px+)
- 語言
- zh-tw
跟著你系統的動畫設定走——開啟時下面的長條會停住
跟著你存的亮色／暗色選擇
目前這個寬度套用的版面層級
你正在看的語言，用它自己的文字解碼出來
拉拉看視窗大小 切換主題——右上角
定義圍繞 Forward Deployed Engineering、Agent 維運與現場交付的定位。
指揮視覺語言、版面、深色模式、專案卡片、互動打磨，美感取捨全部自己拍板。
透過 agent 協作從零建構網站，不是用無代碼範本或 PDF。
建立 RWD 改動前先講清楚斷點跟語言範圍的驗證規則，把一次性的修 bug 變成下次不會再犯的流程要求。
AI 協作治理
這個網站優秀，不是因為 AI 聰明，而是因為我知道怎麼「管」它——這頁記錄的是我如何戳破 AI 的認知盲點，並把它變成不會再犯的流程。
治理案例
點開看一手證據
AI 的慣性盲點
AI 在優化某個切面時缺乏鄰近情境的推想：改中文版忽略英文語系換行、改手機版 class 卻沒意識到我在桌機根本看不到差異。它只驗證自己動過的那一面，不會主動想「這個改動的鄰居會不會壞」。
我建立的治理機制
建立「任何前端改動前，強制宣告 Viewport Scope & Language Target」的規則——先講清楚這次動的是哪個斷點、哪個語系，驗證才有明確標的。
協作解鎖的價值
把 AI 瞎子摸象式的區域優化，收斂成宣告式的驗證邊界；一次性的爆版 bug，變成下一輪不會再犯的協作制度。
AI 的慣性盲點
AI 傾向為了維持上下文一致性，即使看到反證也順著先前的結論講下去，甚至「程式碼讀起來合理」就回報做完，不願承認自己判斷錯了。
我建立的治理機制
導入 Evidence-over-Consistency 規則：以當前一手錯誤日誌（log）、實機執行結果為最高仲裁標準，明確要求新證據與舊判斷衝突時以證據為準。
協作解鎖的價值
讓人機協作不被 AI 的自我合理化拖著走；判斷錯了當場以證據翻案，而不是把錯誤一路帶進生產環境。
AI 的慣性盲點
AI 可以生成大量選項，但無法知道「我心中要的效果」——hero 區的互動動畫對不對味、這個功能到底值不值得做，這類視覺與價值判斷它給不出答案。
我建立的治理機制
明確劃出人機分工邊界：大架構、斷點策略、選項生成交給 AI；審美仲裁與取捨拍板權永遠留在人這端，AI 只負責提選項不負責定案。
協作解鎖的價值
讓 AI 的產能為人的品味服務，而不是反過來被 AI 的平均值美感稀釋——成品最終長成「有人在指揮」而非「被 AI 幫忙」的樣子。
結果怎樣
作品集即證明
網站不只是描述能力，它直接展示了互動前端跟 agent 協調的能力。
抓到並修掉的 AI 盲點
英文版導覽換行 bug、"改了但桌機看不出來"的 class 落差，都是我盯著實機驗證才抓出來、逼出下一輪流程要求的案例。
從零到成品
這個專案展示了從空白頁面到部署上線的個人品牌系統，完整的一條路——不是一次性 prompt 出來的，是來回驗證、踩坑、修正過的結果。