我花了12天，把12個AI學院的首頁全部重新設計

我是AI-MAN，12AI學院的創辦人，正在獨自升級成為12AI全端創業家。

8月19日到8月30日，我花了12天，把12個AI學院的首頁全部重新設計。

我會重新設計12個AI學院的新首頁，第一個主因當然是12個AI學院的首頁太陽春了(沒有任何動畫效果)，第二個主因是想要用公開建造的方式，精進自己用AI設計網站與Landing page的能力。

接下來就是這12天的完整記錄。你讀完會帶走一件具體的東西：一套「這個現成模版到底要不要用」的判斷順序，以及每一步該在哪一輪做完。這12天裡我有四次是整個版本做到可以驗收了，才整包否決、程式碼全數還原——同一個否決，發生在看網址那一輪，跟發生在整站做完那一輪，付出的成本完全不同。那四次的錢我付過了，你可以只付前面那一種。

實戰用的文案，就是即將推出的12AI全端創業家育成計畫

設計網站跟Landing Page，不可能沒有文案。我剛設計好12AI全端創業家育成計畫(大推，這可是超值課程)，我就直接拿它來實戰——用真的要拿去招生的內容練，練出來的東西才能直接上線，也才看得到真實的問題。現在的首頁中還沒有加上實際的CTA按鈕，版面上的按鈕都還沒接上email服務，12AI學院計畫採用Cloudflare AI Agent電子郵件服務來承接。但這就是公開建造的做法，先用Claude Code實戰上線，再持續進行產品迭代優化。

12個AI學院原本的首頁都是同一份母版舊首頁：滿版影片Hero、L1–L3升級路徑三欄、下面接一排免費課程列表。這次改版把那三欄跟課程列表整份下架，12個首頁同時換成承接育成計畫的招生內容。

換掉之後的首頁是9段骨架：hero、agent（不要只會用ChatGPT）、building（公開建造）、archive（12個AI學院，含「你在這裡」）、philosophy（怎麼開始、怎麼上課）、offer（第一期限量招生兩張卡）、advantages（三指標＋收束＋公式＋促銷）、newsletter、faq。這9段裡只有hero是逐站客製——破題句跟SEO description不同，其餘8段12站完全一致，同一個文案檔、同一個單一事實來源。

跨站一致的還有數字：12萬元、72小時、月2次3小時、12個月、12個學院。這幾個數字在任何一站看到的都必須一樣，因為讀者很可能從aiart.tw進來、從aicoding.tw出去。

這件事對你的意義是：如果你同時在經營好幾個網站，真正需要統一的是文案跟數字，不是版型。我在12個網站上做的其實是同一份招生內容的12種說法，把文案抽成單一檔案之後，改一次全部到位；促銷條件從「前10名」改成「18歲以下學員享5折」的時候，我才發現這句話在文案檔裡出現在三個地方（advantages的促銷句、offer第一張卡的標題行、同一張卡的第三行），改一處就要改三處。文案集中管理不是潔癖，是你只要漏掉一處，讀者就會在兩個頁面上看到兩種價格。

版型刻意不統一，這是設計決定不是還沒收斂

12個網域是同一套offer的並行設計變體。各站用自己的垂直領域語言講同一個招生內容：aivideo.tw是電影售票所，米白配橘紅，票券、海報、爆米花桶；aibrand.tw是AI研究所，鈷藍配環形掃描線與解剖圖式版面；aifilm.tw是霓虹電影感的黑色舞台，日本紅填色；aimedia.tw是創意科技工作室，品牌粉；aishop.tw是高彩度編輯式電商，近黑與白交替加螢光綠；aicoding.tw是宇宙演化觀測站，青與洋紅；ai3d.tw是3D奇幻冒險世界；aiart.tw是黑白高時尚影像工作室。

同一句招生文案，放在售票所裡跟放在觀測站裡，讀者接收到的完全是兩件事。我要的就是這個——12個入口不該長得像同一個網站的12個分頁，因為進來的人本來就不是同一群人。

一開始就決定要砍掉的兩種區塊

外面現成的模版幾乎每一支都有客戶推薦或見證那一段，我全部砍掉。理由只有一個：第一期還沒有學員，不編造見證。aibrand、aivideo、aimedia這三站的模版都有這一段，都砍了。

第二種是團隊介紹。多人團隊的版面跟「一個人做12個網站」這件事語意衝突，aibrand那支模版還有一段叫「集體智慧」，也砍掉了。

砍掉是有代價的，版面會空一塊，要另外找東西補，補不好整段節奏就斷。但這個代價我認為值得——你在這12個網站上讀到的每一句話，都不是為了填滿版面而寫出來的。

最貴的四次：整包做完才否決

第一次，把「主題貼合」誤當成「質感貼合」

aivideo.tw的第一版，我選了一支本身就在賣AI生成影片的模版，主題再貼合不過。做完兩千行之後看，它的視覺語彙是終端機、程式碼區塊、功能卡——整頁看起來像一個開發者工具的產品頁，不像一個AI影片學院。全數還原。

這一次留下的判準是：把模版的文字全部換成你自己的文案之後，它還像不像你這個行業的品牌？ 這個測試不需要寫程式，看網址那一輪就能做完。我是寫完才做的，所以付了兩千行的錢。

第二次，做到整頁13段可以互動了，才發現動效沒有特別

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

後來回頭查為什麼會判錯，查到兩件事。第一件是這支模版的動效分布本來就看得出來：opacity出現16次、yPercent加y共13次、fontVariationSettings 6次、scale 4次——淡入跟上下滑佔絕對多數，真正的招牌只有6次。這個分布在動工前跑一行指令就看得到，不必等做完。

第二件是我自己的錯：移植的時候，我把模版的nav、footer關掉，又把一段clip-path設成none。模版最獨特的四件事，被我關掉三件。我是在一個被自己削弱過的版本上做的判斷。所以現在的規則是——拿掉模版任何元件之前，先確認那個元件身上有沒有掛著獨門動效。

第三次，同一站換了三支模版

aicoding.tw是這12站裡工程量最大的，也是唯一換過三支模版的。前兩案都是整包做完後捨棄，第三案才過。第三案是四個候選裡最重的一支，three.js加GSAP加ScrollTrigger加Lenis，粒子系統我一個都沒砍——8個形狀變形、光暈、星座線、點擊爆散、滑鼠閃避全部保留，8段宇宙演化的敘事承載招生文案。代價是首頁First Load 180KB，three.js另外拆成延遲載入。

這一站也是第一個讓我發現「Hero吸收了宣言段，會導致其餘段位整批順移」的站。換Hero文案不是換幾個字而已，會連動整份版位對應表。

第四次，桌機手機驗收全過，當天否決

aiads.tw的重建版，用一支叫NOVARA的編輯式攝影作品集模版，整站做完、桌機跟手機驗收全部通過，當天被我否決、全部還原，現在線上的還是8月21日那版純自建的。

這一支還有一個更難堪的地方：它在8月30日的aicoach選型時就落選過一次，8月31日我重新評估、採用、當天又否決——同一支模版在12站被否決了兩次。

卡點很具體：它是單人攝影師的作品集，Hero是為「一個英文單字」設計的（nowrap加18vw字級），我的字標三個字塞不進去；版位是work、pricing、faq這種接案動線，跟「育成計畫加12個學院」根本不同構。最後Hero的eyebrow、副標、釋義、兩顆CTA全部拿掉才收得住版——等於我自己承認模版的Hero裝不下我的Hero。

這四次之後，我現在的判斷順序

權重是固定的：質感（視覺調性）＞主題語意＞工程成本。順序是這樣跑的，每一步都在動工前做完：

第一步，換文案測試。把模版文字換成自己的文案，看它還像不像這個行業的品牌。這一步驗的是「像不像」。

第二步，換骨架測試。這是NOVARA那次之後才補上的——換文案測試只驗像不像，不驗裝不裝得下。把自己的9段硬套進模版的版位，數要動幾個地方，特別是Hero的字標、引言、跟兩張招生卡這三件。判準是：要動的地方一多就不要做，因為套模版的理由本來就是省成本，動到最後成本反而更高。

第三步，數動效，而且要數「裝置」不是數屬性名。屬性統計會把「六階段撕紙時間軸」跟「淡入」算成同一類。一行指令就能跑：

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

如果opacity遠多於其他所有種類的總和，這支模版的「特別」就只剩版面本身，不在動效。那不一定是壞事，但你要在動工前知道。

第四步，拿到原始碼第一件事是驗證模版本身是完整的。我踩過一支：專業版的匯出檔跟線上官方展示頁都是壞的，一支script被抽掉，9組效果的掛勾完全沒有JS。你不驗，會以為是自己移植失敗。

第五步，不要自己決定簡化動效。套模版的目的就是那些動效，成本有問題就講出來，不要偷偷砍。

還有一條是aifilm.tw留下來的：一個很強的Hero，不代表它接得上任何下方版型。 那一站原本的方案是Hero用一支、其餘用另一支，兩套素材都下載了，混合版也做完了，捲動的時候像從一個網站跳進另一個網站。最後整站統一成同一支。首頁不是優秀區塊的集合，是一段連續的體驗。

aimusic.tw是唯一的例外，而且例外的理由不是設計

12站裡有11站的首頁套同一份招生骨架，只有aimusic.tw沒有。這一站的首頁不放招生文案，也不放任何招生動線，改成單一任務：展示AI音樂創作的可能性。

這是第一次我為了模版而調整文案策略，不是為了文案選模版。那支模版的16個區塊是在解剖一台樂器，接不上「講一個育成計畫」的骨架。我付得起這個代價，是因為有母站承接招生——所以這一站是例外，不是範本。

真正花掉時間的是文案，寫了五版才過。我對這一站的定調是：對於喜歡音樂創作的人，只能吸引，不能說教，不能跟他們說用AI有多好，只能用AI作品跟創作本身來吸引他們。

前四版各自的錯法，我覺得任何人寫這類文案都會踩：第一版照模版原文逐段翻譯，整頁變成在替模版說話；第二版變成音樂教學跟設計教學，講的是學科知識；第三版講工具有多好，「以前做不到、現在做得到」就是這一類，這一類最難自己察覺；第四版語氣太硬，「不需要」跟「不一定要」差一個詞，前者是敵意，後者是准許。

現在我寫完這類文案會先跑一次自我稽核：

grep -nE '以前|現在都|讓你可以|不用再|再也不' <文案檔>

「以前／現在」的比較句是說教最常見的偽裝。aimusic定案那版跑這個指令回0。

有效的替代做法只有一個：用受眾自己的行話寫。我先收集了一份音樂人常用關鍵字，把段落標題全部換成錄音室語言——SOUNDCHECK、PUNCH IN、OVERDUB、NOODLIN'、FROM THE TOP、THAT'S A WRAP。行話本身就是入場證明，比任何說服都有效。

還有一條，我覺得是這12天裡最值得帶走的寫法：要主張的事，用排的不要用講的。 這一站第14段要講「一個人做得完」，我沒有寫任何一句「AI讓一個人做得完」，我排了一張製作名單出來——作曲是你、樂手是AI、混音是AI、⋯⋯製作人是你，文案只有一句「看看上面有幾個名字」。讀者自己算出來的結論，比你告訴他有力得多。

沒人會看見、但實際佔掉最多時間的部分

首頁改版真正的工時不在版面，在下面這些地方。

中英混排標題的對齊是一項。中文字跟拉丁字的墨水盒高度不一樣，直接混排的時候拉丁字看起來會偏小、偏低。我的做法是用canvas量兩套字型實際的墨水邊界，算出放大倍率跟基線位移。實測出來的三組數值：Switzer配蘋方是115%配−0.027em、Instrument Serif配思源宋體是115%配−0.043em、Didot／Bodoni配思源黑體是122%配−0.04em。倍率有兩組巧合相同，位移卻差很多——這組數值不能跨字型配對沿用，換一組字型就要重量一次。

素材是另一項。所有圖片影片一律下載到自己的網域，絕不從別人的CDN直接連——遠端隨時可能404，授權也不明。而且模版附的影片編碼通常很寬鬆，4秒的短片用到7.5 Mbps，實際上有五到六倍的壓縮空間，aimedia那一站有一支從10MB壓到2.5MB，畫質看不出差別。

three.js那一站更麻煩。模版原本是單檔3.80MB、0個HTTP request、45,241個三角形的真WebGL場景，我把three.js改成npm加動態載入、把內嵌的base64素材拆成靜態檔，首頁First Load壓到104kB，three.js另成119KB的延遲載入區塊。但拆完之後有個問題：模版原文自誇的「0 HTTP requests」「單一檔案」「3.80 MB」全部不成立了。移植這種拿自己的實作當賣點的模版，一定要逐句檢查文案裡的數字還成不成立。

最後是驗收腳本。我的驗收腳本自己有bug，到目前為止已經復發五次，最貴的一次是部署輪詢用了grep -c配|| echo 0，變數變成兩行的"0\n0"，結果在還沒部署完的時候就誤報「已上線」。現在的規則是：一律做正面檢查（新內容在不在），反面檢查只當輔助。一個兩個方向都回0的檢查，代表檢查本身壞了，不是修好了。

12站裡有2站不是Claude Code做的

這12站，9站走Claude Code，2站交給Codex——aifilm.tw跟aishop.tw。交付方式是一份精簡版brief加上模版原始碼，兩邊吃的是同一套brief格式。

分工目前是這樣落下來的：Codex那兩站的共通點是版型收斂、動效以版面跟字體為主；需要重度WebGL、要逐幀調校的站（three.js那兩站）目前仍然走Claude Code。

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

還沒做完的事，我也一起寫出來

12個首頁上線，不等於12個網站做完。到現在還沒收斂的至少有這些：aivideo、aibrand、aimedia、aifilm四站的素材還是模版原圖，還沒換成各站自己的內容；白底跟黑底要不要全站統一還沒定調；faq那一段是做到第七站才新增的，前面幾站還沒回補；有一站連favicon都還沒放，每一頁都在產生一個404。

首頁以外的頁面也還在追。9月2日我剛把母站的About、BUILD、SELL、BLOG四頁換成跟首頁同一套設計系統，那是12站裡第一站；其餘的about、build、sell、blog、pricing、courses多數還是母版樣式。這件事沒做完之前，讀者從首頁點進第二頁，還是會感覺換了一個網站。

這12天真正省得下來的成本

回頭看，這12天做出來的東西裡，沒有一項是設計上的發明。我做的只是把同一份招生內容，在12個不同的垂直領域各講一次，然後把四次「做完才發現不能用」誠實記下來。

真正的成本不在做，在判斷發生的時機。換文案測試、換骨架測試、數動效裝置、驗證模版完整，這四件事加起來大概花不到一小時，卻是那四次整包還原唯一能省下來的地方。下一站選模版的時候，我會在看網址那一輪就把它們跑完。

這篇文章本身也是這12天的一部分。我沒有另外編一筆行銷預算，也沒有等到12站都收斂完才發表——正在跑的東西才有真的坑可以寫，包裝過的結案報告沒有。