個人作品集網站
一個同時證明我怎麼做事的作品集網站。
這個網站本身就是一個案例：從零開始用 AI agent 建構，但靠產品、前端、視覺、互動的判斷力一路打磨，直到它不再有 AI 生成的味道。
問題在哪
大部分作品集就是靜態範本、PDF，或稍微客製過的網站產生器。這個網站需要展示的不只是成果，而是能不能指揮 agent 做出一個完整、互動、打磨過的產品——而且 RWD 這塊，光是「我改了但你看不出來」這種溝通落差就反覆發生過幾次。
Role: 網站擁有者 · 前端建構 · 視覺總監 · Agent 協調者
Live proof
這個頁面本身就是成品。
你剛剛滑過的每個標題都是一個字一個字解碼出來的。切換網站語言，整個頁面會重新用新的文字系統解碼一次——是真的做出來的，不是套範本。
Built, not templated
點一下任一語言——這就是全站每個標題用的同一個效果。
即時狀態，現在發生——不是截圖
- 減少動態效果
- 未啟用
- 主題
- light
- 版面寬度
- md (768px+)
- 語言
- zh-tw
跟著你系統的動畫設定走——開啟時下面的長條會停住
跟著你存的亮色／暗色選擇
目前這個寬度套用的版面層級
你正在看的語言，用它自己的文字解碼出來
拉拉看視窗大小 切換主題——右上角
定義圍繞 AI/產品建構能力的定位。
指揮視覺語言、版面、深色模式、專案卡片、互動打磨，美感取捨全部自己拍板。
透過 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 出來的，是來回驗證、踩坑、修正過的結果。