我如何透過建造12個AI學院的新首頁來增進AI Coding技能

我是AI-MAN，我是AI一人公司。

先講結論，因為這才是你點進來要拿的東西：

學 AI 最好的路徑，不是先把所有東西學會再開始，是直接用 Claude Code／Codex 進入實戰，在一次又一次真的完成作品的過程裡，把技能練出來。

我不是工程師，開始做這件事之前也不太懂網站設計。8月19日到8月30日，12天，我用 Claude Code 跟 Codex 把 12 個 AI 學院的首頁全部重做一次；做完回頭看第一站不滿意，又重做了一次。加起來 13 次 Landing Page 的設計與開發實戰。

13 次之後，我現在可以獨立設計網站跟 Landing Page。

不是「看得懂設計師在做什麼」，是自己決定版面結構、自己決定視覺呈現、自己決定每一個區塊的動畫效果，然後讓 Claude Code 或 Codex 把它做出來。

這篇就是這 13 次的公開記錄。我會照時間順序講——包括第一次做得很慢、包括做完才發現不滿意、包括中間跑去測另一個工具。你會看到技能是怎麼一層一層疊上來的。

第 1 次：免費模版，慢，但結果就是比較好

我從第一個學院開始——aistartup.tw，AI創業學院，母站。

那時候我手上有一套自己統一過的設計系統（Coterie），12 個網站都跑這一套。乾淨、克制、好維護。問題是首頁看起來太安靜了，撐不起招生。

所以第一次我做了一件很簡單的事：拿一個免費模版下來，重新設計首頁。

不是複製貼上就結束。免費模版拿到手，它的 CSS、它的動效、它的版位，全都是為別人的內容長的。我花了非常多時間在微調——一個區塊一個區塊對，一段文案一段文案塞。

但做出來的效果，比我原本用 Coterie 設計系統的版本更好。

這一次我 get 到的第一件事是：設計能力不是你腦子裡想得出多美的畫面，是你手上有沒有一個夠高的起點。 一個做得好的模版，本身就是別人已經解過的一整套版面題目。你從那裡開始改，比你從白畫布開始想，快太多。

也慢慢知道：我不需要會「畫」設計，我需要會「判斷」設計。

第 2 次到第 12 次：從免費升級成專業會員

第一站跑通之後，我做了一個決定——從免費模版升級到註冊專業會員。

理由很直接：12 個 AI 學院是我要真的拿來運營、拿來招生的網站，我需要明確的商業使用資格，也需要更高端、更完整的呈現。免費檔通常是簡化過的，動效跟素材都被砍過。

升級之後，接下來的 11 站就是連續開刷。

8月20日 ai3d，8月21日 aiads，8月22日 aiart，8月24日 aivideo 跟 aibrand，8月25日 aifilm 跟 aimedia，8月26日 aimusic，8月28日 aishop，8月29日 aicoding（就是你現在在讀的這個站），8月30日 aicoach。

12天，12站。

這 11 次不是同一件事重複 11 遍。每一站的模版不一樣、視覺語言不一樣、要處理的坑也不一樣——電影售票所、研究所、黑色霓虹舞台、創意科技工作室、編輯式電商、宇宙觀測站、3D 冒險世界、黑白高時尚。同一份招生內容，講了 12 種說法。

這才是實戰的價值：同一件事你做 12 次，第 12 次跟第 1 次不會是同一個人在做。

中間插播：我跑去用 Codex 做了兩站

前面我都以 Claude Code 為主。做到中間，我想測 Codex 5.6 Sol 的能力到哪裡，所以我把兩個站整站交給它——aifilm.tw（AI電影學院）跟 aishop.tw（AI電商學院），兩站都是 Codex 從頭做完的。

交付方式是一份精簡版 brief 加上模版原始碼，跟我丟給 Claude Code 的是同一套格式。

結果：Codex 花的時間比較長，但做出來的結果是可以接受的。

而且 aishop.tw 是這 12 站裡做得最徹底的一站——它不只做首頁，還把首頁的字體系統跟黑底巨型字標的 Footer 一路延伸到 About、BUILD、SELL、Blog、課程與定價，全部前台頁面。到今天為止它仍然是 12 站裡整站語言最一致的一個。

我從這兩站學到的不是「哪一個比較強」，是分工。這兩個都是現在檯面上最強的 AI Coding 引擎，我實際跑完之後的分法是：版型收斂、動效以版面跟字體為主的站，交給 Codex 沒問題；需要重度 WebGL、要逐幀調校 3D 的站，我目前還是走 Claude Code。

你身上如果只有一個工具，你永遠不會知道它的邊界在哪。跑第二個，才會知道。

第 13 次：回頭把第一站砍掉重做

12天做完 12 站，我回頭看第一站——aistartup.tw。

不滿意。

不是它壞掉，是我的眼睛不一樣了。第 1 次做的時候，我還不太懂版面結構跟動效要怎麼配；做完 12 站之後再看，我看得出來它的節奏哪裡鬆、哪裡空。

所以我把它砍掉重做，用的是 aibrand.tw（AI品牌學院）那一站的模版來重新設計 AI創業學院。

這就是第 13 次。

這一次是整趟裡最有價值的一次。 因為它證明的不是「我做出了第 13 個 Landing Page」，是「我對設計的判斷力，在這 12 次裡真的升級了」。你能看出自己三個星期前的作品哪裡不夠好，代表這段時間的實戰有真的進到身上。

13 次實戰，我實際加點在哪三個地方

我一開始不太懂網站設計。現在我掌握的是三件具體的事：版面結構、視覺呈現、動畫效果。 這三件不是抽象的品味，是可以檢查、可以下指令的東西。分享我實際踩出來的版本。

一、版面結構：先確定「裝不裝得下」，再開始做

新手最容易犯的錯（我第一次就犯了）：看到一個很漂亮的模版，覺得「就是它了」，然後開始做，做到一半才發現自己的內容塞不進去。

我後來固定會做兩個測試，而且都在還沒寫任何一行程式之前做完：

換文案測試——把模版上的文字全部換成你自己的文案，它還像不像你這個行業的品牌？我在一個站上栽過：選了一支主題超級貼合的模版，做完兩千行才發現它的視覺語彙是終端機、程式碼區塊、功能卡，整頁看起來像開發者工具的產品頁。全數還原。

換骨架測試——換文案測試只驗「像不像」，不驗「裝不裝得下」。把你的區塊清單硬套進模版的版位，數你要動幾個地方。我在另一個站上做完整站、桌機手機驗收全過，當天否決還原，卡點是它的 Hero 是為「一個英文單字」設計的（nowrap 加 18vw 字級），我的字標三個字塞不進去，最後 Hero 的副標、釋義、兩顆按鈕全部拿掉才收得住版——那等於我自己承認模版的 Hero 裝不下我的 Hero。

判準：要動的地方一多就不要做。 你用模版的理由本來就是省時間，動到最後比自己刻還久。

還有一個結構的坑，我第一次遇到嚇一跳：Hero 一旦吸收了下面那一段的內容，後面所有區塊的版位會整批往前移。 換 Hero 文案不是換幾個字，是要重畫整份「文案段 → 版面區塊」的對應表。所以我現在動工前一定先把這張對應表填完。

二、視覺呈現：中文網站的魔王在字

這一關是我覺得最有價值的升級，因為它是中文網站專屬的 Boss，英文模版一律不會幫你處理。

模版是為拉丁字母設計的。你把中文塞進去，會發生三件事：

第一，中英混排的標題會歪。 中文字跟拉丁字的墨水高度不一樣，直接混排時英文看起來偏小、偏低。我的解法是用 canvas 量兩套字型實際的墨水邊界，算出放大倍率跟基線位移。實測出來三組數值：一組是 115% 配 −0.027em、一組是 115% 配 −0.043em、一組是 122% 配 −0.04em。倍率有兩組剛好一樣，位移卻差很多——這組數字不能跨字型配對沿用，你換一組字型就要重量一次。

第二，模版的行高跟字距會把中文擠爛。 模版常見的 0.74–0.88 行高加負字距，是為拉丁 display 字體設計的。中文標題行高要 ≥ 1.05，字距設 0。

第三，深色區塊的標題會消失。 因為全站樣式表裡的 h1–h6 是元素選擇器，權重贏過繼承、也贏過 Tailwind 的 utility class。深底區塊的標題要顯式指定 color，不能靠繼承。

還有一個我到現在都會先檢查的：外層容器一定用 `overflow-x: clip`，絕對不要用 `hidden`。 用 hidden 的話，另一軸會被算成 auto，容器變成捲動容器，會同時弄壞兩件事——子元素的負 margin 被裁掉（透明導覽列會露出白帶），而且裡面所有 position: sticky 會認錯捲動範圍、永遠不啟動。這個 bug 超難查，因為畫面看起來只是「動效沒動」。

三、動畫效果：學會「數裝置」，不要數屬性

這是我覺得最反直覺、但升級最有感的一關。

我有一站，模版整頁做完、13 個區塊、所有互動都能跑，我才判斷「效果都是放大縮小，其實沒什麼特別」，整包捨棄。

事後回查，這件事在動工前一行指令就看得出來：

grep -oE "(scale|scaleX|scaleY|yPercent|xPercent|opacity|clipPath|fontVariationSettings|backgroundColor|filter|rotate|x:|y:)" app.js \
  | sort | uniq -c | sort -rn

那支模版跑出來是：opacity 16 次、yPercent 加 y 13 次、fontVariationSettings 6 次、scale 4 次。淡入跟上下滑佔絕對多數，真正的招牌只有 6 次。

判準：如果 `opacity` 遠多於其他所有種類的總和，這支模版的「特別」就只剩版面本身，不在動效。

但這裡有個更重要的觀念，我是踩過才懂的：要數的是「裝置」，不是屬性名。 屬性統計會把「六階段撕紙時間軸」跟「一個淡入」算成同一類。指令是幫你篩掉明顯沒東西的，看到有東西之後還是要自己捲一遍，數它到底有幾個獨立的互動裝置。

另外三個我實際卡過的動效坑，直接給你：

GSAP 不能從關鍵字補間。 gsap.to(el, { filter: 'brightness(.45)' }) 這樣寫，起始值是 filter: none，none 沒有數值會被當成 brightness(0)，捲動 6% 整片畫面全黑。要補間的屬性，起始值不能是 none／auto／normal，一律用 fromTo 把兩端寫死。

捲動釘選（pin）3 段是安全上限。 而且能用原生 position: sticky 就不要用 GSAP 的 pin。但也有例外——我有一站的 3D 場景，23 個 ScrollTrigger 全部 pin: false，運鏡是用 position: fixed 的 canvas 加 render loop 直接讀捲動量，完全不經過 ScrollTrigger。遇到這種寫法，那條「3 段上限」的規則就不適用了。

不要自己決定簡化動效。 你套模版的目的就是那些動效。成本有問題就講出來重選，不要偷偷砍——砍完你會發現，你花時間搬過來的只是一個版面而已。

你今天就可以開刷的第一次實戰

講完我的 13 次，換你。你不需要等到「學會網站設計」才開始，就從第 1 次開始。

Step 1｜先開一個空專案

npx create-next-app@latest my-landing --ts --tailwind --app

Step 2｜找一個你真的喜歡的免費模版，把原始碼抓下來

重點：要原始碼，不要「設計提示詞」。 提示詞寫的是設計意圖，不是實作真相，你照著提示詞做出來的東西跟你看到的畫面會差很多。

Step 3｜在動工前，先跑那一行動效統計

把模版的 JS 檔丟進上面那個 grep 指令。如果 opacity 壓倒性多數，換一支——你會省下整整一輪的工。

Step 4｜把這段直接貼進 Claude Code 或 Codex

我要把這個模版移植成我自己的 Landing Page。

先不要寫任何程式碼，我要你先做三件事：

1. 讀完模版原始碼，列出它全部的區塊，
   每個區塊寫一行：它在版面上負責什麼、掛了什麼動效。

2. 我的內容有這幾段：[貼上你的區塊清單]。
   幫我做一張「我的內容 → 模版區塊」對應表，
   並且明確標出：哪幾段是模版沒有的、哪幾段是模版有但我不需要的。

3. 告訴我這次移植總共要動幾個地方。
   如果要動的地方超過一半，直接跟我說這支模版不適合，不要開始做。

這一步是整篇文章裡最值錢的一步。 我付了四次「整包做完才否決」的學費，才知道這三個問題要在寫程式之前問完。

Step 5｜開始移植，但先講清楚三條規則

移植規則，請嚴格遵守：

1. 外層容器用 overflow-x: clip，不要用 hidden。
2. 中文標題行高 >= 1.05，字距設 0，
   不要沿用模版為拉丁字體設定的行高與負字距。
3. 不要簡化任何動效。
   如果某個動效移植成本太高，先回報給我，由我決定，不要自己砍掉。

素材全部下載到本地 public/ 底下，不要直接連模版的 CDN。

Step 6｜做完，把它公開

不用等它完美。我第一站做完不滿意，是做到第 13 次才回頭重做的——但那 12 次全部都上線了。

沒上線的作品不會給你回饋，不給你回饋的東西不會讓你升級。

最後

我從一開始不太懂網站設計，到現在可以獨立設計網站與 Landing Page，中間沒有上過任何一堂網站設計課。

我做的只有一件事：把 Claude Code 跟 Codex 打開，接一個真的要上線的案子，做完，再接下一個。

第 1 次很慢，微調到懷疑人生。第 13 次，我已經知道要在哪一輪把一支模版否決掉。

這中間沒有捷徑，但也沒有門檻——差別只在你有沒有真的開始做第 1 次。

不要先學會再開始。開始，然後在完成作品的過程中學會。